Jekyll » Historie » Revize 91
Revize 90 (Lukáš Moučka, 2019-11-05 13:29) → Revize 91/106 (Lukáš Moučka, 2019-11-05 13:29)
h1. Jekyll
!{float: right; margin-left: 1em; width: 20em}logo-jekyll.png! 16em}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/
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/