Ostatnio dość długo poszukiwałem dobrego miejsca do uruchamiania moich drobnych projektów. Myślałem o różnego rodzaju hostingach potrafiących udostępniać strony www. Rozważałem między innymi takie możliwości jak hosting dla .NET, chmura dla różnych technologii np. Node. Jednak najbardziej interesujące okazało się najprostsze rozwiązanie. Znalazłem możliwość, aby GitHub hostował moje pliki. Jest to usługa GitHubPages. Co więcej jest ona dostępna za darmo.

Co to jest GitHub Pages

GitHub Pages pozwala hostować statyczne pliki w dwóch opcjach: dla profilu użytkownika i dla konkretnego projektu. W założeniu GitHub Pages umożliwia tworzenia wizytówek projektów umieszczonych na platformie GitHub, jednak zakres tej funkcjonalności jest znacznie szerszy. Zakładając, że część serwerową aplikacji mamy osadzoną w innym miejscu (ponieważ często wymaga ona bazy danych lub infrastruktury aplikacyjnej), cały front-end możemy umieścić na GitHub Pages. Co więcej, jest to sposób na szybkie udostępnienie projektu i aktualizowania go. Dzięki temu możemy często prezentować zmiany docelowym użytkownikom. Dodatkowym plusem jest prostota i możliwość trzymania wszystkiego w jednym miejscu. Nie jest to rozwiązanie dobre dla dużych serwisów, dlatego też polecam je głównie do testowania swoich stron lub przechowywania małych aplikacji.

Rozwiązanie to nie jest niestety do końca darmowe. Możemy się zdecydować na płatną wersję GitHub pozwalającą na przechowywanie prywatnych repozytoriów lub otworzyć kod swojej aplikacji, by w ten sposób korzystać z tej funkcjonalności za darmo.

Jak to działa?

Zamieszenie swojej strony na GitHub Pages polega na stworzeniu brancha o nazwie gh-pages dla swojego repozytorium. Można to zrobić używając automatycznego generatora https://pages.github.com/, ale w naszym przypadku będziemy chcieli zamieścić swoje pliki. Pliki z tego brancha zostaną wyświetlone pod adresem http://username.github.io/repository_name

Kroki do zdeployowania projektu

1. Przyjmijmy, że nasza gotowa strona znajduje się w katalogu dist
2. Dodajemy nasz katalog do repozytorium

   git add dist && git commit -m "Initial dist subtree commit"
   

3. Następnie pushujemy katalog do brancha gh-pages

   git subtree push --prefix dist origin gh-pages
   

Dokładniejszy opis kroków można znaleźć w https://gist.github.com/cobyism/4730490

Automatyzacja za pomocą gulp

Te operacje można bardzo łatwo włączyć na nasz workflow zarządzania projektem za pomocą gulp. Wystarczy jedynie skorzystać z gotowego komponentu https://github.com/shinnn/gulp-gh-pages

Można go skonfigurować używając następującego taska w gulp

var gulp        = require('gulp');
var deploy      = require('gulp-gh-pages');

/**
 * Push build to gh-pages
 */
gulp.task('deploy', function () {
  return gulp.src("./dist/**/*")
    .pipe(deploy())
});

W czasie uruchomienia tego zadania za pomocą komendy gulp deploy może się pojawić błąd autoryzacji. Jest on związany z problemem użycia SSL dla GitHub w Windows. Aby temu zaradzić musimy zainstalować aplikację Git Credential Manager for Windows, która umożliwia autoryzację w ten sposób.

Źródła:

http://charliegleason.com/articles/deploying-to-github-pages-with-gulp