Celkom nedávno sa mi poradilo rozbehnúť môj blog, a veľmi rád by som sa s vami podelil ako som to docielil.

Nechcel som použiť ťažkopádny moloch menom Wordpress. Človek sa on musí starať, t.j. kontrolovať či stránka beží, aktualizovať, dávať pozor aká aktualizácia nám rozbije zásuvné moduly a pod. A nechcel som aby bola platforma mojím pánom. Miesto toho som použil generátor Jekyll a platformu Github pages. Na “Github pages” môžete hosťovať svoju stránku úplne zdarma. Ale o tom trošku neskôr.

Takže čo je to ten Jekyll?

Je to generátor statických stránok. Predstavte si že máme sériu šablón t.j. textových súborov, (ktoré v našom prípade budeme hosťovať na Githube) a potom z nich pomocou nášho nástroja Jekyll vygenerujeme kompletnú štruktúru statickej webovej stránky (čiže: HTML, CSS, JS a obrázkov)

Prečo jekyll?

Statických generátorov stránok existuje mnoho. Ja som zvolil Jekyll pretože ho priamo podporuje platforma Github pages. Jekyll môžete rozchodiť aj u seba lokálne na počítači, poprípade hosťovať u svojho poskytovateľa, ale o tom možno niekedy inokedy. Ja osobne fungujem tak, že som si odladil šablóny, a teraz komitujem nové šablóny priamo na github, kde ak nastane chyba pri generovať mojej statickej stránky, je mi doručený email.

Na začiatku, kým si všetko odladíte, bude vám tých mailov choď viac.

Výhody

• HTML stránky sú veľmi rýchle
• Statické stránky sú bezpečné (samozrejme pokiaľ máme dobre zabezpečený server)

Nevýhody

• Statické stránky sú statické, asi ťažko tam pridáme akýkoľvek formulár na zber údajov. Čo ale môžeme, je embedovat časti stránok ako Google forms, alebo wufoo.
• Nie je úplne vhodný na firemné stránky, keďže asi nie každý člen teamu bude ochotný sa učiť pracovať s Gitom

Ako začať?

Samozrejme prečítaním Jekyll dokumentácie :). Ale týmto spôsobom som ja nešiel. Miesto toho som si našiel na githube zaujímavú už hotovú šablónu (git repozitár poole) a upravil ju podľa svojich potrieb.

Ja som pre vás pripravil upravenú verziu, (Nájdete ju samozrejme tiež na githube repozitár gihubpages-emptytemplate). Si môžete jednoducho forknut (urobiť kópiu vo svojom účte) a upraviť.

Čo budeme potrebovať

1. V prvom rade si vytvorte účet na Githube.
2. Následne si vytvorte, alebo forknite repozitár, ktorý som spomínal vyššie. (Či už poole, alebo gihubpages-emptytemplate)
3. Premenujte forknutý repozitár podľa vášho účtu, tak že na koniec pridáte .github.io na koniec. Takže napríklad ak je váš login jankohrasko2, nový repozitár sa bude volať jankohrasko.github.io
4. Počkať pár minút, a otvoriť si vo webovom prehliadači stránku z adresou ktorú ste si vytvorili, v našom prípade http://jankohrasko2.github.io

Popis šablóny

v prípade že ste išli cestou naklonovania existujúceho repozitára, základné rozloženie je nasledovné:

Keď spustíte Jekyll, vytvorí priečinok menom _site so statickým obsahom vo vnútry. Každý priečinok v repozitáre bude skopírovaný do priečinka _site, pokiaľ neobsahuje na začiatku názvu podtrhovnik (napr. “_toto-je-ignorovane”).

Súbory vo formáte Markdown budú automaticky pretransformované do HTML.

Najdôležitejší súbor celého projektu je config.yml. Je to súbor vo formáte YAML, a obsahuje konfiguráciu nášho Jekyll projektu.

Definujeme v ňom:

• názov našej webstránky, autora, popis, poprípade kontakt
• formát markdown šablón
• akým spôsobom budú vytvárané permanentné linky na príspevky blogu
• formát stránkovania blogu
• a mnoho iného (viď. dokumentácia)

Priečinky _includes a _layouts obsahujú Liquid šablóny, z ktorých nakoniec vznikne naša vygenerovaná statická stránka. Liquid nám pridáva dynamický obsah, do našich statických stránok.

Priečinok _posts obsahuje všetky príspevky blogu vo formáte Markdown. Github pages používajú kramdown syntax pre Markdown.

Poznámka: Ako editor markdown súborov môžete použiť vstavaný editor na githube, alebo použiť niektorý z nástrojov na internete na editáciu markdown súborov, ja osobne používam Visual Studio Code. (To samozrejme mušte mať naklonovaný repozitár na lokálnom disku v počítači ktorý používate)

Súbor index.html obsahuje úvodnú stránku blogu.

Iné statické stránky vytvoríme, jednoducho ako súbory v daného repozitára, ako je v našom prípade napríklad about.md. Tento súbor bude tak isto pretransformovaný do HTML, a skopírovaný do priečinka _site, čiže dostupný na našej stránke.

Upozornenie: Veľmi doležité pri práci s jekyll je, že každý súbor musí byť uložený vo formáte UTF8 bez popisnej hlavicky reps. UTF8 without BOM, alebo ešte inak UTF8 without Signature

Použitie vlastnej domény

Ak už vlastnú doménu máte (napríklad. jankohrasko2.sk) a chcete aby vaša novo vzniknutá stránka bola prístupná z tejto adresy, musíte vytvoriť CNAME záznam v DNS konfigurácii svojej domény

www.jankohrasko2.sk. CNAME jankohrasko2.github.io.

a následne vytvoriť v repozitáre súbor s menom CNAME do ktorého vložíte názov vašej novo zvniknutej stránky. Či už je to www.jankohrasko2.sk alebo jankohrasko2.github.io.

www.jankohrasko2.sk

Pre bližšie informácie si môžete prečítať dokumentáciu o nastavení na github pages.

Ďalšie zdroje, a odkazy

• Jekyll dokumentácia
• Github pages
• Pripravený repozitár s Jekyll šablónou
• Kramdown dokumentácia (Markdown parser a konvertor používaný v githup pages)
• jankohrasko2.github.io - príklad forknutej a nasadenej Jekyll šablóny
• Visual Štúdio Code
• Liquid markup dokumentácia