Jak opublikować stronę internetową na GitHub pages? – krok po kroku

GitHub pages umożliwa opublikowanie strony internetowej zupełnie za darmo. To bardzo przydatna funkcja, gdy uczymy się tworzyć strony www, gdy chcemy efekt udostępnić, mieć w jednym miejscu kod i podgląd, ale nie tylko. Na GitHub pages postawimy swoje portfolio czy prostego bloga i nie potrzebujemy do tego potrzebujemy własnej domeny, ani serwera.

Potrzebujesz:

  • 10 minut
  • projektu strony www, którą chcesz opublikować (możesz pobrać przykładowy projekt)
  • konto na GitHubie i podstawową znajomość Git’a

Jeśli jeszcze nie masz projektu na GitHubie to odsyłam Cię do wpisu Git i GitHub dla zielonych – tworzymy pierwsze repozytorium gdzie dowiesz się czym jest Git, jak stworzyć konto na GitHubie i dodać pierwszy projekt.

Czym jest GitHub Pages?

GitHub Pages to statyczna usługa hostingowa.

Służy do udostępniania stron osobistych, organizacji lub innych projektów bezpośrednio z repozytorium GitHub. Ponadto GitHub Pages umożliwia rozszerzenie statycznej strony i publikację treści (np. bloga) za pomocą Jekyll’a (tutorial z publikacją takiego bloga będzie innym razem).

Najważniejsza informacja, która kryje się pod stwierdzeniem, że jest to statyczna usługa hostingowa, to fakt, że GitHub Pages nie obsługuje kodu wykonywanego po stronie serwera. Słowem nie uruchomimy back-endu aplikacji w językach takich jak PHP, Ruby lub Python. GitHub Pages pozwala na publikowanie plików HTML, CSS i JavaScript – których kod wykonywany jest po stronie przeglądarki.

Publikowanie strony www na GitHub Pages?

1. Utwórz repozytorium z projektem

Lub wybierz istniejące repozytorium.

2. Wejdź w ustawienia repozytorium

Ustawienia repozytorium są w górnej zakładce po prawej stronie.

3. Przewiń na dół do sekcji GitHub Pages

Sekcja zawiera krótki opis oraz dwa punkty – źródło oraz wybór szablonu. Wybieramy źródło.

GitHub Pages - sekcja

4. Wybierz Source – master branch

Jeśli w twoim repozytorium istnieje więcej gałęzi / branch’y, na których pracujecie można wybrać inną gałąź niż główna – master. Jednak aktualna, najlepsza, przetestowana wersja projektu powinna zawsze znajdować się na masterze i tę chcemy opublikować.

5. Zapisz zamiany

Kliknij przycisk SAVE. Nie zmieniaj nic w szablonie 🙂

Po odświeżeniu zobaczysz swój adres strony, w moim wypadku jest to: ritaly.github.io/test-repo można równieżz jako ritaly.github.io/test-repo/index.html (ponieważ w repozytorium mam tylko jeden plik .html, nie muszę tego podawać w ścieżce. Jeśli w waszym repo znajduje się strona główna oraz podstrony pamiętajcie, by używać drugiego zapisu.

6. Twoja strona została opublikowana! 👏

Jeśli teraz dokonacie zmian w projekcie, będą także widoczne na waszej stronie www.
Drobna uwaga – zmiany w css czy js odświeżają się z małym opóźnieniem w stosunku do aktualizacji kodu.

Więcej o publikowaniu stron znajdziecie w oficjalnej dokumentacji.