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:

1

title: My Site

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:

1

---

2

title: Hello

3

layout: default

4

---

5

6

Hello!

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:

1

{{ content }}

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:

1

git remote add origin git@github.com:your_username/mysite.git

2

git push -u origin master

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+!

• 

  Jak skonfigurować motyw Jekyll

  W tym poradniku, skonfigurujemy od początku motyw Jekyll, rozpoczynając od podstawowej instalacji, przechodząc do tego jak...
• 

  Nowy kurs: Budowanie statycznych stron za pomocą Jekyll

  W naszym nowym kursie dowiesz się wszystkiego o generatorze statycznych stron Jekyll i budowaniu kompletnej strony od podstaw w mniej niż dwie godziny. Razem z Guy Routledge...
• 

  Wiersz poleceń w projektowaniu stron: omówienie podstaw

  W tym poradniku, poznasz wszystkie podstawowe informacje dotyczące pracy z terminalem lub wierszem poleceń, takie jak otwieranie, uruchamianie poleceń, powtarzanie...