Jekyll – Ruby generátor statických stránek

Jaké použít CMS? WordPress, Drupal, Joomla nebo něco vlastního? A co zkusit statické stránky vygenerované pomocí připravených šablon? Takovou možností je i projekt Jekyll.
Tento text je zkráceným překladem článku Jekyll – back to the basics of Web z blog.webspecies.co.uk, jehož autorem je Juozas Kaziukėnas z Web Species Ltd. a je zde zveřejněn pod licencí CC BY-SA 3.0.
Rozmýšlel jsem se, co použít pro náš web a blog (blog.webspecies.co.uk), a napadlo mě: použít WordPress nebo jiné CMS, postavit si něco svého, nebo mít jen statické stránky. Nakonec jsem nezvolil ani jedno a místo toho použil malý nástroj s velikou mocí – Jekyll. Čtete dále a uvidíte, zda se vám bude hodit.
Jekyll je vlastně jen generátor statických stránek, který vezme vaše šablony a vyrobí z nich HTML soubory. Obsah měníte ve svém oblíbeném editoru, třeba ve VIMu, je–li to váš šálek kávy, a stránky běží na kterémkoliv web serveru, aniž byste potřebovali databázi, PHP či další serverové věci, což nás přivádí k jeho výhodám.
Výhody
Inu, Jekyll generuje, jak jsme již řekli, HTML stránky, takže to bychom měli bezpečnost (hacknout HTML stránku moc nejde, že? Leda že byste měli špatně nakonfigurovaný server). WordPress prý má spoustu děr (který software nemá?), ale blogy jsou častým cílem spambotů, takže čím bezpečnější, tím lepší.
HTML stránky jsou rychlé, bláznivě rychlé; PHP je také rychlé, ale ne tolik. Mám rád stránky s rychlou odezvou, kde jediný limit je rychlost mého připojení. Tento blog běží na Nginx (skvělý nástroj sám o sobě) a doba odezvy je v podstatě ihned.
Před lety jsem začal svou kariéru tvorbou HTML stránek a pořád to dovedu dělat rychle. Jakmile dostanu do ruky kód od designera, nepotřebuji ohýbat Joomla nebo WordPress šablony – můžu ho použít rovnou. Je to ideální pro rychlou tvorbu stránek; není tu milion pohledů a změny v kódu jsou hračka.
Nevýhody
Statické stránky jsou ovšem statické, takže pokud tam chcete něco dynamického, musíte na to jinak. Kontaktní formulář tam dát nemůžete, protože nemáte nic, co by vám zpracovalo POST data. Naštěstí existují služby jako Wofoo, které stačí na většinu věcí, s nastavením je ovšem víc práce, než si napsat něco svého v PHP. To samé platí pro komentáře, hodnocení a vůbec cokoliv, co potřebuje nějaké úložiště dat.
Není tam žádný online editor textu, takže se to nehodí pro firemní weby. Umím si představit nějaké hacky, jak by to asi šlo, ale nechme je radši stranou. Pro mě to problém není a jakmile tento blog deploynu na server, nepotřebuji nic měnit (a re–deploy trvá jen pár sekund). Klienti to ale vyžadují, takže Jekyll se hodí jen na vlastní projekty nebo na stránky bez možnosti editace.
To je asi tak vše. Tedy, alespoň pro mě. Pokud nemáte s něčím problém, doporučuji ho vyzkoušet.
Jak začít?
Jekyll má repozitář na GitHubu, kde najdete i návod k instalaci, ale na většině systémů by mělo stačit:
gem install jekyll
Dále potřebujete nějaký ukázkový projekt. Vytvořte index.html
a _config.yml
ve stejném adresáři a spusťte příkaz:
jekyll --server --auto
Což spustí web server na adrese http://localhost:4000/
(zkuste si to otevřít v prohlížeči). Příkaz --auto
sleduje změny, takže jakmile něco změníte, Jekyll stránky přegeneruje. Zkuste si přidat další stránky, layout atp., vše je popsáno v manuálu. Poslední věc – vygenerované stránky najdete v adresáři _site
, který můžete nahrát na server (deploy).
Já většinu obsahu píšu v Markdown, ale Jekyll toho umí víc, i prosté HTML. Šablony můžete psát v jazyce Liquid a na složitější věci si můžete napsat pluginy (např. kategorie a štítky na tomto blogu). Nebo se mrkněte na seznam webů založených na Jekyllu.
Shrnutí
Příště až budete přemýšlet o nějakém blogu nebo jednoduchých stránkách, zkuste Jekyll. Pro nás funguje skvěle a líbí se mi jeho ohebnost a lehkost. Je snadné začít s Liquid šablonami, které lze později přesunout do jiných frameworků (Liquid je například velmi podobný Twig).
P.S. Zdrojový kód mého blogu blog.webspecies.co.uk je open source a je k dispozici zde, takže klidně hackujte. Stačí vám:
git clone git://github.com/webspecies/blog.webspecies.co.uk.git
cd blog.webspecies.co.uk
jekyll --server
Pokud to myslite s Jekyllem vazne a chcete mit v nem napriklad jako ja blog, doporucuji pouzit Octopress, ktery ma spoustu vychytavek a dobre se pouziva http://octopress.org/.
Užitečné je, že Jekyll podporuje i github pro své pages – https://help.github.com/articles/using-jekyll-with-pages
nejake srovnani s nanoc nebo rovnou clanek o nanoc?
A napíšete? 8-)
Jekyll není narozdíl od nanoc udržovaný projekt: 71 open pull requests, 316 open issues.
A podstatný rozdíl v délce kódu: jekyll 3 kloc, nanoc 13 kloc.
idealne by nad temihle generatory mel byt javascript webovy UI, kterej by pak sahal primo na disk/system a spoustel treba jekyll :) klikace by to uspokojilo, delalo by se to v prohlizeci, a zaklad by byl stejny.
Podobných nástrojů je více, ale všechny končí s jistou funkcnionalitou. Co když ale potrebuji něco složitějšího (třeba redakční workflow) ale veřejný výsledek je v podstatě statický?
Složité workflow by se mělo stačit naklikat třeba v Drupalu hostovaném ťreba na NAS a na události vytvoření nebo úpravy obsahu jen spustit skript, který pomocí CURL stáhne celý web do statických stránek a to pak nahraje třeba na Amazon S3.
Věci jako diskuze stačí řešit přes Disquis, Facebook a podobně.
Jak by dopadly stranky s javascriptem?
JS je na straně klienta, takže v pohodě. Kromě ajaxu ovšem, pokud by nevolal něco z jiné domény.
V PHP (s trochou snahy i bez celého ZF) se dá snadno podobné chování simulovat pomocí Zend_Cache_Frontend_Page (http://framework.zend.com/manual/1.12/en/zend.cache.frontends.html#zend.cache.frontends.page). Když nastavíte cache_dir do public adresáře, tak máte vlastně generátor statických stránek. Pokud to chcete deployovat na server bez PHP, tak na to stačí pustit jednou XENU (ideálně na sitemapu).
Výhodou je, že nepřicházíte o dynamické možnosti webu a pokud cache smažete, okamžitě se přegeneruje s novými daty. Navíc můžete cache mazat přímo z PHP, takže když je to dobře napsané, tak je to autmoaticky udržované ;)