Utworzenie własnej strony internetowej wiąże się z kosztami. Każdy etap budowy witryny generuje wydatki.
Czy chciałbyś stworzyć bezpłatną stronę internetową, która pomoże Ci w rozwoju osobistym lub zawodowym? Istnieje sposób na zaprojektowanie witryny z indywidualną nazwą domeny, darmowym hostingiem na stałe oraz szyfrowaniem SSL, a wszystko to bez żadnych opłat. Brzmi wspaniale, prawda? Czego więcej można chcieć?
Niewątpliwie posiadanie strony internetowej znacząco przyspiesza rozwój, a obecnie jest to bardziej inwestycja niż zbędny luksus. Dotyczy to nie tylko firm, ale również osoby prywatne mogą zyskać wiele dzięki osobistej witrynie.
Niezależnie od tego, czy rejestrujesz nazwę domeny, umieszczasz zawartość swojej witryny na serwerze, tworzysz witrynę od podstaw, czy włączasz szyfrowanie SSL, musisz liczyć się z kosztami. Co gorsza, niektóre z tych wydatków są cykliczne i trwają bez końca.
A gdyby istniała możliwość stworzenia całkowicie darmowej strony internetowej, przechodząc wszystkie kluczowe etapy budowy witryny? Może to brzmieć niewiarygodnie, ale to możliwe, jeśli jesteś studentem.
Jeśli znasz GitHub, być może słyszałeś o GitHub Pages. Jest to bezpłatna usługa dostępna dla każdego użytkownika posiadającego konto GitHub. GitHub Pages umożliwia każdemu stworzenie i hostowanie darmowej strony internetowej, ale jest pewien istotny haczyk. Nazwy domen tych bezpłatnych stron internetowych zazwyczaj kończą się na github.io, co obniża profesjonalizm Twojej witryny.
Czym jest pakiet GitHub Student Developer?
Niewielu użytkowników potraktuje Twoją witrynę poważnie, a posiadanie niepotrzebnie długiej nazwy domeny nigdy nie jest korzystne. Ale spokojnie! Nie jesteśmy tu, aby rozważać wady i zalety stron GitHub. Obiecałem przedstawić sposób na stworzenie darmowej strony internetowej z indywidualną nazwą domeny i właśnie to zamierzam zrobić.
GitHub oferuje niesamowity pakiet przydatnych narzędzi online dla każdego studenta studiów licencjackich lub magisterskich. Nazywa się on GitHub Student Developer Pack. Pakiet zawiera darmowe subskrypcje i atrakcyjne rabaty na popularne narzędzia, takie jak Canva, Namecheap, Microsoft Azure, Discord, Name.com i StreamYard, oraz wiele innych.
W tym artykule wykorzystamy Namecheap do rejestracji bezpłatnej, indywidualnej domeny, a GitHub Pages do hostowania naszej witryny. Następnie omówimy sposoby projektowania i przesyłania plików HTML, CSS i JavaScript na GitHub Pages. Na koniec włączymy również szyfrowanie SSL dla witryny, ale na początek musimy zarejestrować się w Student Developer Pack.
Jak ubiegać się o pakiet GitHub Student Developer?
Aby zarejestrować się w Student Developer Pack, wystarczy posiadać studencki adres e-mail przydzielony przez uczelnię. Adres e-mail studenta zazwyczaj kończy się nazwą domeny Twojej uczelni, np. [email protected] Istnieją również inne sposoby rejestracji, jednak ich weryfikacja trwa znacznie dłużej niż w przypadku adresu e-mail studenta. Jeśli posiadasz studencki adres e-mail, możesz zarejestrować się w pakiecie w następujący sposób:
Krok 1: Przejdź na stronę GitHub Education i kliknij opcję Zaloguj się.
Jeśli masz już pakiet, możesz zalogować się za pomocą swoich danych. W przeciwnym razie wykonaj poniższe kroki.
Kliknij opcję Utwórz konto w oknie Zaloguj się.
Krok 2: Następnie zarejestruj się za pomocą studenckiego adresu e-mail i utwórz konto.
Krok 3: Po wyświetleniu pytania „Który najlepiej opisuje Twój status akademicki?”, wybierz opcję Student.
Krok 4: Wypełnij wymagane pola, podając informacje o nazwie szkoły oraz celu korzystania z GitHub.
Krok 5: Na koniec złóż wniosek, wybierając opcję „Prześlij swoje informacje”.
Po zatwierdzeniu Twojego wniosku przez GitHub powinieneś otrzymać wiadomość e-mail z potwierdzeniem dotyczącym pakietu deweloperskiego. Zazwyczaj proces ten trwa kilka dni, jednak w okresach wzmożonego ruchu czas ten może być różny.
Jak złożyć wniosek o pakiet GitHub Student Developer Pack bez studenckiego adresu e-mail?
GitHub umożliwia również ubieganie się o pakiet za pomocą ważnej legitymacji studenckiej lub innego dokumentu potwierdzającego status studenta. Minusem tego rozwiązania jest długi czas oczekiwania i wyższy wskaźnik odrzuceń. W każdym razie, oto jak możesz ubiegać się o pakiet studencki za pomocą tej metody:
Krok 1: Wykonaj kroki opisane powyżej, aby utworzyć konto za pomocą osobistego adresu e-mail.
Krok 2: Następnie prześlij dowód swojego statusu studenta za pomocą aparatu lub prześlij zdjęcia bezpośrednio na GitHub za pomocą przycisku Prześlij.
Krok 3: Uzupełnij wszystkie niezbędne dane, takie jak nazwa uczelni i cel korzystania z GitHub.
Krok 4: Prześlij swój wniosek.
Jak zarejestrować indywidualną domenę za pomocą Namecheap?
Zakładam, że masz już aktywne konto GitHub Education. Poniższe kroki opisują sposób zarejestrowania bezpłatnej domeny za pomocą Namecheap i hostowania jej na GitHub Pages. Wykonaj te kroki, aby zarejestrować wybraną nazwę domeny:
Krok 1: Zaloguj się na swoje konto GitHub Education i przejdź do zakładki Korzyści.
Powinieneś zobaczyć Web Dev Kit i Virtual Event Kit.
Krok 2: Przejdź do Virtual Event Kit i przewiń w dół, aby znaleźć Namecheap.
GitHub oferuje roczną rejestrację domeny z końcówką .me, do której możesz uzyskać dostęp, klikając opcję Uzyskaj dostęp.
Krok 3: W następnym oknie zostaniesz poproszony o autoryzację połączenia Namecheap z Twoim kontem GitHub. Autoryzuj Namecheap i przejdź do następnego kroku.
Po pomyślnej autoryzacji powinieneś zobaczyć komunikat „Pomyślnie zweryfikowaliśmy twój pakiet studencki za pomocą GitHub”.
Krok 4: Wyszukaj preferowaną domenę za pomocą paska wyszukiwania i kliknij Znajdź.
Na następnym ekranie powinna pojawić się informacja o dostępności wybranej domeny. Jeśli Twoja nazwa domeny jest dostępna, możesz przejść do jej darmowego zakupu.
Krok 5: Dokonaj transakcji, używając adresu e-mail GitHub Education, i wybierz GitHub Pages jako metodę hostingu.
Po pomyślnej rejestracji indywidualnej nazwy domeny i wybraniu GitHub Pages jako hostingu, Namecheap automatycznie utworzy repozytorium na Twoim koncie GitHub. To repozytorium jest całkowicie puste i zawiera tylko plik README.md.
Możesz uzyskać dostęp do tego repozytorium, logując się na swoje konto GitHub i przechodząc do sekcji „Twoje repozytoria”. GitHub Pages nie oferuje wizualnych narzędzi ani gotowych szablonów dla Twojej witryny. Musisz ręcznie zakodować całą witrynę i przesłać powiązane pliki do nowo utworzonego repozytorium GitHub.
Jak stworzyć bezpłatną stronę internetową i hostować ją na GitHub Pages?
Jak wspomniano wcześniej, musisz utworzyć wszystkie pliki HTML, CSS i JavaScript związane z Twoją witryną. Jeśli jesteś programistą i potrafisz kodować, możesz przesłać swoje pliki do repozytorium GitHub i uruchomić swoją witrynę. Możesz przejść do sekcji tego artykułu, która omawia przesyłanie kodu witryny na GitHub Pages.
Jeśli jednak nie masz dużego doświadczenia w projektowaniu stron internetowych, możesz skorzystać z poniższych kroków i zaprojektować własną stronę internetową za pomocą podstawowego kodu HTML:
Krok 1: Przejdź na stronę HTML5 UP i znajdź projekt strony internetowej, który Ci się podoba. Możesz wybrać dowolny gotowy szablon z dowolnej platformy. Ja wybrałem „Masowo” z HTML5 UP, ale możesz pobrać i dostosować dowolny projekt strony internetowej.
Krok 2: Rozpakuj pobrany plik zip z wybranym projektem witryny.
W wyodrębnionym folderze powinny znajdować się pliki index.html i generic.html oraz foldery, takie jak zasoby i obrazy.
Krok 3: Otwórz wyodrębnione pliki w Visual Studio Code i wybierz plik index.html.
Krok 4: Pobierz i zainstaluj rozszerzenie „Live Server” w Visual Studio Code, jeśli jeszcze go nie masz.
Krok 5: Wybierz plik index.html, kliknij prawym przyciskiem myszy i wybierz opcję „Otwórz za pomocą Live Server”. Ta opcja umożliwia podgląd zmian w pliku HTML w przeglądarce w czasie rzeczywistym.
Jak dostosować wygląd swojej strony internetowej?
Dalszy proces dostosowywania witryny nie będzie opisany jako „kroki”. Modyfikacja plików HTML zależy wyłącznie od Twoich preferencji, ale pokażę, jak dostosowałem projekt „Masowo” z HTML5 UP i przekształciłem go w portfolio. Możesz się tym zainspirować lub samodzielnie dostosować swoją witrynę. Wybór należy do Ciebie!
Modyfikacja tagów Tytuł i Akapit
Rozpoczynając dostosowywanie, zmieniłem tag tytułu „Masowo”. Tag tytułu pliku HTML określa jego nazwę wyświetlaną w karcie przeglądarki. Domyślny tytuł Massively brzmi „Massively by HTML5 UP” i zalecam zmianę go na coś, co jest związane z Twoją witryną.
Zmieniłem tag tytułu na „Samyak Goswami | Tech Content Writer”, ponieważ idealnie pasował do mojego portfolio. Następnie zmieniłem sekcję Intro na stronie, która brzmiała: „This is Massively” (zawarta w tagu H1), na „Portfolio Samyaka” z oczywistych powodów. Następnie zmieniłem tekst poniżej, zawarty w tagach akapitów, na „Prezentacja moich projektów i moich umiejętności”.
Przechodząc do sekcji Nawigacja (Nav) w pliku index, usunąłem dwa z trzech przycisków nawigacyjnych zawartych w znaczniku List. Chciałem stworzyć jednostronicową witrynę ze wszystkimi informacjami na jednej stronie, ale możesz dowolnie modyfikować liczbę przycisków nawigacyjnych.
Później zmieniłem tekst „To jest masowo” na przycisku nawigacyjnym na „Moje artykuły”.
Modyfikacja linków i ikon mediów społecznościowych
Na serwerze na żywo powinny być widoczne różne ikony mediów społecznościowych, takie jak Twitter, Facebook, Instagram i GitHub. Usunąłem Twittera i Facebooka, a Instagram i LinkedIn pozostawiłem dla swojego portfolio.
Możesz modyfikować ikony mediów społecznościowych i ich linki, przechodząc do sekcji Nawigacja (Nav) i przewijając do listy tagów z Twitterem, Instagramem i innymi.
Zauważ, że do tych ikon mediów społecznościowych nie są dołączone żadne linki, ponieważ tag href jest pusty. Możesz dodać linki do tagu href, zastępując „#” swoim preferowanym linkiem.
Modyfikacja zawartości strony głównej
Najpierw zmieniłem tag H2 na „Nazywam się Samyak Goswami”, a następnie zmieniłem tag akapitu na „Jestem entuzjastą technologii…”. Sugeruję, abyś zmienił tag H2 na coś, co pasuje do zawartości Twojej strony głównej, oraz tag akapitu, który ją opisuje.
Teraz przejdziemy do najważniejszej części dostosowywania, czyli modyfikacji zawartości kafelków z artykułami.
Aby to zrobić, przejdź do sekcji Posty w pliku index i powinieneś zobaczyć wiele fragmentów kodu zawartych w tagach Article. Możesz dodawać linki do swoich artykułów, modyfikując sekcję href, tak jak robiliśmy to podczas dodawania linków do ikon mediów społecznościowych.
Później możesz zmienić nazwy artykułów, modyfikując zawartość znaczników H2. Możesz także dodać opis do swoich artykułów za pomocą tagu akapitu.
Powtórz ten proces dla każdego artykułu, dodając linki, zmieniając nazwy i dodając opis do wszystkich swoich artykułów.
Dodawanie obrazów do stron internetowych
Zauważyłeś pewnie, że podgląd znacznie różni się od obrazów prezentowanych na stronie HTML5 UP. Wynika to z tego, że w konfigurowalnym pliku użyte są płaskie, domyślne zdjęcia. Urozmaićmy naszą stronę internetową, dodając niestandardowe obrazy.
Oryginalne obrazy
Aby to zrobić, przejdź do folderu, w którym wcześniej wyodrębniłeś plik zip „Masowo”. Otwórz wyodrębniony folder i przejdź do folderu Obrazy. Powinny tam znajdować się różne obrazy o nazwach bg, pic01, pic02 itd. Są to obrazy połączone z naszymi artykułami w tagu Article.
Możesz dodać własne obrazy i zmodyfikować plik index, podając nazwy tych obrazów, lub dodać obrazy i nadać im nazwy podobne do domyślnych. Nadanie obrazom identycznych nazw oszczędzi Ci konieczności modyfikacji kodu i sporo czasu.
Zmodyfikowane obrazy
Zachęcam Cię do sprawdzenia i zmodyfikowania pozostałych części witryny, które nie są tak ważne. Oto portfolio, które stworzyłem, wykonując opisane powyżej kroki: samyakgoswami.me.
Jak przesłać kod swojej witryny na GitHub Pages?
Po zakodowaniu i zaprojektowaniu witryny nadszedł czas, aby przesłać ją na GitHub Pages i udostępnić w Internecie.
Oto jak możesz przesłać swoją witrynę na GitHub Pages:
Krok 1: Zaloguj się na swoje konto GitHub i przejdź do sekcji Moje repozytoria.
Krok 2: Powinieneś zobaczyć repozytorium o nazwie twoja_nazwa_użytkownika.github.io. Przejdź do tego repozytorium.
Krok 3: Powinieneś zobaczyć opcję utworzenia własnego pliku lub przesłania plików do repozytorium GitHub.
Krok 4: Wybierz wszystkie pięć plików i folderów: zasoby, obrazy, elementy, ogólne, indeks, a następnie przeciągnij i upuść je do repozytorium.
Po przesłaniu plików zatwierdź kod i poczekaj, aż GitHub przetworzy Twoje pliki.
Krok 5: Przejdź do Ustawienia> Strony GitHub, aby zobaczyć status swojej witryny. Powinien pojawić się komunikat „Twoja witryna jest opublikowana pod adresem Twoja_domena_niestandardowa”.
Możesz teraz przejść do swojego adresu internetowego i samodzielnie sprawdzić witrynę. Pamiętaj, że zanim strona zacznie działać, może minąć trochę czasu.
Jak włączyć szyfrowanie SSL w GitHub Pages?
HTTP jest niebezpiecznym sposobem obsługi zapytań użytkowników na Twojej witrynie. Każdy, kto ma złe intencje i dużą wiedzę techniczną, może przechwycić komunikację między użytkownikiem a Twoją witryną. Natomiast HTTPS zapewnia wszystkim odwiedzającym znacznie bezpieczniejsze przeglądanie. GitHub Pages oferuje bezpłatne szyfrowanie HTTPS, a oto jak możesz z niego skorzystać:
Przewiń do sekcji Strony w repozytorium.
Na dole okna powinna znajdować się opcja „Wymuś HTTPS”. Szyfrowanie SSL powinno zostać włączone natychmiast po zaznaczeniu pola wyboru Wymuś HTTPS.
Jeśli opcja Wymuś HTTPS jest niedostępna dla Twojej domeny, możesz włączyć szyfrowanie SSL, wykonując poniższe czynności:
Krok 1: Zaloguj się na swoje konto Namecheap i przejdź do sekcji „Lista domen”.
Krok 2: Następnie przejdź do Zarządzaj domeną, a potem do sekcji „Zaawansowane DNS”.
Powinny być widoczne istniejące rekordy CNAME i A.
Dodaj następujące rekordy A z hostem jako „@” i adresem IP jako „185.199.108.153”. Następnie dodaj kolejny rekord A z nazwą hosta „@” i adresem IP „185.199.109.153”.
Postępuj zgodnie z tym schematem, aż będziesz mieć 4 rekordy A do adresu IP „185.199.111.153”.
Usuń wszystkie poprzednie rekordy A.
Krok 3: Następnie dodaj rekord CNAME z hostem jako „www” i wartością jako nazwą użytkownika GitHub (kropka) github (kropka) io.
Usuń poprzednie rekordy CNAME. Ostatecznie ustawienia DNS powinny zawierać 4 rekordy A i 1 rekord CNAME.
Krok 4: Teraz przejdź do stron GitHub w sekcji Ustawienia. Opcja Wymuś HTTPS powinna być już dostępna dla Twojej domeny.
Podsumowując 👈
GitHub oferuje każdemu studentowi niesamowitą możliwość stworzenia i zarządzania darmową stroną internetową. Chociaż GitHub Pages nie nadaje się do obsługi dużego ruchu, jest to doskonałe rozwiązanie dla małej, statycznej witryny internetowej. Bezpłatna, indywidualna nazwa domeny, hosting i szyfrowanie SSL to dodatkowe atuty tego rozwiązania.
Zachęcam do przeczytania artykułu „Jak wybrać hosting dla swojej nowej witryny”.
Oto kilka narzędzi do monitorowania szybkości strony, które poinformują Cię, jeśli Twoja witryna przestanie działać.