Tome: praktické zkušenosti s generátorem statických webů pro Drupal

Přiznám se, že trend statických webů moc nechápu. Když si vzpomenu na dobu kolem roku 2000, bastlil jsem webové stránky v HTML, trošku jsem si hrál s PHP a říkal jsem si, jak by bylo fajn, kdybych naprogramoval vlastní administraci a pro změnu obsahu nemusel sahat do kódu.

No, možná trochu kecám. Asi mě to tehdy ani nenapadlo, ale minimálně o rok později jsem se už s webem s administračním prostředím setkal.

Pak přišla móda blogování a volně dostupné redakční systémy jako Mambo. To byl první, se kterým jsem se setkal, dnes jej znáte jako Joomla, která se z něj vyvinula. A samozřejmě přišel Drupal a WordPress.

Vše bylo skvělé. Člověk si postavil nebo nainstaloval šablonu a už do kódu nemusel sahat. Stačilo nalévat obsah do administrace. Bohužel vše postupně nabobtnalo, weby se začaly zpomalovat, ale také nabízet mnohem více obsahu a multimediálních informací než dříve.

Možná, že jsme zapomněli, jak dělat rychlé weby. Trend se pak změnil a dnes opět cítíme tlak nebo minimálně osvětu, na tvorbu rychle načítaných stránek. Jednou z poněkud podivných technik, jak zrychlení dosáhnout, je odchod od serverových technologií jako je PHP a používání čistých HTML souborů.

Příčí se mi to. Přijde mi to jako krok zpátky. Máme tu skvělé věci, s PHP, Pythonem, JavaScriptem ale i s .NET můžeme dělat krásné dynamické weby provádějící psí kusy a místo toho se budeme vracet zpět k sadě HTML souborů. Proč neřešit rychlost optimalizací zpracování na serveru místo jeho vynechání?

Jasně, dnešní generátory nejsou o ťukání jednoduchého kódu do souborů a opakovaném přeťukávání hlaviček a patiček, které jsou na všech podstránkách stejné (pamatujete framesety?). Generátory dnes používají šablonovací systémy.

Ale vzdáváme se tím možnosti dynamického načítání informací. Což je třeba důvod, proč můj www.polzer.cz pořád běží na Symfony a PHP, přestože postrádá administraci a místo databáze využívá soubory s markdownem. A přijde vám pomalý?

Přechodem na HTML se vzdáváme zpracování formulářů. Typicky odeslání mailu. A místo toho weby složitě propojujeme na externí služby, které nám ty maily pošlou.

Ano, výhodou webů vyplivnutých do HTML je možnost bezplatného hostování, třeba na GitHub Pages nebo Netlify. Nebo bezproblémové umístění na jinak problémový pomalý hosting za pár kaček. Ale hernajs, kdo má potřebu provozovat web, do jehož hostingu nechce investovat měsíční částku nižší, než je cena obědu v dobré restauraci?

Jakkoli mi koncept vygenerovaných statických webů přijde na hlavu a proti pokroku, rozhodl jsem se vyzkoušet nějaký generátor. Ideálně bych rád něco se šablonovacím systémem Twig, na který jsem zvyklý z Drupalu nebo Symfony.

Oblíbený generátor Jekyll využívá vlastní šablonovací systém. Sculpin Twig umí, je to svět PHP, ale nezaujal mě. A Statie s podporou markdownu a Twigu jsem objevil až při psaní tohoto článku.

Ovšem našel jsem v článku od Driese Buytaerta zmínku o generátoru statických webů pro Drupal. Jmenuje se Tome a spojuje v sobě vše, co mám rád. Drupal. Šablonovací systém Twig. Composer. Drush. Potenciál vytvořit rychlé weby. Atd.

Myšlenka, že si postavím na lokálním počítači web s Drupalem, ten vyexportuju do HTML a následně nahraju na hosting, mě zaujala. Je to sice pořád takové podivné řešení, ale proč ne.

Nevidím tu ale potenciál, nabídnout takové řešení zákazníkovi. Znáte laika, který bude chtít upravit třeba otevírací dobu na stránce a pustí si kvůli tomu lokální server, přes drush vyexportuje soubory a nahraje je na web?

Drupal na lokálním počítači snadno a rychle

Nástroj Tome rozběhnete nejlépe tak, že si podle instrukcí s využitím composeru stáhnete upravený balíček Drupalu a tohoto nástroje. S pomocí dalšího udělátka pro příkazový řádek spustíte instalaci Drupalu a zapnutí modulu Tome.

Instalace proběhne v prostředí příkazového řádku a jako databázi použije SQLite. Je tedy potřeba se ujistit, že to vaše konfigurace PHP na lokálním stroji umožňuje. Drupal tento způsob rychlého oživení přes příkazový řádek nabízí jen od několika málo verzí dozadu.

Na Macu i v Ubuntu jsem bez problémů vše rozběhl, nainstaloval si místní Drupal a dle instrukcí povypínal moduly, které jsou na statickém webu zbytečné. Tedy vyhledávání, kontaktní formulář nebo historii. Vyzkoušel jsem instalace standardního profilu i demoverze Umami s článkovým webem. Také přihlášení do Drupalu přes drush je bez problémů.

