Jak stworzyć stronę internetową na GitHub Pages: 12 kroków (ze zdjęciami)

Spisu treści:

Jak stworzyć stronę internetową na GitHub Pages: 12 kroków (ze zdjęciami)
Jak stworzyć stronę internetową na GitHub Pages: 12 kroków (ze zdjęciami)

Wideo: Jak stworzyć stronę internetową na GitHub Pages: 12 kroków (ze zdjęciami)

Wideo: Jak stworzyć stronę internetową na GitHub Pages: 12 kroków (ze zdjęciami)
Wideo: JAK NAGRAĆ DOBRY DŹWIĘK do filmów - 3 sposoby nagrywania audio na Youtube 2024, Może
Anonim

GitHub Pages to świetny sposób na stworzenie własnej, osobistej witryny od podstaw. Jest całkowicie darmowy i wymaga jedynie konta GitHub. Pamiętaj jednak, że GitHub Pages nie oferuje najbardziej przyjaznego dla użytkownika projektu do tworzenia stron internetowych (w przeciwieństwie do Wix lub Squarespace), ale jest to świetny sposób na zdobycie doświadczenia z HTML/CSS/JS i wszystkimi elementami strony internetowej. Ten wikiHow pokaże Ci, jak zacząć.

Kroki

Utwórz stronę internetową na GitHub Pages Krok 1
Utwórz stronę internetową na GitHub Pages Krok 1

Krok 1. Zarejestruj konto na GitHub, jeśli jeszcze go nie masz

Zanim będziesz mógł stworzyć własną witrynę na stronach GitHub, musisz utworzyć konto na GitHub. Jeśli masz już konto na GitHub, zaloguj się. Oba są dostępne z prawego górnego paska narzędzi.

Utwórz stronę internetową na GitHub Pages Krok 2
Utwórz stronę internetową na GitHub Pages Krok 2

Krok 2. Utwórz repozytorium w serwisie GitHub.

Upewnij się, że nazwałeś repozytorium „[Twoja nazwa użytkownika GitHub tutaj].github.io”. Spowoduje to zainicjowanie Twojej witryny GitHub.

Metoda 1 z 2: Korzystanie z edytora kodu

Utwórz stronę internetową na GitHub Pages Krok 3
Utwórz stronę internetową na GitHub Pages Krok 3

Krok 1. Pobierz pulpit GitHub, jeśli nie masz go jeszcze zainstalowanego

Instalacja pulpitu GitHub jest tak prosta, jak wejście na https://desktop.github.com/ i kliknięcie dużego fioletowego przycisku „Pobierz”. Następnie uruchom instalator. Jest to potrzebne, aby przesłać zmiany do repozytorium.

Utwórz stronę internetową na GitHub Pages Krok 4
Utwórz stronę internetową na GitHub Pages Krok 4

Krok 2. Zainstaluj edytor kodu

Potrzebujesz go, aby uzyskać podświetlanie składni na GitHub. Popularne opcje to Atom, Visual Studio Code, Sublime Text i Notepad ++, biorąc pod uwagę ich bogaty w funkcje i minimalistyczny charakter. Po zainstalowaniu edytora kodu możesz zacząć.

Utwórz stronę internetową na GitHub Pages Krok 5
Utwórz stronę internetową na GitHub Pages Krok 5

Krok 3. Utwórz plik o nazwie „index.html”

Możesz to zrobić w edytorze kodu lub online. Możesz również przejść do lokalizacji swojego repozytorium na dysku twardym i utworzyć plik „index.html” w folderze repozytorium na dysku.

Utwórz stronę internetową na GitHub Pages Krok 6
Utwórz stronę internetową na GitHub Pages Krok 6

Krok 4. Dodaj swój kod HTML

Musisz nauczyć się HTML, aby móc kodować podstawową stronę internetową. Przyda Ci się również nauka CSS i JavaScript, dzięki czemu możesz dodać styl i funkcjonalność do swojej strony internetowej.

Pamiętaj o zapisaniu pliku

Utwórz stronę internetową na GitHub Pages Krok 7
Utwórz stronę internetową na GitHub Pages Krok 7

Krok 5. Zatwierdź zmiany

Wróć do pulpitu GitHub i kliknij niebieski przycisk Commit to master. Następnie kliknij Push Origin. Spowoduje to przesłanie zmian do GitHub.

Jeśli planujesz wprowadzić więcej zmian, będziesz chciał również wyciągnąć punkt początkowy. Kliknij przycisk Ściągnij pochodzenie na pulpicie GitHub, aby pobrać najnowszą wersję zatwierdzenia na swój komputer

Utwórz stronę internetową na GitHub Pages Krok 8
Utwórz stronę internetową na GitHub Pages Krok 8

Krok 6. Wyświetl swoją stronę internetową

Przejdź do „[Twoja nazwa użytkownika GitHub tutaj].github.io” w przeglądarce internetowej. Może być konieczne pominięcie pamięci podręcznej przeglądarki, przytrzymując klawisz Ctrl lub ⌘ Command podczas klikania przycisku odświeżania, aby wyświetlić nową stronę internetową.

Metoda 2 z 2: Korzystanie z GitHub Online

Stwórz stronę internetową na GitHub Pages Krok 9
Stwórz stronę internetową na GitHub Pages Krok 9

Krok 1. Utwórz plik o nazwie „index.html”

Kliknij Dodaj plik, a następnie kliknij Utwórz nowy plik. Otworzy się edytor plików. Dodaj „index.html” do pola „Nazwij plik”.

Utwórz stronę internetową na GitHub Pages Krok 10
Utwórz stronę internetową na GitHub Pages Krok 10

Krok 2. Dodaj swój kod HTML

Musisz nauczyć się HTML, aby móc kodować podstawową stronę internetową. Przyda Ci się również nauka CSS i JavaScript, dzięki czemu możesz dodać styl i funkcjonalność do swojej strony internetowej.

Pamiętaj o zapisaniu pliku

Utwórz stronę internetową na stronach GitHub Krok 11
Utwórz stronę internetową na stronach GitHub Krok 11

Krok 3. Zatwierdź zmiany

Kliknij zielony przycisk Zatwierdź nowy plik, aby zapisać plik w serwisie GitHub.

Stwórz stronę internetową na GitHub Pages Krok 12
Stwórz stronę internetową na GitHub Pages Krok 12

Krok 4. Wyświetl swoją stronę internetową

Przejdź do „[Twoja nazwa użytkownika GitHub tutaj].github.io” w przeglądarce internetowej. Może być konieczne pominięcie pamięci podręcznej przeglądarki, przytrzymując klawisz Ctrl lub ⌘ Command podczas klikania przycisku odświeżania, aby wyświetlić nową stronę internetową.

Porady

  • Aby dodać podstrony, po prostu utwórz nowy folder na GitHub i dodaj do niego plik "index.html".
  • Jeśli zarejestrujesz nazwę domeny, możesz mieć GitHub Pages używać tej nazwy domeny zamiast domyślnej.
  • Repozytoria stron GitHub muszą być publiczne, chyba że masz konto premium.

Zalecana: