Pierwsze kroki z GitHub Pages: Praktyczne wprowadzenie
Github Pages to prosty, ale potężny narzędzie, które pozwala na tworzenie i hostowanie stron internetowych bezpośrednio z repozytorium Github. Czy jesteś developerem chcącym pokazać swój projekt, czy blogerem chcącym podzielić się swoją wiedzą - Github Pages jest dla Ciebie. Ten artykuł pomoże Ci w pierwszych krokach z tym serwisem.
CEO
16 lut 2025
Rozpoczynając swoją przygodę z GitHub Pages, warto zrozumieć podstawy tej usługi. GitHub Pages to darmowe narzędzie dostarczane przez GitHub, które umożliwia tworzenie i publikowanie stron internetowych bezpośrednio z repozytoriów na platformie GitHub. Jest ono idealne dla użytkowników, którzy chcą stworzyć portfolio, stronę projektu, dokumentację techniczną czy nawet bloga. GitHub Pages obsługuje język znaczników Markdown, co czyni pisanie zawartości strony bardzo prostym. Dodatkową zaletą jest łatwa integracja z systemem kontroli wersji Git, co ułatwia zarządzanie i aktualizację zawartości strony. To doskonałe rozwiązanie zarówno dla początkujących, jak i zaawansowanych programistów, którzy chcą wykorzystać swoje umiejętności kodowania do tworzenia niestandardowych stron internetowych.
Powiązane case studies
Marketplace premium kosmetyków na 9 rynkach europejskich - Shopify Plus
Klient: Baza Cosmetics
Platforma edukacyjna generująca materiały do nauki programowania z ChatGPT
Klient: Klient (Aplikacja webowa do nauki programowania)
Branża: Edukacja / EdTech
Jak zacząć? Tworzenie pierwszego repozytorium na GitHub
Zacząć pracę z GitHub Pages możemy poprzez stworzenie naszego pierwszego repozytorium. Poza podstawowymi funkcjami jak kontrola wersji czy możliwość pracy zdalnej, GitHub oferuje funkcję GitHub Pages, którą można wykorzystać do stworzenia strony internetowej dla naszego projektu. Aby to zrobić, pierwszym krokiem jest zalogowanie się do GitHuba i przejście do zakładki 'Repositories'. Następnie, klikamy zielony przycisk 'New'. Prawidłowo nazywamy nasze repozytorium, by łatwo nam było później je zidentyfikować - ważne jest, aby nazwa była unikalna. Dla GitHub Pages ważne jest, aby nazwa repozytorium kończyła się na '.github.io'. Po utworzeniu repozytorium, można przystąpić do tworzenia treści strony poprzez dodawanie plików HTML, CSS i JavaScript.
Dodawanie plików do repozytorium
Po utworzeniu repozytorium na GitHubie kolejnym krokiem jest dodanie do niego plików, które będą stanowić treść strony internetowej. Najważniejszym plikiem w repozytorium jest index.html, ponieważ to on odpowiada za stronę główną serwisu. Można także dodać inne pliki, takie jak arkusze stylów CSS, obrazy, pliki JavaScript czy dodatkowe podstrony w formacie HTML.
Dodawanie plików do repozytorium można wykonać na kilka sposobów. Najprostsza metoda to przesłanie plików bezpośrednio przez interfejs GitHuba. Wystarczy wejść do repozytorium, wybrać opcję przesyłania plików i dodać potrzebne elementy. Drugą opcją jest użycie narzędzia Git na komputerze, co pozwala na łatwiejsze zarządzanie większą liczbą plików i szybkie aktualizacje.
Ważnym krokiem po dodaniu plików jest zapisanie zmian, czyli wykonanie tzw. commitów. Każdy commit powinien zawierać krótki opis zmian, aby ułatwić śledzenie historii edycji projektu. Po zapisaniu zmian konieczne jest ich przesłanie do repozytorium (push), aby stały się dostępne online.
Aktywowanie GitHub Pages
Aby uruchomić stronę internetową za pomocą GitHub Pages, konieczne jest włączenie tej funkcji w ustawieniach repozytorium. GitHub oferuje możliwość publikowania stron bezpośrednio z określonej gałęzi repozytorium, najczęściej main lub gh-pages.
Aktywacja GitHub Pages odbywa się poprzez sekcję ustawień repozytorium. Wystarczy przejść do zakładki „Pages”, a następnie wybrać źródło plików, z którego strona ma być generowana. Po zapisaniu ustawień GitHub automatycznie przetworzy repozytorium i wygeneruje stronę pod dedykowanym adresem URL.
Proces wdrażania strony może potrwać kilka minut. Po zakończeniu GitHub informuje o sukcesie poprzez komunikat potwierdzający, a użytkownik może od razu przejść do podanego linku, aby zobaczyć swoją stronę w działaniu.
Dostęp do strony i personalizacja adresu URL
Po aktywowaniu GitHub Pages strona otrzymuje automatyczny adres w formacie https://nazwa-uzytkownika.github.io/nazwa-repozytorium/. Jeśli repozytorium jest nazwane nazwa-uzytkownika.github.io, wtedy strona będzie dostępna bez dodatkowej ścieżki, co może być przydatne przy tworzeniu stron osobistych lub portfolio.
GitHub Pages pozwala również na personalizację adresu poprzez podpięcie własnej domeny. Można to zrobić, konfigurując ustawienia DNS w panelu dostawcy domeny i dodając odpowiedni rekord CNAME w repozytorium. Dzięki temu strona będzie dostępna pod unikalnym adresem, co wygląda bardziej profesjonalnie i ułatwia zapamiętanie URL.
Po skonfigurowaniu niestandardowej domeny warto także aktywować certyfikat SSL, co zapewnia bezpieczne połączenie HTTPS. GitHub Pages oferuje automatyczne certyfikaty SSL, które można włączyć jednym kliknięciem w ustawieniach strony. Dzięki temu użytkownicy mogą bezpiecznie przeglądać stronę bez ostrzeżeń przeglądarki o braku szyfrowania.
FAQ
FAQ – najczęstsze pytania dotyczące GitHub Pages
GitHub Pages to darmowa usługa hostingu statycznych stron internetowych dostarczana przez GitHub. Pozwala publikować strony bezpośrednio z repozytorium kodu — wystarczy dodać pliki HTML, CSS i JavaScript, włączyć Pages w ustawieniach repo i otrzymujesz działający adres URL. Idealna dla portfolio programistycznych, stron dokumentacji technicznej, blogów (z Markdown), stron projektów open source oraz prostych landing pages. Obsługuje też frameworki statyczne typu Jekyll, Hugo, Gatsby (wymagają konfiguracji CI).
Tak, w pełni darmowy. Standardowe limity: 1 GB rozmiaru repozytorium, 100 GB transferu miesięcznie, do 10 buildów na godzinę. Te limity są wystarczające dla większości stron portfolio, dokumentacji i bloga. Płatne plany GitHub Pro/Team nie zmieniają tych limitów — Pages pozostaje darmowy. Jedyny koszt to opcjonalny — własna domena, którą trzeba wykupić u rejestratora (~30-50 PLN/rok dla `.pl`, `.com`).
**1.** Zaloguj się na GitHub i utwórz nowe repozytorium — jeśli ma być stroną osobistą, nazwij je `nazwa-uzytkownika.github.io`. **2.** Dodaj do repo plik `index.html` (i opcjonalnie CSS, JS, obrazy) — przez interfejs GitHub lub git push. **3.** Wejdź w ustawienia repozytorium → zakładka **Pages** → wybierz gałąź źródłową (typowo `main`). **4.** Zapisz — po kilku minutach GitHub potwierdzi, że strona jest dostępna pod adresem `https://nazwa.github.io/repo/`. Aktualizacje robisz przez push do repo.
Tak. W ustawieniach Pages podaj swoją domenę (np. `mojadomena.pl`), a w panelu rejestratora dodaj rekord DNS — albo `CNAME` wskazujący na `nazwa.github.io`, albo `A` z czterema IP GitHuba (185.199.108.153 i kolejne). GitHub doda do repozytorium plik `CNAME` z nazwą domeny. Po propagacji DNS (typowo 1-24 godziny) strona dostępna jest pod własną domeną. To stała, bezpłatna funkcja — nie wymaga żadnego płatnego planu.
Tak, automatycznie i bezpłatnie. Dla domen `*.github.io` HTTPS jest aktywny od razu — bez konfiguracji. Dla własnych domen GitHub generuje darmowy certyfikat SSL przez Let's Encrypt — wystarczy zaznaczyć checkbox „Enforce HTTPS” w ustawieniach Pages po skonfigurowaniu DNS. Certyfikat odnawia się automatycznie. To eliminuje ostrzeżenia przeglądarek o niezabezpieczonym połączeniu i jest standardowym wymogiem dla nowoczesnych stron — w tym pod kątem SEO (Google traktuje HTTPS jako sygnał rankingowy).
Blog
Powiązane artykuły
Front-end
SvelteKit: Narzędzie do Tworzenia Aplikacji Bazujących na Frameworku Svelte
Architektura aplikacji webowych nieustannie ewoluuje, wprowadzając nowe technologie. Jednym z najnowszych graczy na tym polu jest SvelteKit - narzędzie służące do budowania aplikacji internetowych, które bazują na lekkim i wydajnym frameworku Svelte. Czy SvelteKit ma szansę przewyższyć swoje konkurencyjne frameworki i zrewolucjonizować sposób, w jaki tworzymy aplikacje internetowe? Przekonajmy się!
Tomasz Kozon
18 mar 2024
Front-end
Fetch w JavaScript: Jak to działa?
Fetch to uniwersalna metoda zgłaszania żądań sieciowych, z której korzystają programiści JavaScript. W dzisiejszym artykule omówimy ideę stojącą za tą funkcją, przedstawimy praktyczne przykłady i zasady jej działania. Dowiesz się, jak efektywnie wykorzystać fetch do tworzenia interaktywnych aplikacji internetowych.
Tomasz Kozon
05 gru 2023
Front-end
Vanilla JS: Czym jest i jak to działa?
Vanilla JS to nazwa dla czystego, niezmodyfikowanego języka JavaScript - podstawowego narzędzia każdego developera. W kontekście pełnego zrozumienia struktury stron i aplikacji internetowych, kluczowe jest zrozumienie działania Vanilla JS. Rozwiewając mity, obalamy popularne wnioski o jego złożoności oraz wskazujemy na jego praktyczne zastosowania.
Tomasz Kozon
02 lis 2023
Front-end
AJAX - co to jest AJAX i jak działa?
AJAX, czyli Asynchronous JavaScript and XML. Jest to technologia, która umożliwia przetwarzanie danych na stronie internetowej bez konieczności przeładowania całej strony. AJAX umożliwia szybsze ładowanie stron internetowych, interaktywność interfejsu użytkownika i efektywniejsze przetwarzanie danych.
Tomasz Kozon
20 sty 2023
Front-end
htmx – prosta droga do dynamicznych aplikacji bez frameworków
Dynamiczne aplikacje webowe kojarzą się zazwyczaj z rozbudowanymi frameworkami front-endowymi, które wymagają sporej wiedzy i skomplikowanej konfiguracji. Tymczasem istnieje prostsza droga – htmx, biblioteka pozwalająca tworzyć interaktywne interfejsy niemal wyłącznie przy użyciu HTML. Dzięki niej można uniknąć pisania dużej ilości kodu JavaScript i w naturalny sposób połączyć front-end z backendem.
Tomasz Kozon
02 wrz 2025
Front-end
Single-page application - co to jest i czy jest warte uwagi?
Single-page application (SPA) to rodzaj aplikacji internetowej, która wykorzystuje jeden plik, aby zapewnić użytkownikom interaktywność i natychmiastową zmianę treści bez konieczności przeładowywania całej strony. SPA jest coraz popularniejsze ze względu na swoją prostotę, szybkość i użyteczność.
Tomasz Kozon
11 sie 2022