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

Pod vlivem spousty článků a současných trendů jsem se začal více zajímat o aktuální stav generátorů statických webů. Existuje několik vyzrálých řešení, častokrát určených spíše pro profíky. Takovým hardcore nástrojem je také Tome. Připraví vám statický web na základech Drupalu.

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.

Tome - generátor statických webů pro Drupal

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.

Tagy

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Marketing Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

návštěvník

Dobrý den,
existuje něco podobného https://cs.wordpress.org/plugins/wp-super-cache/ pro Drupal?
Jednou za čas se automaticky vygeneruje statické html, ale o maily a formuláře nepřijdu.
Při velké návštěvnosti je vidět ohromný nárůst cpu load serveru, když jednou ze hodinu musí přegenerovat html. Jinak se server fláka a jenom nginx posílá statické soubory.

Něco podobného by se mi hodilo pro Drupal.

Profile picture for user Jan Polzer

No vzhledem k tomu, že je v Drupalu 8 Big Pipe (laicky cache vymyšlená Facebookem), tak bych to až tak neřešil... V Drupalu 7 jsem párkrát viděl nasazený Boot (https://www.drupal.org/project/boost). Jinak tu samozřejmě máme memcache a podobná serverová řešení, což ale není v rámci běžného hostingu.

Profile picture for user mirom

Ahoj,
- co sa tyka odosielania formularov, netlify ti bude odchytavat odoslania hociakeho formularu, ktory ma v sebe data-netlify=true, na zaklade odoslani vies potom robit rozne zaujimave veci, napr. integracia na Slack alebo spustenie buildu
- dynamicke rebuildovanie - pozri si modul build_hooks, mam pocit, ze aj tome uz ma spravenu integraciu
- web drupalcampu je spraveny v GatsbyJS, co mi pride trochu lepsie riesenie ako Tome v tom, ze nemusim pouzivat Drupal theme layer. Na campe o tom mozno bude prednaska a za 3 tyzdne v BA na meetupe tiez ;-)
- vyhoda vsetkych statickych webov je z mojho pohladu to, ze ich mozem na vpsfree nahadzat 50 na vpsku a zadarmo hostovat na netlify, pouzivat moderne technologie na frontende a nemusim mat frontend developera, ktory vie aj nieco z Drupalu.

MM

Profile picture for user Jan Polzer

Jasně, já vím, že to Netlify odchytí, ale nejsem si pak jist poměrem námaha/užitek. Tj. zda nechat třeba klasický Drupal či jiné PHP, nebo to udělat staticky, ale pak si hrát s propojováním na Netlify.

GatsbyJS - na to jsem zvědav. Odrazuje mě React, který neumím.

To je právě ono. Já tam moc nevidím přínos v tom, že ušetřím pár desetikorun nebo set měsíčně u hostování 50 webů. To je jak plivanec v moři :) Mám na virtuálu 30 Drupalů a WordPressů a také to zvládá...

návštěvník

Ahoj Honzo,

já osobně vidím velikou výhodu statického webu v tom, že snižuje dlouhodobé náklady na údržbu.

Pokud mám nějaké stránky udělané na Drupalu/WP, tak se o ně musím pravidelně starat a ten redakční systém pravidelně aktualizovat. Včetně nějaké migrace na novější major verze každých pár let.
Vím o webech, které se musely zavřít po několika letech, protože původní autor se o ně už nechtěl starat a neměl chuť migrovat na novější Drupal/WP/whatever.

Oproti tomu můj nejstarší staticky vygenerovaný web z roku 2007 zatím nějak stále funguje dodnes. Poslední aktualizace byla 2010, přežil už dvě migrace ze serveru na server.

To, že statický web většinou snese výrazně vyšší zátěž než jeho dynamický kolega, to je jenom příjemný bonus.

Profile picture for user Jan Polzer

Ahoj, jo, to je pravda. Proto taky nemám polzer.cz na Drupalu, k údivu mnohých. Nicméně nemám to jako statický web.

Ale v zásadě asi souhlas, toto je silný argument. Akorát je to vhodné jen pro opravdu malé webíky, řekl bych. Nebo se pletu?

návštěvník

to je na tobě jestli statické weby použiješ na malé či velké problémy.
u velkých projektů je problém obvykle k tomu, že potřebuješ dynamický obsah, například pro diskuze apod. pro komunitu. taky asi nemá smysl stavět na statickém webu eshopy.
nicméně pokud ten dynamický obsah není nutný, případně je třeba ho minimum, lze to řešit pak i skrze externí služby.
každopádně kromě údržby je výhodou statických webů kromě výkonu hlavně bezpečnost. už jsem dvakrát řešil napadený web na wp, jeden byl pravidelně aktualizovaný, druhý moc udržovaný nebyl. u statického webu se toho nemusím obávat. :)

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Nové diskuze
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru