Jak utworzyć stronę na GitHubie?

GitHub to narzędzie, które dla wielu programistów stało się podstawą pracy nad kodem. Niemniej jednak, jego funkcjonalności wykraczają poza tradycyjne repozytoria do zarządzania kodem. Jednym z ciekawszych zastosowań GitHub jest tworzenie prostych stron internetowych, które można wykorzystać na różne sposoby – od blogów, przez portfolio, po dokumentację. Jak więc skonfigurować repozytorium, dodać plik HTML i uruchomić stronę na GitHubie? Proces jest prostszy, niż się może wydawać, a oto jak krok po kroku to zrobić.

Po zalogowaniu się na swoje konto na GitHubie zobaczysz interfejs aplikacji, który może wydawać się przytłaczający. Zamiast się tym martwić, skup się na prostych czynnościach, które pozwolą ci rozpocząć pracę. Pierwszym krokiem będzie stworzenie repozytorium, w którym będzie przechowywana strona. Kliknij przycisk „Create repository” znajdujący się w lewym górnym rogu strony. Otworzy się strona, na której wystarczy wpisać nazwę repozytorium, np. „moonshot”. Pod nią znajdziesz opcję ustawienia prywatności repozytorium. Zostaw domyślną opcję „Public”, aby repozytorium było dostępne publicznie.

Aby dodać plik, kliknij link „uploading an existing file”. Na nowej stronie, którą zobaczysz, będziesz mógł przeciągnąć plik (lub kilka plików) z komputera i dodać je do swojego repozytorium. W tym przypadku stworzymy plik HTML – wystarczy, że zapiszesz plik o nazwie „index.html”, a potem załadujesz go do repozytorium. Plik HTML można stworzyć za pomocą dowolnego edytora tekstu – w systemie Windows sprawdzi się Notepad. Wystarczy, że wpiszesz następujący kod:

html
Copy code
Hello World

Kolejnym krokiem jest konfiguracja GitHub Pages, czyli platformy do hostowania stron internetowych. W tym celu wejdź do ustawień swojego repozytorium, klikając przycisk „Settings” na górze strony. Następnie w menu po lewej stronie wybierz „Pages”. GitHub Pages wymaga, by strona była hostowana z określonej „gałęzi” (branch). Chociaż w pracy z GitHub Pages nie musisz się zagłębiać w pełną funkcjonalność gałęzi, musisz wybrać gałąź, z której strona będzie publikowana. Zazwyczaj jest to gałąź „main”. Wybierz ją i zapisz zmiany, klikając „Save”.

Po zapisaniu tych ustawień Twoja strona jest już dostępna publicznie. Możesz ją odwiedzić pod adresem:

php-template
Copy code
https://<twoja_nazwa_uzytkownika>.github.io/<nazwa_repozytorium>

Teraz wystarczy, że odświeżysz stronę i zobaczysz swój plik HTML w przeglądarce.

Warto jednak wiedzieć, że GitHub Pages pozwala nie tylko na publikowanie prostych stron HTML. Można go również wykorzystać do zaawansowanych projektów, takich jak blogi oparte na statycznych generatorach stron (np. Jekyll). W takim przypadku proces publikacji wymaga nieco więcej konfiguracji, ale podstawy pozostają niezmienne. Zatem, korzystając z GitHub Pages, masz dostęp do potężnego narzędzia, które pozwala na szybkie i łatwe uruchomienie strony internetowej w środowisku GitHub.

Jak dodać galerię zdjęć do strony za pomocą Publii CMS i GitHub Pages?

