Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. Jekyll
Webdesign

Konfigurowanie Jekyll dla GitHub Pages w 60 sekund

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called 60 Second Video Tutorials.
Start Learning Web Design in 60 Seconds
Adobe XD in 60 Seconds

Polish (Polski) translation by Mateusz Kurlit (you can also view the original English article)

Jekyll może być wykorzystywany razem z GitHub Pages do tworzenia prostych statycznych stron internetowych. Poniższe wideo przedstawia sposób konfiguracji prostej struktury plików Jekyll w 60 sekund!

Po pomyślnym ustawieniu wszystkiego, zapoznaj się z dostępnymi motywami Jekyll w Envato Market.

Jeśli wolisz o tym przeczytać, opisałem cały proces w kilku prostych krokach:

Nowy projekt

Na początek, utwórz w systemie folder dla nowego repozytorium. W tym celu skorzystaj z wiersza poleceń i przejdź do lokalizacji, gdzie chcesz utworzyć nowy folder, następnie wpisz mkdir mysite. Nasz nowy folder nazywa się "mysite", możesz nadać mu dowolną nazwę.

Przejdź do lokalizacji nowego folderu wpisując cd mysite–oraz utwórz plik konfiguracyjny wpisując polecenie vim _config.yml. Okno wiersza poleceń wyświetli zawartość tego pliku, więc naciśnij i, aby włączyć tryb wstawiania, następnie dodaj poniższy kod:

Naciśnij Esc, aby wyłączyć tryb wstawiania, następnie wpisz :x, aby zapisać wprowadzone zmiany.

Utwórz indeks

Teraz musimy utworzyć dokument indeksu, więc wpisz vim index.md i tak jak wcześniej, dodaj poniższy kod:

Dodaj folder układów

Utwórz nowy folder wpisując mkdir _layouts i przejdź do niego za pomocą polecenia cd _layouts. Dodaj domyślny dokument szablonu vim default.html i wpisz następujący kod:

Zainicjuj nowe repozytorium

Teraz musimy zainicjować folder jako nowe repozytorium i zatwierdzić zmiany. W tym celu przejdź do folderu głównego za pomocą cd ... Następnie wpisz git init, potem git add --all && git commit --all.

Udostępnianie na GitHub

Za pomocą przeglądarki przejdź do GitHub i utwórz nowe repozytorium.

Na tym etapie wyświetli się kilka opcji, więc skopiuj do schowka polecenia znajdujące się pod push an existing repository from the command line. Będą one wyglądały tak:

Wklej polecenia do wiersza poleceń, aby udostępnić lokalne repozytorium na GitHub.

Ustawienia GitHub

Na koniec, kliknij Settings w repozytorium GitHub, w sekcji GitHub Pages wybierz master branch, następnie kliknij Save.

Jekyll jest już skonfigurowany, a twoja strona gotowa do budowania.

Wyjaśnienie struktury plików Jekyll

  • _config.yml odpowiada plikowi konfiguracyjnemu Jekyll. Zawiera ustawienia strony internetowej, takie jak globalne zmienne.
  • index.ml jest głównym dokumentem indeksu strony GitHub Pages.
  • _layouts/default.html jest domyślnym plikiem szablonu, na którym bazuje index.md.

Przydatne poradniki

Aby dowiedzieć się więcej o budowaniu statycznych stron internetowych za pomocą Jekyll, zapoznaj się z poniższymi poradnikami na Envato Tuts+!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.