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