Jekyll » Historie » Revize 81
Revize 80 (Lukáš Moučka, 2019-10-30 13:04) → Revize 81/106 (Lukáš Moučka, 2019-10-30 13:06)
h1. 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_. 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 nahrát 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ý 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á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é je využíván: * 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/