github pages Darmowa strona internetowa przy użyciu Githuba

Co potrzebujemy?

• Konto w serwisie Github - https://github.com

 

Etap I - Tworzenie repozytorium strony

Klikamy plusik obok naszego avataru   i wybieramy "New repository", aby utworzyć nowe repozytorium 

 

Nazywamy je dowolnie, ale nie może zawierać znaków polskich, spacji i dodajemy końcówkę github.io, więc nasza nazwa powinna wyglądać w taki sposób nasza_nazwa.github.io.

 

Wybieramy "Public", aby repozytorium było dostępne publicznie. (W przypadku posiadania weryfikacji edukacyjnej można dać Private, jeśli chcemy, aby repozytorium było prywatne. Więcej o weryfikacji tutaj https://education.github.com/pack)

 

Opcjonalnie można dodać opis repozytorium.

 

Zaznaczamy ptaszkiem, aby do repozytorium został dodany plik README.

 

Poniżej możemy wybrać licencję, ale nie musimy oraz możemy również później dodać licencję.

 

Przykład, tak wygląda to u mnie:

 

Na końcu klikamy przycisk, aby utworzyć repozytorium  

 

 

Etap II - wgrywanie plików

Po utworzeniu możemy dodać plik(i) naszej strony. Jest to możliwe na dwa sposoby.

 

Pierwszy sposób - z wykorzystaniem strony.

Wchodzimy na stronę z repozytorium i po prostu przesuwamy pliki. (Uwaga, ten sposób jest ograniczony do 100 plików jednocześnie.) 

Następnie klikamy zielony przycisk z napisem Commit changes.

 

Drugi sposób - z wykorzystaniem klienta Github Desktop.

Po zalogowaniu do klienta, przechodzimy do klonowania repozytorium lokalnie na komputer.

 

Wyświetli się nam lista naszych repozytorium, z listy wybieramy te, które jest naszą stroną i klikamy przycisk Clone.

 

Teraz możemy wyświetlić nasze pliki lokalnie i wprowadzić dowolne modyfikacje.

 

Program automatycznie wykryje, gdy dojdzie do modyfikacji repozytorium, aby dodać zmiany należy kliknąć Commit to master.

 

Etap III - zamiana ustawień, aby repozytorium było wyświetlane jako strona.

Gdy już to zrobimy przechodzimy do ustawień repozytorium.

 

Zjeżdżamy do sekcji Github Pages, zmieniamy "Source", czyli źródło

 

master branch, ustawienia automatycznie się zapiszą i strona się odświeży 

 

Adres naszej strony to w rzeczywistości subdomena, nazwa repozytorium, które ustawiliśmy.

 

Jak widać działa prawidłowo.

 

Etap VI - zmiana z subdomeny na domenę.

Wchodzimy ponownie w ustawienia, zjeżdżamy do sekcji Github Pages i wpisujemy nazwę domeny.

 

Dzięki DNS przekierowujemy naszą domenę rekordem CNAME na nazwę repozytorium, czyli w moim przypadku na wojciuu.github.io

 

Na przykładzie domeny przekierowanej przez Cloudflare

 

 

Kod strony może zawierać tylko HTML/CSS/JavaScript, nie odpalimy tutaj strony w np. PHP. Dzięki stronom na Githubie można również utworzyć Bloga czy stronę z dokumentacją, ale to w innym temacie.

Edytowane 7 czerwca 2020 przez Wojciu
Aktualizacja screenów z uploadem na serwer CDN.