V Drupalu si poté klasicky vytvoříte webové stránky podle svého nejlepšího vědomí a svědomí. Následně se vrátíte do příkazového řádku, spustíte příkaz drush tome:static a Tome vám připraví statickou verzi stránek. HTML soubory překopírujete na internet a máte hotovo. Při změnách obsahu si opět nahodíte svůj lokální Drupal, následně provedete úpravu, vyexportujete HTML, nahrajete jej na web a tak pořád dokola.

Což o to. Pro jednoduchý web, který máte pod palcem jen a pouze vy, se to ještě dá. Dovedu si představit nějaké automatizované deployment řešení se zapojením GITu.

Převod reálného webu s Drupalem 8 do HTML

Ale zajímalo mě, jak bude Tome fungovat v praxi. V případě reálného webu, nikoli holého Drupalu nebo demo obsahu. Vzal jsem proto malý jednoduchý web, který do té doby běžel na systému GetSimple a předělal jej do Drupal.

Mrkněte sami, není to žádný složitý web – Baška Chorvatsko. Chtěl jsem po něm minimum funkcí. Hlavička s vyhledáváním, jednoúrovňové menu, slajder tvořený jen a pouze CSS, obsahová část poskládaná ze segmentů modulu Paragraph, čtyři dlaždice vespod a patička. Na podstránkách je pak jednoduchá fotogalerie, kterou jsem ani nedělal rozklikávací.

Co je na webu oproti výchozímu Drupalu navíc, tak je lazy loading obrázků řešený modulem Lazy. A také vyhledávání. Ano, na statickém webu můžete simulovat drupalovské fulltext vyhledávání s využitím modulu Lunr. Doporučuji na něj kouknout i u běžných menších webů s Drupalem. Je rychlejší než klasické vyhledávání, které můžete vypnout a ušetřit tak kapacitu databáze.

CSS jsem stavěl s využitím SCSS a jeho kompilací pomocí nástroje CodeKit. V Drupalu jsem zapnul jenom klasickou agregaci CSS, žádné pokročilé možnosti jako kritické CSS nebo optimalizaci načítaného JavaScriptu jsem neřešil.

Jedná se tedy o běžný malý webík na Drupalu. Jistě by se na něm dalo mnoho vylepšit, ale chtěl jsem vyzkoušet něco reálného, zároveň ne moc složitého.

Zatímco vygenerování HTML pro prázdný Drupal probíhalo v pohodě, u naplněného webu se objevilo pár komplikací. Z nějakých důvodů se vytvářené HTML nepřepisovalo novou podobou a generátor hlásil různé chyby. Pomohlo ale smazání složky html a následné opětovné spuštění generátoru. Dobře, možná problém na mé straně s právy ke složkám v macOS.

Generátor Tome funguje tak, že vytvoří složky reprezentující URL adresy a v nich index.html. Kromě toho překopíruje obrázky do patřičných složek, tak, jak jsou umístěné v políčkách v obsahu. Překopíruje i styly a JavaScript v tématu vzhledu. Problém mu ale udělaly obrázky použité na pozadí stránek, které nepřekopíroval.

Ve výstupních datech generátoru mi chyběl soubor robots.txt. Možná si řeknete, že není nutný, jelikož ve vygenerovaném HTML se může indexovat vše. Dobře, ale pak bych v něm očekával alespoň uvedení adresy na mapu webu sitemap.xml. Tu totiž Tome připraví.

S dosavadními komplikacemi bych si poradil. Dovedl bych je i snad nějak automatizovat. Na co jsem ale fatálně narazil, byl problém s JavaScriptovými knihovnami. Lazy i Lunr vyžadují objekt Drupal, ale Tome zjevně soubor s ním nenapojí. Ať už použiju agregaci CSS nebo ne.

Tím jsem skončil. Nechtěl jsem se vzdát lazy loadingu či jej řešit vlastním čistým JavaScriptem bez drupalovslého modulu.

Statický Drupal zatím raději ne

Web jsem nakonec na Drupalu spustil. Chtěl jsem se využitím HTML generátoru zbavit udržování redakčního systému GetSimple, místo toho mám na serveru malý web na velkém molochu jménem Drupal 8. Nicméně běhá docela rychle i přesto, že jsem zůstal u SQLite a web prakticky jen překopíroval z lokálního umístění. Nechtěl jsem s ním trávit další čas.

Abych to tedy shrnul. Tome může být zajímavý nástroj pro ty, kdo se vyžívají ve statických webech. Tedy poté, co bude lépe odladěný a poradí si s něčím nad rámec holého Drupalu.

Nevidím u něj ale prostor pro nasazení u webů pro klienty. Nevidím ani tu deklarovanou výhodu statických souborů. Odpadne vám sice režie na PHP a databázi, což v porovnání s realitou českých hostingů web neskutečně vystřelí rychlostně dopředu.

Přijdete o přímé úpravy, prodlouží se vám čas pro úpravu obsahu. A hlavně, stejně pak dojdete k tomu, že je třeba řešit kritické CSS, render blocking JavaScript a frontendové optimalizace. Pro statický web bych tedy pak doporučil něco čistě šablonovacího, bez redakčního systému. Pár nástrojů jsem uvedl na začátku článku.