Generátor slúži na to, aby sme nemuseli ručne a pracne vytvárať a upravovať statické weby. Napríklad staršia webová stránka môže mať stovky podstránok a každá obsahuje navigáciu. V prípade potreby zmeny navigácie by sme museli každý súbor ručne upraviť. Aby sme toto nemuseli robiť, za minulé roky vznikli stovky generátorov statických webov, ktoré nám veľa práce automatizujú.

Ako funguje generátor

Generátor vezme zdrojové súbory, ktoré pozostávajú zo šablón, článkov (vo formáte Markdown alebo HTML), CSS, obrázkov, a i. a vygeneruje z nich statický web. Nakoľko štandardne nepoužívame databázu, každý článok je v samostatnom súbore. Okrem článku samotného má v sebe zadefinované rôzne meta dáta, napr. akú šablónu má použiť, dátum vydania, údaje o autorovi a podobne.

Povieme si o niektorých najznámejších.

Jekyll

Najznámejší a najpoužívanejší generátor je Jekyll, nakoľko bol vytvorený autormi GitHubu. Používa programovací jazyk Ruby, má množstvo doplnkov a veľkú komunitu. Jekyll môže byť však pomalý pri generovaní príliš veľkého webu.

Hugo

Hugo je druhý najpoužívanejší generátor a používa jazyk Go, ktorý je zameraný na rýchlosť. Oproti Jekyllu má jednoduchšiu konfiguráciu.

Nuxt

Nuxt je síce prioritne vytvorený pre tvorbu univerzálnych VueJS aplikácií, ale obsahuje v sebe aj generátor statického webu, ktorý vygenerujete spustením príkazu "nuxt generate" v príkazovom riadku. Vďaka VueJS máte k dispozícii množstvo doplnkov a komponentov, čo uľahčuje vývoj. Keďže to je všetko v Javascripte, nemusíte sa učiť iný programovací jazyk.

Gatsby

Gatsby je jasná voľba fanúšikov Javascriptového sveta. Je postavený na React.js, takže má rovnaké výhody ako Nuxt, čiže nekonečné množstvo doplnkov. Veľká výhoda Gatsby je spôsob, akým sa napája ku zdroju dát, teda ku vašim blogom a článkom. Nepôjdem príliš do technických detailov, ale jednoducho povedané, ide o GraphQL a ako zdroj dát môžete použiť čokoľvek, na čo je hotový plugin. Ak nie je, tak si ho môžete jednoducho naprogramovať alebo počkať kým to spraví niekto iný. Na väčšinu známych vecí už plugin existuje. Čiže okrem súborov typu Markdown a HTML môžete ako zdroj použiť aj rôzne Headless CMS (ide o CMS, ktoré slúžia len ako back-end a poskytujú API rozhranie na prístup ku článkom) ako je napríklad DatoCMS, Contentful, NetlifyCMS, GraphCMS, alebo dokonca aj váš starý Wordpress a Drupal, ale v tomto prípade len ako zdroj obsahu.

Niektoré nevýhody statických webov

Ak potrebujete vyhľadávanie na webe, kontaktný formulár alebo niečo iné, dynamické, budete musieť vynaložiť viac snahy (alebo peňazí).

• na vyhľadávanie sa dá použiť služba od Algolia,
• kontaktné formuláre sa dajú riešiť viacerými spôsobmi: AWS Lambda, Formspree, Mailchimp.

Ako to teda spolu môže vyzerať?

• Na CMS máte Wordpress, či už na subdoméne alebo nejakú hostovanú inštaláciu.
• Cez Gatsby máte spravený/nadizajnovaný váš web so všetkými šablónami a celý zdrojový kód dáte na svoj Github/Gitlab/Bitbucket.
• Hosting budete riešiť cez Netlify, tam nastavíte prepojenia (web hooks) na váš git a na Wordpress.
• Vždy keď spravíte zmenu v kóde alebo niekto pridá/upraví článok vo Wordpresse, Netlify pomocou web hooks, zaregistruje zmenu a vygeneruje novú verziu vášho statického webu.

Spoločne to máte plne automatizované, web je statický a nehacknuteľný a zachovali ste si pohodlie Wordpress CMS.