KIV/ZIM - Znalostní a informační management

h1. Jekyll

!{float: right; margin-left: 1em; width: 15em}logo-jekyll.png!

_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_.

h2. Případy užití

h3. 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.

h4. Instalace

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

# *Vytvoření repozitáře* – po přihlášení se na stránkách _GitHubu_ je 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.

# *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ě.

!klonovani-repozitare.jpg!

# *Vytvoření inicializačního souboru* – vstoupíme do složky s projektem a vytvoříme soubor @index.html@.

!vytvoreni-souboru-index.jpg!

# *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.

!nahrani-indexu.jpg!

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ě.

h3. 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.

h4. Instalace

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

# *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í.

# *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.

h2. 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 vytvoření příspěvku (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ě názvu příspěvku. Příspěvěk může obsahovat mediální obsah jako jsou obrázky a různé přílohy (PDF). Příspěvky je možné 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.

h2. Š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í.

!vypis-prispevku.jpg!

!vypis-kategorii.jpg!

h2. Úprava vzhledu

Pro _Jekyll_ lze nalézt velké množství přípravených šablon např. "zde":https://jekyllthemes.io/. 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...).

h2. 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.

h2. 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_.

h2. 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.

h2. 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:

* https://www.ubuntu.cz/

* https://developer.spotify.com/

* https://dev.twitch.tv/

* https://devices.netflix.com/en/

* https://rubyonrails.org/

!ubuntu!

Další projekty "zde":https://jekyllrb.com/showcase/.

h2. Zdroje

https://jekyllrb.com/

https://www.youtube.com/watch?v=heO7ePLCvPI

https://sass-lang.com/

https://gohugo.io/

https://www.gatsbyjs.org/