Projekt

Obecné

Profil

Akce
Historie

Wiki » Samostatná práce - 1 část »

Jekyll

Logo Jekyll
Jekyll je open source nástroj určený pro generování statických webových stránek založený v roce 2008 zakladateli GitHubu. Výsledný vygenerovaný web nemá žádný backend – v pozadí neběží žádné PHP, Java EE apod. Samotný generátor je napsaný v programovacím jazyce Ruby a renderuje markdown (odlehčený značkovací jazyk) do HTML (Hypertext Markup Language) – web je možné psát rovnou i v HTML. Stále patří společnosti GitHub a používají ho pro svou službu Github Pages. Hlavní využití má pro vývojáře k dokumentaci softwaru. Dále je využitelný pro osobní blogy a v jistých případech může být použit místo wiki.

Případy užití

GitHub Pages

Nejjednodušším způsobem je použití Jekyllu v rámci GitHubu. Webové stránky zde mohou ukazovat autorovo portfolio nebo sloužit jako dokumentace k softwaru. Není potřeba vlastnit žádnou doménu ani mít zřízený hosting, kde by staticky vygenerovaný web běžel. Při založení nového repozitáře pro web dojde k vytvoření nové branch vedle naší master branch. Níže podrobnější návod.

Instalace

Instalace je pro potřeby tohoto článku ve zjednodušené formě.

  1. Vytvoření repozitáře – po přihlášení se na stránkách GitHubu vytvoříme nový repozitář, jehož název bude shodný s naším uživatelským nebo jménem organizace. V případě nevalidního zadání údajů nebude nově založený repozitář fungovat.
  2. Klonování repozitáře – po úspěšném založení nového repozitáře jej naklonujeme do námi definovaného lokálního uložiště.
  3. Vytvoření inicializačního souboru – vstoupíme do složky s projektem a vytvoříme soubor index.html.
  4. Nahrání souboru index.html – soubor index.html je nutné v rámci adresářové struktury přidat do gitu a provést commit následovaný pushem. Do souboru je vhodné vložit nějaký text, abychom si ověřili funkčnost služby Github Pages. Následně již můžeme nahrát soubory nutné pro funkčnost Jekyllu, resp. pro jeho generování na statický obsah.

Po instalaci je možné zakládat nové stránky, vkládat příspěvky nebo měnit vzhled za pomocí předdefinovaných šablon nebo pomocí CSS (Cascading Style Sheets). Po každé provedené úpravě webu, resp. commitu je potřebovat vygenerovat nový statický obsah. Dle konfigurace repozitáře provádí generování GitHub automaticky nebo jej můžeme provádět manuálně.

Klasický web (blog)

Pro klasické blogování s Jekyllem je nutné vlastnit domému a hosting. Na hostujícím serveru musí být nainstalováný jen webový server (Apache, NGINX) – na hostingu je umístěn jen statický obsah, takže není potřeba databáze ani např. PHP (Hypertext Preprocessor) server. Nástroj Jekyll je nainstalováný na lokálním počítači včetně všech závislostí. Počítač generuje statický obsah, který je následně nahráný na hosting.

Instalace

Instalace je pro potřeby tohoto článku ve zjednodušené formě.

  1. Instalace závislostí – jako první nainstalujeme Ruby, protože je v něm Jekyll napsaný. Dále nainstalujeme knihovny gcc, gcc-c++ a zlib-devel, protože některé závislosti z Ruby se nestahují, ale kompilují.
  2. Instalace Jekyllu – necháme nainstalovat Jekyll a po instalaci Jekyllu jej necháme vygenerovat výchozí blog s výchozí šablonou.

Blog můžeme opět editovat a následně vygenerovaný statický obsah nahrávat na hosting.

Vkládání příspěvků

Každý příspěvek je reprezentován jedním textovým souborem a Jekyll obstará vše ostatní. Příspěvek je psán v markdown, který obsahuje stejné formátovací značky jako GitHub. Je možnost psát i v čistém HTML. Po jeho vytvoření (textového souboru) musí být umístěn do složky _posts. Název souboru musí mít tento formát: ROK-MĚSÍC-DEN-NÁZEV_PŘÍSPĚVKU.MARKUP.

Do příspěvku je možné vložit odkaz na jiný příspěvek pomocí permalinku – nedochází ke kolizi URL (Uniform Resource Locator) adres při změně titulku. Může obsahovat mediální obsah jako jsou obrázky a různé přílohy (PDF). Je možné je kategorizovat a dávat jim tagy (Definice se provádí v hlavičce příspěvku.). Pro dosud nepublikované příspěvky (rozpracované a připravené dopředu) slouží složka drafts. Jejich náhled je možný pouze na lokálním počítači.

Šablonovací jazyk

Šablonovací jazyk Liquid značně rozšiřuje možnosti příspěvků. Přidává možnost vypisovat proměnné, používat různé filtry, složitější formátování textu nebo používat logické formule. Může sloužit např. pro výpis příspěvků nebo kategorií.

Úprava vzhledu

Pro Jekyll lze nalézt velké množství připravených šablon např. zde. Vzhled je dále možné přizpůsobit úpravou dané šablony nebo vytvořením vlastního vzhledu. Pro úpravy stylu lze použít CSS nebo preprocesor CSS jménem Sass, který je pro kodéry přívětivější a přináší další funkce do CSS (funkce, logické operace...).

Shrnutí hlavních výhod

  • web je možné vytvořit bez znalostí webových technologií (HTML, CSS, JS, PHP...)
  • odpadají bezpečností hrozby, protože není přítomen backend webu
  • ideální řešení pro weby, o které se "nechceme" starat
  • k provozování je zapotřebí jen webový server
  • v rámci GitHubu není nutné vlastnit doménu ani mít zřízení hosting, resp. webový server
  • může sloužit místo wiki stránek.

Nevýhody

Nevýhody Jekyllu se začnou projevovat ve chvíli, kdy je "ohýbán" pro účely, pro které nebyl vyvinut. Pro účely blogování nelze vytvořit/vložit diskuzní modul ani jiný formulářový prvek. Pro vytvoření dynamického obsahu je jedinou možností využití Cronu, který bude periodicky spouštět skript a generovat nový statický obsah. Nová data (např. RSS feed, Atom) lze načíst při generování pomocí Ruby.

Další statické generátory

  • Hugo – velmi podobný generátor jako je Jekyll, ale jádro generátoru je napsáno v Go.
  • GatsbyJS – je napsaný v Node.js a používá dotazovací jazyk GraphQL pro získávání dat.

Ukázky projektů

Jekyll je využíván i velkými společnostmi. Zde je několik velkých projektů, pro které byl využit:

Ubuntu

Další projekty zde.

Zdroje

https://jekyllrb.com/
https://www.youtube.com/watch?v=heO7ePLCvPI
https://sass-lang.com/
https://gohugo.io/
https://www.gatsbyjs.org/

Komentáře

Základní informace a "use cases" dobré, ale není vůbec popsáno, jak psát obsah stránek, jak používat šablonování, jak nástroj spouštět; chybí také informace o tom, jak lze používat ve skupině při správě společného webu (sdílení informací). U ukázek projektů by se významně hodila aspoň jedna ukázka zdrojové podoby daného webu.

Aktualizováno uživatelem Premek Brada před více než 4 roky(ů) · 106 revizí zamčený