Gotowe, gotowe, uruchom: tworzenie statycznej witryny za pomocą GitHub Pages

Przy wszystkich obecnych gorących narzędziach i frameworkach do tworzenia stron internetowych tworzenie strony internetowej staje się coraz bardziej skomplikowane. Ale czasami nie potrzebujesz dużej interaktywności w swojej witrynie. Jeśli koncentrujesz się na dostarczaniu informacji do przeglądarki i nie potrzebujesz skomplikowanych funkcji, witryna statyczna może być właściwym wyborem.

W tym samouczku dowiesz się, czym jest witryna statyczna, jakie są jej zalety i ograniczenia oraz jak utworzyć i wdrożyć prostą osobistą witrynę internetową utworzoną za pomocą HTML i Bootstrap za darmo przy użyciu GitHub Pages.

Czym są strony GitHub?

GitHub to internetowa platforma do hostowania repozytoriów Git i współpracy przy projektach oprogramowania. Oferuje narzędzia do udostępniania i śledzenia zmian w kodzie, zarządzania i przeglądania kodu oraz możliwość otwierania i przeglądania żądań ściągnięcia.

Nie myl Gita z GitHubem! GitHub to usługa hostingowa, która umożliwia współpracę między programistami, podczas gdy Git to lokalne oprogramowanie do kontroli wersji, którego używasz do zapisywania migawek stanu twojego projektu oprogramowania.

GitHub Pages to jedna z najlepszych funkcji GitHub. Jest to usługa, która pozwala hostować statyczną stronę internetową bezpośrednio z repozytorium GitHub. Oznacza to, że możesz używać swojego repozytorium do przechowywania kodu i plików swojej witryny, a GitHub automatycznie opublikuje je jako witrynę internetową, do której masz dostęp online.

Podsumowując, GitHub Pages to szybki i łatwy sposób na uruchomienie witryny i jest szczególnie przydatny do prezentowania portfolio, projektów typu open source lub innych treści statycznych.

Strony statyczne a dynamiczne

Jak widzieliśmy, GitHub Pages umożliwia wdrażanie statycznych witryn internetowych. Ale jaka jest różnica między statyczną stroną internetową a dynamiczną stroną internetową?

Zacznijmy od omówienia zawartości wspomnianych witryn.

Treść statyczna odnosi się do elementów serwisu, które pozostają takie same dla wszystkich użytkowników, niezależnie od tego, kim są i jakie działania podejmują w serwisie. Może to obejmować tekst, obrazy i układ witryny, a także podstawowy kod i pliki, z których składa się witryna. Witryna statyczna jest dostarczana użytkownikowi dokładnie w takiej postaci, w jakiej jest przechowywana.

Natomiast zawartość dynamiczna to treść, która zmienia się w zależności od działań użytkownika — takich jak logowanie, interakcja z paywallem lub komentowanie posta — lub innych czynników, takich jak bieżąca godzina lub lokalizacja.

Na przykład witryna wyświetlająca nieruchomy obraz produktu będzie zawsze wyświetlać ten sam obraz każdemu użytkownikowi (statyczny). Z drugiej strony witryna, która wyświetla aktualny czas, pokaże inny czas każdemu użytkownikowi w zależności od jego lokalizacji (dynamicznie).

Ogólnie rzecz biorąc, można powiedzieć, że strona internetowa jest statyczna, jeśli zawiera tylko HTML, CSS i JavaScript na interfejsie, bez technologii serwerowych, takich jak PHP lub Python, które współdziałają z bazą danych.

Chociaż nie jest możliwe tworzenie dynamicznych stron internetowych za pomocą GitHub Pages, możesz łatwo tworzyć własne za pomocą CMS, takiego jak WordPress, lub statycznych generatorów witryn, takich jak Gatsby lub Hugo.

Kluczowe funkcje stron GitHub

Zobaczmy mocne strony GitHub Pages jako usługi hostingowej:

