Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Jekyll
Webdesign

Jekyll beállítása GitHub Pages-re 60 másodpercben

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

Hungarian (Magyar) translation by Viktor Istvan Csaszar (you can also view the original English article)

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:

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:

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:

Ú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:

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!


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.