Aby dodać obrazy do galerii w systemie zarządzania treścią Publii, należy wybrać zdjęcia, które zostały pobrane z folderu "Gallery" w folderze "Chapter 11" w repozytorium GitHub książki (https://github.com/Apress/Designing-Websites-with-Publii-and-GitHub-Pages). Po dokonaniu wyboru, kliknij przycisk „Otwórz” w oknie dialogowym. Obrazy zostaną przesłane do galerii, jak pokazano na Rysunku 12-4. Należy poczekać, aż proces przesyłania zostanie zakończony. Gdy wszystkie obrazy zostaną załadowane, okno „Wstaw/Edytuj Galerię” wyświetli je wraz z polami do wprowadzenia alternatywnego tekstu oraz podpisu do każdego obrazu, jak widać na Rysunku 12-5.

Zaleca się przypisanie alternatywnego tekstu dla każdego obrazu, gdy tylko jest to możliwe. Jest to dobra praktyka z perspektywy użyteczności, szczególnie dla osób z problemami ze wzrokiem, a także z punktu widzenia SEO, ponieważ poprawia ranking strony w wyszukiwarkach internetowych. Alternatywny tekst nie pojawi się w samej galerii, ale będzie dołączony do źródła strony. Podpis obrazu jest opcjonalny. Może on służyć do przypisania autorstwa zdjęcia, opisania obrazu lub obu tych funkcji. Na przykład, na Rysunku 12-6 skopiowano alternatywny tekst z pierwszego obrazu do podpisu, podczas gdy w przypadku drugiego obrazu podano autora fotografii. Trzeci obraz pozostawiono bez podpisu, aby użytkownicy mogli zobaczyć, które pole jest którym.

Na dole okna dialogowego „Wstaw/Edytuj Galerię” znajdują się opcje konfiguracji układu galerii. Domyślny układ to trzy kolumny, co jest dość odpowiednie, ale można go zmienić na wartości od 1 do 8. Opcja „Wyrównanie” określa szerokość galerii w porównaniu do szerokości zawartości strony. Jeśli wybierzesz „Brak” (domyślna opcja), galeria będzie miała tę samą szerokość co treść strony. Wybór opcji „Pełna szerokość” sprawi, że galeria rozciągnie się na całą szerokość strony z minimalnym marginesem. Opcja „Szeroka” to złoty środek pomiędzy dwoma powyższymi, która jest moim ulubionym ustawieniem galerii.

Warto zauważyć, że pierwsze trzy obrazy mają podpisy, podczas gdy pozostałe już nie. Podpisy są wyświetlane w specjalny sposób, gdy galeria zostanie opublikowana. Pojawią się one tylko wtedy, gdy kursor myszy najedzie na obraz, jak pokazano na Rysunku 12-9. Kliknięcie na obraz spowoduje jego powiększenie, a zdjęcie wypełni całą szerokość przeglądarki. Funkcje te są obsługiwane przez bibliotekę PhotoSwipe, która napędza galerię w tle.

Aby uzyskać taki efekt jak na Rysunku 12-9, kliknij w lewym górnym rogu edytora link „Podgląd”. Kiedy kursor najedzie na zdjęcie astronauty w skafandrze kosmicznym, pojawi się podpis, a kliknięcie na obraz spowoduje jego powiększenie. Na górze zdjęcia pojawią się kontrolki do przejścia na tryb pełnoekranowy, powiększenia zdjęcia oraz opcji jego udostępniania, jak pokazano na Rysunku 12-10.

Po stworzeniu strony galerii powinniśmy dodać link do niej w innych częściach strony, aby nasi czytelnicy mogli cieszyć się zawartością galerii. Jeśli pamiętasz, mieliśmy już taki link w sekcji „Vacation in Space” na stronie głównej. Po zapisaniu pracy, kliknij link „< Strony” w lewym górnym rogu edytora, aby powrócić do listy stron. Następnie otwórz stronę „Vacation in Space”, klikając jej tytuł. Przewiń w dół, aż dotrzesz do wbudowanego „menu”, które wygląda jak na Rysunku 12-11. Kliknij link „Galeria zdjęć”, aby edytować ten link. W oknie dialogowym „Wstaw/Edytuj link” zmień typ linku na „Link do strony”. Z rozwijanego menu „Nazwa strony” wybierz stronę o nazwie „SpaceB Gallery”, jak pokazano na Rysunku 12-12. Oczywiście nazwa strony galerii może się różnić w Twoim projekcie, jeśli nie podążasz dokładnie za książką, więc dokonaj odpowiednich zmian. Po kliknięciu przycisku „OK” zatwierdź zmiany i nie zapomnij zapisać strony.

Po powrocie do listy stron kliknij przycisk „Podgląd zmian” w dolnej części głównego menu Publii CMS, aby zobaczyć nową galerię w akcji.

W przypadku chęci stworzenia strony kontaktowej, warto pamiętać, że sama strona z formularzem kontaktowym, bez potrzeby używania zewnętrznych narzędzi pocztowych, może zwiększyć profesjonalizm witryny. Kontakt bezpośrednio z poziomu strony zapewnia większą spójność i zatrzymuje użytkowników na stronie, co jest istotne z punktu widzenia UX. Jednak należy mieć na uwadze, że Publii nie obsługuje natywnie przetwarzania formularzy kontaktowych. Choć system dodaje integracje z niektórymi zewnętrznymi usługami, takie jak systemy komentowania, kontaktowanie się przez formularz wymaga wsparcia zewnętrznych procesorów danych.