1. Łatwa konfiguracja i publikowanie: GitHub Pages ułatwia rozpoczęcie pracy w kilku prostych krokach. Możesz włączyć GitHub Pages dla swojego repozytorium i określić źródło plików swojej witryny, a GitHub automatycznie opublikuje Twoją witrynę i udostępni ją pod adresem URL na podstawie Twojej nazwy użytkownika i nazwy repozytorium.
2. Domeny niestandardowe: Dzięki GitHub Pages możesz użyć niestandardowej nazwy domeny dla swojej witryny zamiast domyślnego adresu URL dostarczonego przez GitHub. Pozwala to na wykorzystanie własnego brandingu i ułatwienie użytkownikom znalezienia i uzyskania dostępu do Twojej witryny.
3. Obsługa HTTPS: GitHub Pages oferuje obsługę HTTPS, która umożliwia bezpieczne połączenia z Twoją witryną. Ma to kluczowe znaczenie dla budowania zaufania do Twojej witryny.
4. Obsługa Jekyll: GitHub Pages obsługuje Jekyll, statyczny generator witryn, który umożliwia tworzenie zaawansowanych witryn internetowych przy użyciu szablonów i innych funkcji. Ułatwia to tworzenie profesjonalnie wyglądających stron internetowych bez konieczności pisania całego kodu od zera.

Ograniczenia

Jak wspomniano wcześniej, możesz tworzyć witryny statyczne tylko za pomocą GitHub Pages. Jeśli chcesz zbudować złożony projekt z wieloma funkcjonalnościami, potrzebujesz innych usług hostingowych. Należy również pamiętać, że nie można używać GitHub Pages do celów komercyjnych, takich jak prowadzenie biznesu online lub e-commerce.

GitHub Pages nie pozwala, aby Twoja witryna była większa niż 1 GB, co oznacza, że ​​pliki Twojego repozytorium nie mogą przekroczyć tej ilości pamięci. W większości przypadków 1 GB to więcej niż wystarcza na statyczną witrynę; pamiętaj tylko, aby skompresować swoje obrazy.

Ma również miękki limit przepustowości wynoszący 100 GB miesięcznie. Ta przepustowość wystarczyłaby do rozpowszechnienia Twojej witryny wśród kilku tysięcy osób miesięcznie, więc jeśli nie masz ogromnej publiczności, możesz zacząć.

Tworzenie i wdrażanie za pomocą stron GitHub: przewodnik krok po kroku

Tworzenie strony GitHub to prosty i bezpośredni proces hostowania witryny statycznej. Pamiętaj, że jeśli potrzebujesz jakiegoś połączenia z bazą danych, powinieneś mieć zewnętrznego dostawcę bazy danych.

W poniższym przewodniku dowiesz się, jak utworzyć stronę GitHub od podstaw. Obejmuje to utworzenie zdalnego repozytorium, zbudowanie responsywnej osobistej witryny internetowej za pomocą HTML i wdrożenie w Internecie za pomocą GitHub.

Wejdźmy w to!

1. Zarejestruj się na GitHubie

Aby rozpocząć, musisz mieć aktywne konto GitHub. Jeśli go nie masz, przejdź do ich strony rejestracji. Wypełnienie formularza nie powinno zająć więcej niż kilka minut.

Po zalogowaniu powinno być możliwe utworzenie zdalnego repozytorium.

2. Utwórz zdalne repozytorium

Repozytorium to katalog, w którym przechowujesz cały kod związany z konkretnym projektem.

Na stronie głównej GitHub kliknij przycisk „Nowy” lub „Utwórz repozytorium” znajdujący się w lewym panelu witryny. Spowoduje to przekierowanie do formularza, w którym podasz informacje o swoim repozytorium.

Te kolejne kroki są kluczowe:

1. Ustaw nazwę swojego repozytorium na "yourusername".github.io .
2. Sprawdź przycisk publiczny. Aby opublikować witrynę, musisz ustawić repozytorium jako publiczne .
3. Dodaj plik README.

Repozytorium możesz mieć tylko dla danego konta osobistego lub organizacji. Dlatego nazwa repozytorium to twoja nazwa użytkownika i domena github.io . Później zobaczymy, jak skonfigurować witrynę z repozytorium.

Jeśli nie masz GitHub Pro, możesz opublikować stronę GitHub tylko wtedy, gdy repozytorium jest publiczne. Pamiętaj o tym, jeśli nie chcesz publicznie udostępniać kodu źródłowego swojej witryny.

Po tym powinieneś mieć coś takiego:

