Hostuj aplikację na GitHubie (gh-pages)

gh-pages

GitHub hostuje strony statyczne (tak, tylko statyczne). Co daje nam i tak masę możliwości, bo JavaScript działa i ma sie dobrze. Użyłem tego na przykład pisząc o Routingu w JavaScript. Efekt jest taki, że po prześciu na przygotowany przeze mnie przykład mamy statyczną stronę z JavaScriptem czyli wszystko co mi było potrzebne, nie musiałem korzystać z zewnętrznego hostingu.

Jak to działa

gh-pages branch github

Tworzymy branch nazywający się ‚gh-pages‚. Dzięki temu zawartość, będąca na tym branchu będzie dostępna pod adressem userName.github.io/repositoryName/ . W tym momencie mamy dwa branche i jest to trochę mylące. Ktoś wchodzący na nasze repozytorium może widzieć kod w ‚masterze‚, a na github.io będzie kod z ‚gh-pages‚. W przypadku z poprzedniego akapitu chcę mieć tylko jedną wersję kodu, więc kasuję mastera (da się to też wyklikać na stronie, trzeba tylko znaleźć gdzie zmieniamy domyślny branch – zakładka Settings).

Odpada krok deployowania

Podczas pisania wpadł mi do głowy pomysł. Mam sobie aplikacyjkę (TS web cards helper), którą deployuję na hosting, który mam w Webio (btw jestem zadowolony z ich usług). Na dziś dzień jest to Single Page Application bez jakiegokolwiek backendu.

Teraz workflow będzie inny. Commituję do ‚mastera‚ tak jak dotychczas. Mam przetestowaną wersję gotowa pójść na produkcję – przepnę się branchem ‚gh-pages‚ na właśnie ten „przetestowany commit”.

Web deploy, który jest na Webio jest bardzo wygodny ale niestety nie działa w pracy (poblokowane porty). Teraz ten problem odpadnie. Przepnę jeszcze tylko poddomenę (poniżej).

Własna domena

Można też podpiąć własną (pod)domenę – Using GitHub Pages To Host Your Website.

Prezentacje w HTML5

Gdy mam zrobić prezentację robię to właśnie w HTML5 na GitHubie i udostępniam poprzez ‚gh-pages‚. Przykład: http://kmorcinek.github.io/git-presentation/kod źródłowy. Można nawet użyć issue dostępnych dla repozytorium do zapisywania feedbacku który dostajemy po prezentacji.

git presentation in chrome html5

Git presentation in Chrome using HTML5

Reklamy
Ten wpis został opublikowany w kategorii Programowanie, Tip of the day i oznaczony tagami , , , , . Dodaj zakładkę do bezpośredniego odnośnika.