A Jekyll a GitHub Pages-szel használható egyszerű, blogszerű, statikus weboldalakhoz. Ez a videó bemutatja, hogyan állíthatsz be csupasz, Jekyll fájlstruktúrát 60 másodpercben!

Ha már mindent beállítasz és inspirációra van szükséged, nézd meg, mi érhető el az Envato Market Jekyll témák között.

Ha előnyben részesíted az írásos magyarázatot, itt az egész folyamat, világos lépésekre bontva:

Új projekt

Először hozz létre egy könyvtárt a rendszerben az új reponak. Tedd ezt a terminál segítségével, navigálj el vele oda, ahol az új könyvtárt létre szeretnéd hozni, majd írd be: mkdir mysite. Az új könyvtárunk neve "mysite", de te úgy nevezheted el, ahogy szeretnéd.

Válts könyvárat az új könyvtárra a cd mysite beírásával, majd ott hozz létre egy konfigurációs fájt a vim _config.yml parancs beírásával. A terminál ablakod ennek a fájlnak a tartalmát fogja mutatni, így nyomd meg az i karaktert, hogy beszúrás módba kerülj, majd add hozzá a következő tartalmat:

title: My Site

Ezután nyomd meg az Esc-et a beszúrás mód elhagyásához, majd nyomd meg a :x-et a módosításaid mentéséhez.

Index létrehozása

A következő lépésben létre kell hoznunk az index dokumentumot, így üsd be a vim index.md parancsot, s ahogy az előzőekben tetted, most is add hozzá a következő tartalmat:

---
title: Hello
layout: default
---

Hello!

Kinézetek könyvtár hozzáadása

Hozz létre egy új könyvtárt a mkdir _layouts paranccsal, majd lépj bele a cd _layouts parancs beírásával. Add hozzá az alapértelmezett sablon dokumentumot a vim default.html paranccsal, s add hozzá a következő tartalmat:

{{ content }}

Új repo initializálása

Most initializálnunk kell a könyvtárt új repoként, s végrehajtani a változtatásokat: Kezdd a projektünk gyökerébe való visszanavigálással a cd .. paranccsal. Ezután írd be a git init parancsot, majd utána a git add --all && git commit -- all-t.

Küldés a GitHubra

Válts a GitHubra a böngésző segítségével, és hozz létre egy új repot.

Ekkor néhány opció közül választhatsz majd, válaszd azt, ahol az egy meglévő repo küldése a parancssorból lehetőséged látod. A parancsok valahogy így fognak kinézni:

git remote add origin git@github.com:your_username/mysite.git
git push -u origin master

Illeszd be ezeket a parancsokat a terminálba a helyi repod GitHubra feltöltéséhez.

GitHub beállítások

Végül, a GitHub repó Beállítások között jelöld be a master branch for GitHub Pages lehetőséget, majd nyomd meg a Mentést.

A Jekyll így beállításra került, s a weboldalad készen áll a felépítésre!

Jekyll fájlstruktúra, elmagyarázva

• A _config.yml a Jekyllkonfigurációs állományaként működik. Ezt olvassa be a GitHub Pages az oldalra érvényes beállításokért, mint pl. a globális változók és mások.
• Az index.md a GitHub Pages weboldal gyökér index dokumentuma.
• A _layouts/default.html az alapértelmezett sablon fájl, melyen az index.md alapul.

Hasznos erőforrások

A statikus weboldalak Jekyllel való felépítéséről szóló bővebb információkért tekintsd meg a következő erőforrásokat az Envato Tuts+ oldalain!

• Hogyan állíts be egy Jekyll témát

  Ebben az útmutatóban végig megyünk egy Jekyll téma beállításán a kezdetektől, kezdve néhány alapvető telepítési tanáccsal, egészen a végéig.

• Új kurzus: Statikus weboldalak építése Jekyllel

  Az új kurzusunkban megtanulhatsz mindent a Jekyll statikus oldal generátorról, illetve egy teljes weboldal felépítéséről, a kezdetektől mindössze két óra alatt. Join Guy Routledge

• A webdizájn parancssora: az alapok

  Ebben az útmutatóban megtanulhatod a terminállal vagy a parancssorral való munkát, benne azt, hogyan nyisd meg, hogyan futtass parancsokat, hogyan ismételj...