Jeśli masz już działający kod źródłowy swojej witryny, możesz pominąć typowy przepływ pracy Git i zamiast tego upuścić pliki bezpośrednio do repozytorium.

Aby to zrobić, kliknij menu Add file w swoim repozytorium i wybierz opcję Prześlij pliki . Następnie wybierz pliki swojej witryny, z głównym plikiem HTML o nazwie index.html . Pamiętaj, aby umieścić wszystkie swoje pliki CSS i JavaScript również w repozytorium.

Na koniec naciśnij przycisk Zatwierdź zmiany .

W poniższej sekcji zbudujemy prostą osobistą witrynę internetową za pomocą HTML i Bootstrap. Następnie prześlemy go do usługi GitHub i skonfigurujemy jako publiczną stronę usługi GitHub z domeną niestandardową.

3. Zbuduj osobistą witrynę

Zaczniemy od sklonowania właśnie utworzonego repozytorium GitHub. Aby to zrobić, upewnij się, że masz już zainstalowanego klienta Git na swoim komputerze. (Jeśli nie, zapoznaj się z naszym samouczkiem dotyczącym usług Git i GitHub).

Przejdź do zakładki code swojego repozytorium i skopiuj adres URL SSH w opcji SHH .

Następnie uruchom terminal lub wiersz poleceń. W większości dystrybucji Linuksa i macOS możesz użyć skrótu Ctrl + Alt + T lub przejrzeć menu aplikacji systemu w poszukiwaniu Terminala . W systemie Windows możesz używać Git BASH zainstalowanego domyślnie z Git, CMD, PowerShell lub klientem GUI.

W terminalu wpisz git clone i skopiowany adres URL. Spowoduje to pobranie i utworzenie kopii zdalnego repozytorium na komputerze lokalnym, dzięki czemu będziesz mógł zbudować swoją witrynę internetową.

Następnie wejdź do nowego folderu o nazwie yourusername.github.io z cd i ls . Powinieneś zobaczyć folder .git , który zawiera konfigurację i metadane twojego projektu, a także plik README.md , jeśli go utworzyłeś.

Otwórz swój ulubiony edytor tekstu (taki jak Sublime Text) i zacznijmy tworzyć Twoją stronę internetową.

W katalogu głównym repozytorium utwórz plik o nazwie index.html (nazwa ta jest wymagana przez GitHub Pages) i wpisz typową strukturę kodu HTML:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kinsta User</title> </head> <body> </body> </html>

Jak powiedzieliśmy wcześniej, będziemy używać Bootstrap 5.0, otwartego frameworka CSS, który pomaga nam łatwiej tworzyć responsywne strony internetowe. Jak zobaczysz, nie będziemy musieli używać niestandardowego CSS dla tej konkretnej witryny.

Aby umieścić Bootstrap na naszej stronie, musimy dołączyć skompilowany CSS i JavaScript za pośrednictwem CDN. Wklej następujący kod wewnątrz HTML <head> , aby móc korzystać z Bootstrap CSS:

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

W ten sam sposób dołączymy również Devicon CDN, aby móc bez większych problemów używać ikon SVG popularnych języków programowania i technologii:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">

Teraz, aby dołączyć JavaScript, wstaw następujący kod tuż nad końcem tagu </body> :

 <!-- JavaScript: Above --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Zaczniemy od utworzenia nagłówka naszej witryny. Będzie to ciemny nagłówek z linkami do naszej strony indeksu i dwóch innych stron — „Projekty” i „Dziennik czytania” — które możesz utworzyć później:

 <nav class="navbar navbar-dark navbar-expand-lg bg-dark "> <div class="container-fluid"> <div class="mx-4"> <a class="navbar-brand" href="#">Kinsta User</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reading Log</a> </li> </ul> </div> </div> </nav>

Używamy paska nawigacyjnego opakowania navbar i navbar-expand-lg aby utworzyć responsywny kontener, który zwija się, gdy szerokość wyświetlania jest mniejsza niż 992 piksele. Dzieje się tak z powodu opcji siatki lg . Jeśli chcesz dowiedzieć się więcej o opcjach siatki, zajrzyj na stronę układu Bootstrap.

