Darmowy hosting GitHub – jak stworzyć stronę w GitHub Pages?

W tym artykule pokażę jak początkujący programista może założyć w pełni profesjonalną stronę internetową w darmowej usłudze GitHub Pages. GitHub to serwis hostingowy dla projektów programistycznych, w których wykorzystano system kontroli wersji Git.

Przyjazny interfejs witryny GitHub.com pozwala bez korzystania z Gita wklejać kod do stworzonych projektów wprost z przeglądarki internetowej i w tym artykule wykorzystam to podejście aby ominąć poznawanie tego jak działa system kontroli wersji Git. Jeżeli korzystasz z Gita w terminalu lub w aplikacji GitHub Desktop to oczywiście plus dla Ciebie i masz dodatkowe ułatwienie.

Taka fraza jak darmowy hosting w 2021 roku brzmi zbyt pięknie by było prawdziwe a jednak jest prawdziwe. GitHub Pages za darmo oferuje super szybkie serwowanie plików, certyfikat SSL i możliwość podłączenia własnej domeny bez reklam.

Krok 1: Tworzenie repozytorium GitHub

Załóżmy że nic nie wiemy o systemie Git i dodatkowo jest to nasz pierwszy kontakt z serwisem GitHub. Tworzymy własne konto a następnie tworzymy repozytorium czyli taki jakby główny folder naszego projektu, który będzie przechowywał wszystkie pliki związane ze strona.

Wchodzimy na link: https://github.com/new i wypełniamy szczegóły projketu:

Krok 2: Tworzenie pliku index.html

W następnym kroku GitHub zaproponuje nam stworzenie nowego pliku lub upload istniejącego. Poniżej mamy instrukcję jak to wykonać w terminalu. To może być przydatne jeżeli przy okazji chcemy się nauczyć podstaw Gita:

Struktura plików jest jasna, w przypadku tworzenia nowego pliku jest to lokalizacja:

github.com/nazwa_konta/nazwa_projektu/new/main

Nad edytorem wpiszę nazwę pliku index.htrml a zawartością będzie na razie Hello World!. Po wszystkim commitujemy czyli zapisujemy plik w repozytorium Może tutaj być oczywiście dowolny kod HTML wraz z odnośnikami, do plików które, wpiszemy odręcznie, załadujemy plik lub dodamy za pomocą Gita. Służy do tego zielony przycisk Commit new file na samym dole.

Krok 3: Zakładanie strony GitHubPages

Aby założyć stronę w GitHub Pages klikamy w ustawienia:

W zakładce wybieramy Pages i ustawiamy z którego folderu mają się zaciągać pliki.

Dla mnie będzie to branch main i root, czyli główny katalog projektu.

Wyskoczy nam adres strony: https://mansfeldpl.github.io/strona/. Jak widać nasza strona jest opublikowana. Nie przysłaniają ją żadne reklamy i działa ona super szybko na serwerach GitHub.

Krok 4: Dodawanie własnej domeny w GitHub Pages

Jedyne co nam się może nie podobać to adres pod jakim dostępna jest nasza strona. Na szczęście w GitHub Pages możemy dodać własną domenę. W poprzednim kroku wystarczyło ją wpisać w pustym polu Custom Domain:

Po zapisaniu, otrzymamy ostrzeżenie, że domena nie wskazuje na serwer GitHub.

Na stronie https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain

Widzimy adresy IP jakie trzeba ustawić dla naszej domeny. Aktualnie jest to:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Wystarczy dodać jeden adres ale skoro za darmo możemy skorzystać z roud-robin to czemu nie dodać wszystkich. Standardowo, te adresy powinna mieć domena główna i subdomena www, chyba że chcemy to rozwiązać inaczej. W miejscu gdzie utrzymujemy strefę DNS (na obecnym hostingu lub u rejestratora domeny) dodajemy rekordy A jeden po drugim:

W ustawieniach GitHub możemy wymusić przekierowanie na SSL. Po kilku godzinach, kiedy nasza domena będzie wskazywać na serwery GitHub, strona znajdująca się w repozytorium będzie normalnie funkcjonować.

Podsumowanie

Darmowy hosting to świetna opcja dla własnych projektów i nauki prowadzenia strony internetowej. Pisanie stron, które nigdy nie opuszczają naszego komputera lub korzystanie z różnego rodzaju PageBuilderów nie daje takiej satysfakcji jak publikacja własnego kodu HTML/CSS/JS w Internecie. GitHub Pages to też świetny trening dla wszystkich którzy chcą się oswoić z GitHubem i samym systemem kontroli wersji Git. Szybką publikację konkretnych treści mogą ułatwiać gotowe szablony w GitHub Pages.

Darmowy hosting udostępniany kilkanaście lat temu przez liczne firmy hostingowe odegrały kluczową rolę w mojej nauce tworzenia stron. Odkąd pamiętam, wszelkie zadania domowe związane z technologiami WWW oddawałem w formie funkcjonującego adresu URL za co oczywiście otrzymywałem lepsze oceny 🙂 Zdobywanie pierwszego ruchu organicznego przez strony, które publikowałem w formie hobby lub dla żartów jako nastolatek ostatecznie popchnęły mnie w specjalizację WWW i obecną pracę. Od czegoś trzeba zacząć i jeżeli nie mamy dostępu do serwera WWW polecam usługę GitHub Pages.

Źródła:

• https://pages.github.com/