Teraz utwórzmy dwie responsywne kolumny w kontenerze: jedną na darmowy obraz z Unsplash, a drugą na opis nas samych:

 <div class="container my-4 "> <div class="row justify-content-center"> <div class="col-lg mb-lg-4"> <img src="image.jpg" class="img-fluid" alt=""> </div> <div class="col-lg mx-2 align-self-center"> <div class="my-3"> <h1 class="text-center">I'm a Kinsta User</h1> <p>As a passionate software developer, I am deeply enthusiastic about creating and developing software applications. I am constantly learning and experimenting with new technologies and approaches, and I have a strong desire to create innovative and effective solutions to complex problems. I am driven by my curiosity and love for problem-solving, and I am committed to producing high-quality, well-designed software that meets the needs of users. </p> </div> </div> </div> </div>

Jak widać, pozyskujemy obraz z pliku lokalnego, więc musi on znajdować się w repozytorium, kiedy wysyłamy nasze zmiany do repozytorium GitHub.

Wreszcie, w naszym kontenerze Bootstrap użyjemy ikon SVG z Devicon wraz z odrobiną wewnętrznego CSS, aby wyróżnić nasze umiejętności:

 <!-- Inside the container created above --> <div class="my-4"> <div class="text-center mb-4"> <h1>My Skills</h1> </div> <div class="row "> <style> I { font-size: 4em; } </style> <!-- Skills --> <div class="col"> <div class="text-center"> <h4>WordPress</h4> <i class="devicon-wordpress-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Django</h4> <i class="devicon-django-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Python</h4> <i class="devicon-python-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>GitHub</h4> <i class="devicon-github-original" ></i> </div> </div> </div> </div>

Ponieważ używamy znacznika HTML <i> , możemy traktować go jako czcionkę. W ten sposób ustalamy rozmiar naszych logo na 4 em , deklarując to w tagu style .

Oto ostateczny wynik tej prostej osobistej strony internetowej:

Czy wiesz, że ponad 50% ruchu na stronie pochodzi z urządzeń mobilnych? Ponieważ użyliśmy Bootstrap, zaoszczędziliśmy dużo kodu CSS, a także otrzymaliśmy responsywną stronę internetową, co możesz docenić poniżej.

Możesz dostosować tę witrynę tak, jak chcesz. Oto pełne źródło na GitHub, do Twojej dyspozycji.

Możesz nawet dołączyć bezgłowy CMS, taki jak Ghost, korzystając z jednego z naszych w pełni funkcjonalnych rozwiązań hostingu aplikacji. Możesz połączyć się bezpośrednio z repozytorium GitHub za pośrednictwem pulpitu nawigacyjnego MyKinsta i uruchomić nową witrynę w zaledwie kilka minut.

Czas przesłać pliki. Aby to zrobić, uruchom następujące polecenia na swoim terminalu, na najwyższym poziomie swojego projektu.

 git add . git commit -m "Added website source code and image" git push

Teraz możemy użyć tej witryny do skonfigurowania naszej strony GitHub.

4. Publikowanie strony GitHub użytkownika

Gdy tylko prześlesz plik index.html do zdalnego repozytorium, którego nazwa pochodzi od Twojej nazwy użytkownika, GitHub automatycznie rozpocznie proces konfiguracji Twojej witryny online. Może to potrwać kilka minut, ale witryna statyczna zostanie uruchomiona automatycznie.

Adres URL Twojej witryny będzie wyglądał mniej więcej tak: https://kinstauser.github.io/

Jeśli po 10 minutach Twoja witryna nie będzie online, możesz spróbować wprowadzić fikcyjną zmianę w kodzie (np. dodać spację) i nacisnąć ponownie, aby ponownie aktywować proces tworzenia GitHub Pages.

5. Publikowanie strony repozytorium GitHub

Do tej pory tworzyliśmy witrynę użytkownika, ale co zrobić, jeśli chcemy mieć wiele opublikowanych witryn GitHub? Następnie musimy przejść do witryny projektu.

Jako przykład użyjemy witryny technologii HTML, którą utworzyliśmy w samouczku dotyczącym programowania Git for Web.

Najprostszym sposobem jest przejście do zakładki Ustawienia naszego repozytorium, a następnie do opcji Strony w sekcji „Kod i automatyzacja”.

Wybierz źródło Wdróż z gałęzi i kliknij gałąź, z której chcesz wdrożyć pliki. Zdecydowanie zaleca się publikowanie z gałęzi głównej , ale tworzenie funkcji i naprawianie błędów za pomocą gałęzi pomocniczych, a następnie łączenie ich. W ten sposób nie wprowadzisz tak łatwo błędów do opublikowanej strony.

Po wybraniu gałęzi wybierz folder, z którego chcesz udostępniać pliki — zwykle katalog główny ( / ) — i kliknij przycisk Zapisz.

Ponownie odczekaj kilka minut. Twoja witryna powinna być dostępna pod "yourusername".github.io/ .

Aby cofnąć publikację witryny repozytorium, możesz przejść do Ustawienia , następnie Strony i kliknąć opcję trzech kropek. Zobaczysz pole z komunikatem Cofnij publikację witryny .

Świetnie! Masz uruchomioną witrynę swojego projektu open source, ale sama nazwa domeny jest długa iz pewnością niełatwa do zapamiętania. Zobaczmy, jak możemy to poprawić.

6. Konfigurowanie domeny niestandardowej

Najłatwiejszym sposobem skonfigurowania niestandardowej domeny dla strony GitHub i upewnienia się, że działa, jest udanie się do dostawcy DNS i utworzenie czterech rekordów A dla adresów IP stron GitHub:

 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

Musisz także skonfigurować rekord CNAME z yourusername.github.io jako celem. Zwykle zmiany DNS są powolne, więc bądź cierpliwy, może to potrwać nawet cały dzień.

Po wykonaniu tej czynności przejdź do sekcji domeny niestandardowej w ustawieniach swojego repozytorium, wpisz swoją domenę, kliknij przycisk Zapisz i poczekaj, aż GitHub sprawdzi Twoją domenę niestandardową.

Ponadto, jeśli Twój DNS to obsługuje, zaznacz pole Wymuszaj HTTPS , aby Twoja witryna była obsługiwana tylko przez HTTPS.

Gratulacje! Jeśli postępowałeś do tego momentu samouczka, masz statyczną witrynę internetową hostowaną na GitHub Pages za darmo.

Najlepsze praktyki dotyczące stron GitHub

Zanim się rozstaniemy, oto kilka najlepszych praktyk, które należy wziąć pod uwagę podczas publikowania witryny GitHub:

1. Nigdy nie dokonuj bezpośrednich zatwierdzeń w gałęzi, z której wdrażasz. Utwórz zmiany w innych gałęziach, a następnie utwórz żądanie ściągnięcia.
2. Wybierz dobrą domenę dla swojej witryny, jeśli możesz sobie na to pozwolić. To jedna z najważniejszych decyzji dla Twojej marki osobistej lub projektowej.
3. Nie używaj GitHub Pages do celów komercyjnych, takich jak rozwijanie witryny e-commerce.
4. Oceń swoje potrzeby. Wspaniale jest móc opublikować statyczną witrynę za darmo, ale jeśli spodziewasz się dużego ruchu lub potrzebujesz złożonych funkcji, najlepszym rozwiązaniem jest zapłacenie za świetną usługę hostingową.

Streszczenie

Tworzenie stron internetowych staje się z każdym dniem coraz bardziej skomplikowane. Witryny statyczne są dostępne od czasu pojawienia się Internetu i stanowią świetny sposób na rozpoczęcie tworzenia projektów.

W tym samouczku dowiedziałeś się, czym są witryny statyczne i jak skonfigurować je online za pomocą GitHub Pages. Utworzyłeś prostą witrynę osobistą za pomocą Bootstrap i opublikowałeś ją jako witrynę użytkownika GitHub. Dowiedziałeś się również, jak uruchomić witrynę projektu i jak cofnąć jej publikację, jeśli to konieczne.

Ogólnie rzecz biorąc, GitHub Pages to wygodny i wydajny sposób na bezpłatne hostowanie statycznej witryny internetowej. Niezależnie od tego, czy chcesz zaprezentować swoje portfolio, podzielić się projektami open source, czy rozpocząć tworzenie obecności online, GitHub Pages to doskonały wybór. A gdy uzyskasz wystarczający ruch lub będziesz gotowy do stworzenia witryny z pełnym stosem, możesz bezproblemowo przejść do innych usług hostingu aplikacji, takich jak Kinsta, bez utraty rytmu.