Snadná tvorba webových stránek s Hugo
Statické webové stránky vynikají svou jednoduchostí tvorby a bleskovou rychlostí načítání. S generátorem statických stránek Hugo, který je určen pro Linux, se tvorba webových stránek stává opět zábavnou a efektivní činností.
Generátor stránek Hugo: Co to vlastně je?
Statické webové stránky se liší od dynamických tím, že nevytvářejí obsah za běhu. Nepotřebují žádnou databázi ani zpracování pomocí technologií jako je PHP. Veškerý obsah je předpřipravený a je tak návštěvníkům k dispozici okamžitě po načtení.
Nemusí to však nutně znamenat, že statické stránky jsou nudné. Mohou plně využívat potenciálu HTML, doplněného o kaskádové styly (CSS) a JavaScript. Díky tomu lze vytvářet i složitější prvky, jako jsou například karusely obrázků nebo efekty s pohyblivým pozadím.
Hugo funguje tak, že kombinuje vaše šablony a obsah a vytváří z nich finální web. Ten pak můžete jednoduše umístit na hosting a mít tak webovou stránku okamžitě online.
Pro tvorbu obsahu (stránek a příspěvků na blogu) Hugo využívá Markdown, jeden z nejjednodušších značkovacích jazyků. Díky tomu je správa webu velmi snadná.
Konfigurační soubory Huga jsou založeny na formátech TOML a YAML, které jsou rovněž velmi jednoduché na pochopení a používání. Další výhodou je rychlost, s jakou Hugo generuje stránky – některé se načítají doslova za zlomek sekundy. A protože je k dispozici mnoho šablon (a stále přibývají nové), je začátek s Hugem velice jednoduchý. Stačí vybrat šablonu a přidat obsah.
Hugo má také integrovaný malý webový server. To znamená, že si můžete prohlížet svoji webovou stránku přímo při jejím vývoji, a vidět tak změny okamžitě. Stačí uložit soubor a web v prohlížeči se aktualizuje.
Možnosti hostingu pro váš web
Pokud jde o umístění vašeho webu na internet, máte na výběr z mnoha možností. Řada společností nabízí bezplatný hosting pro osobní nebo open-source projekty. Pokud preferujete klasický webhosting, můžete si vybrat například z těchto společností:
| Acrobatics | Amazon S3 | Azure |
| CloudFront | DreamHost | Firebase |
| GitHub Pages | GoDaddy | Google Cloud Storage |
| Heroku | GitLab Pages | Netlify |
| Rackspace | Surge |
Instalace Huga na Linuxu
Kromě samotného Huga budete potřebovat mít nainstalovaný také Git. V distribucích Fedora 32 a Manjaro 20.0.1 je Git již předinstalován. V Ubuntu 20.04 (Focal Fossa) se Git instaluje automaticky jako závislost na Hugovi.
Pro instalaci Huga v Ubuntu použijte tento příkaz:
sudo apt-get install hugo
Na Fedoře použijte:
sudo dnf install hugo
Pro Manjaro zadejte:
sudo pacman -Syu hugo
Tvorba webu s Hugem
Při vytvoření nového webu Hugo pro vás vytvoří základní adresářovou strukturu. Ta obsahuje různé prvky vaší budoucí webové stránky. Je důležité si uvědomit, že toto není finální verze webu určená pro nahrání na hosting. Tyto složky obsahují šablonu, konfigurační soubory, obsah a obrázky, které Hugo použije jako vstupní data pro vygenerování webové stránky.
Můžeme to přirovnat k rozdílu mezi zdrojovým kódem a zkompilovaným programem. Zdrojový kód je materiál, ze kterého kompilátor vytváří finální produkt. Hugo na podobném principu zpracovává obsah z těchto složek a vytváří funkční web.
Příkaz, který budeme spouštět, vytvoří složku se stejným jménem, jaké si pro web zvolíte. Tato složka se vytvoří v aktuálním adresáři, ze kterého příkaz spouštíte.
Přejděte do složky, kde chcete web vytvořit. My pro tento příklad použijeme domovský adresář. Zadejte tedy:
hugo new site geek-demo
Tím se vytvoří složka „geek-demo“. Přejděte do této složky a pomocí příkazu „ls“ si zobrazte její obsah:
cd geek-demo/
ls
Můžete vidět konfigurační soubor „config.toml“ a další adresáře, které Hugo vytvořil. Zatím jsou prázdné, protože jde pouze o základní strukturu webu.
Inicializace Gitu a přidání šablony
Aby Hugo věděl, jak má výsledný web vypadat, potřebujeme přidat šablonu. K tomu musíme inicializovat Git. V kořenové složce vašeho webu (tedy tam, kde se nachází soubor „config.toml“) spusťte tento příkaz:
git init
Existují stovky šablon, z kterých si můžete vybírat. Každá má svou vlastní stránku s popisem. Můžete si také prohlédnout ukázku a najít příkaz pro stažení dané šablony. My pro tento příklad použijeme šablonu s názvem Meghna.
Pro přidání šablony do vašeho webu musíte přejít do složky „themes“ a spustit příkaz git clone:
cd themes
git clone https://github.com/themefisher/meghna-hugo.git
Git zobrazí průběžné informace. Po dokončení pomocí ls zkontrolujte, zda se složka s šablonou vytvořila:
ls
Šablony Huga obsahují i ukázkový web. Tento výchozí web musíte zkopírovat do složek vašeho projektu.
Nejprve se vraťte do kořenové složky vašeho webu. Použijte příkaz „cp“ s volbou „-r“ (rekurzivně, tedy včetně podsložek) a „-f“ (přepsat případné existující soubory):
cd ..
cp themes/meghna-hugo/exampleSite/* -rf .
Spuštění webu lokálně
Nyní máme dostatek pro lokální spuštění našeho nového webu. Stále sice bude obsahovat výchozí text a obrázky, ale ty lze jednoduše změnit. Nyní si ověříme, zda fungují technické části.
Řekneme Hugovi, aby spustil webový server a použijeme volbu -D (koncept), která zajistí, že na webu budou zahrnuty všechny soubory, které mohou být označeny jako „koncept“:
hugo server -D
Obrázek níže ukazuje výstup z našeho příkazu hugo.
Hugo nám říká, že web sestavil za 142 milisekund (říkali jsme, že je rychlý, že?). Také nám říká, že pro zastavení serveru máme stisknout Ctrl+C, ale zatím jej necháme spuštěný.
Otevřete prohlížeč a přejděte na adresu localhost:1313, abyste si prohlédli váš web.
Úprava výchozího obsahu webu
Zatímco je server spuštěn, Hugo obsluhuje webové stránky z paměti. Nevytvořil webovou stránku na pevném disku, ale spíše pracovní kopii v RAM. Sleduje však soubory a obrázky na pevném disku. Pokud se některý z nich změní, web se v prohlížeči aktualizuje – nemusíte ani stisknout Ctrl+F5.
Otevřete další okno terminálu a přejděte do kořenového adresáře vašeho webu. Otevřete soubor „config.toml“ v editoru. Změňte „baseURL“ na doménu, na které bude váš web hostován, a změňte „title“ na název vašeho webu. Uložte změny, ale editor nechte otevřený.
Hugo zjistí, že došlo ke změnám v souboru „config.toml“, takže je znovu načte, znovu sestaví web a aktualizuje prohlížeč.
Nyní byste měli v záložce prohlížeče vidět název, který jste pro svůj web zvolili. Okamžitá vizuální zpětná vazba na uložené změny výrazně urychluje proces přizpůsobení webu.
Každá šablona je jiná, ale zjistili jsme, že ta, kterou používáme v tomto návodu, je poměrně jednoduchá. Různé sekce webu mají jasné názvy a nastavení v každé sekci je vždy zřejmé.
A znovu, jakmile uložíte změnu, uvidíte ji v prohlížeči. Pokud se vám změna nelíbí, jednoduše ji vraťte a znovu uložte.
Konfigurační soubory jsou rozděleny pro každou část webu a jsou logicky pojmenovány. Jejich sledování není obtížné, protože není mnoho míst, kde se mohou nacházet. Obvykle jsou ve složce „Data“.
Protože používáme dvojjazyčnou šablonu, naše anglické konfigurační soubory jsou v podsložce „En“.
Pokud otevřete soubor Data > En > banner.yml, uvidíte nastavení, která řídí oblast banneru webu.
Změnou nastavení „Title“ a „Content“ změníte text v banneru.
Změnili jsme také nastavení „Label“, takže text tlačítka říká „Zjistit více“. Pravděpodobně budete chtít změnit také obrázek webu.
Jakmile změny uložíte, uvidíte je ve svém prohlížeči.
Změna dalších prvků webu
Všechny ostatní prvky můžete změnit podobným způsobem. Stačí vyhledat příslušný konfigurační soubor a změnit nastavení a text dle vašich potřeb.
Budete také chtít změnit obrázky. Na výchozí obrázek je odkaz v konfiguračním souboru. Původní obrázek můžete snadno najít a podívat se na jeho rozměry.
Obrázky jsou umístěny v adresáři „Statické > Obrázky“ s podsložkami pro různé sekce webu. Všechny favicony a loga vložte přímo do složky „Statické > Obrázky“.
Přidání nového obsahu na blog
Zatím jsme se zabývali tím, jak upravovat stávající obsah. Ale jak přidat nový blogový příspěvek? Hugo používá pro vytváření nového obsahu koncept nazývaný „Archetypy“. Pokud nevytvoříme archetyp pro naše blogové příspěvky, vytvoří se nám výchozí soubor pokaždé, když budeme chtít vytvořit nový příspěvek.
To by sice fungovalo, ale pomocí archetypu si můžeme ušetřit práci a zajistit, aby se nám předem vyplnila co největší část vstupních dat.
V naší šabloně jsou blogové příspěvky umístěny v Obsah > Čeština > Blog. Pokud otevřeme stávající blogový příspěvek v editoru – například „simple-blog-post-1.md“ – uvidíme vstupní data.
Musíme zkopírovat tuto sekci, upravit stávající položky tak, aby ji bylo možné použít jako šablonu archetypu, a poté ji uložit do složky „Archetypes“. Pokud ji pojmenujeme „blog.md“, bude se automaticky používat jako šablona pro nové blogové příspěvky.
V geditu to můžeme udělat následovně:
gedit content/english/blog/simple-blog-post-1.md
Zvýrazněte horní část včetně dvou přerušovaných čar a stiskněte Ctrl+C pro zkopírování. Stisknutím Ctrl+N začněte nový soubor a stisknutím Ctrl+V vložte zkopírovaná data.
Nyní proveďte následující změny a nezapomeňte ponechat mezeru za dvojtečkou (:) v každém řádku:
Title: Změňte na „{{ replace .Name „-“ “ “ | title }}“ (včetně uvozovek). Pro každý nový příspěvek na blogu se automaticky vloží název. Ten je tvořen názvem souboru, který zadáte při použití příkazu hugo new, jak uvidíme.
Date: Změňte na {{ .Date }}. Automaticky se zadá datum a čas vytvoření blogu.
Image_webp: Toto je cesta k obrázku záhlaví blogu ve formátu webp. Pokud šablona žádný nenajde, použije obrázek z dalšího řádku.
Image: Toto je cesta k obrázku záhlaví blogu ve formátu JPEG. Můžete je také nechat odkazovat na výchozí obrázky. Pak budou mít všechny příspěvky na blogu přechodný obrázek, ještě předtím, než najdete, změníte velikost nebo uložíte vlastní obrázek. Jakmile to uděláte, můžete snadno upravit název souboru tak, aby odpovídal názvu vašeho vlastního obrázku.
Author: Změňte na své jméno.
Description: Zde napíšete krátký popis každého příspěvku. Pokud jej změníte na prázdný řetězec („“), můžete zadat popis pro každý nový blog, aniž byste museli upravovat výchozí text.
Uložte tento nový soubor jako „archetypes/blog.md“ a zavřete gedit. Hugo nyní použije tento nový archetyp, kdykoli budete chtít vytvořit nový blogový příspěvek.
Nezapomeňte, že náš soubor by měl mít příponu „.md“, protože pro psaní blogu budeme používat Markdown:
hugo new blog/first-new-blog-post-on-this-site.md
Nyní chceme otevřít náš nový blogový příspěvek v editoru:
gedit content/english/blog/first-new-blog-post-on-this-site.md
Náš nový blogový příspěvek se otevře v geditu.
Byly pro nás automaticky přidány všechny následující části vstupních dat:
Title: Bylo odvozeno z názvu souboru. Pokud to vyžaduje nějaké doladění, můžete to upravit zde.
Čas a datum: Přidávají se automaticky.
Výchozí obrázek: Pravděpodobně budete chtít najít relevantní obrázek bez licenčních poplatků. Umístěte jej do Statické > Obrázky > Blog. Zde budete muset zadat skutečný název souboru obrázku.
Autor: Vaše jméno se přidá automaticky.
Description: Bylo upraveno.
Napište blog pomocí Markdown a použijte standardní označení pro nadpisy, tučné písmo, kurzívu, obrázky, odkazy a tak dále. Pokaždé, když soubor uložíte, Hugo znovu vytvoří web a aktualizuje ho v prohlížeči.
Obrázek níže ukazuje, jak se náš nový příspěvek na blogu zobrazuje na domovské stránce.
Obrázek níže ukazuje, jak nový blogový příspěvek vypadá na své vlastní stránce.
Po dokončení psaní blogového příspěvku uložte změny a zavřete editor. Můžete také zavřít prohlížeč, protože zastavíme server Hugo.
V okně terminálu, ve kterém běží server Hugo, stiskněte Ctrl+C.
Vygenerování webových stránek
V kořenovém adresáři vašeho webu zadejte pro vygenerování stránek následující příkaz:
hugo
Hugo vytváří web a zobrazuje počet stránek a dalších komponent, které vytvořil. Nám vygenerování trvalo 134 milisekund.
Hugo vytvoří novou složku s názvem „public“ v kořenovém adresáři vašeho webu. V adresáři „Public“ najdete všechny soubory, které potřebujete k nahrání na vaši hostingovou platformu.
Nezapomeňte, že na hosting musíte nahrát soubory a složky uvnitř složky „public“, ne samotnou složku „public“.
Znáte základy
Každá šablona vyžaduje trochu zkoumání, abyste zjistili, jak ji přizpůsobit vašim představám, ale to je ta zábavná část! Vzhledem k tomu, že Hugo dokáže okamžitě zobrazovat změny v prohlížeči, nic netrvá příliš dlouho.
Pravděpodobně zjistíte, že psaní textu a hledání a úprava obrázků jsou části procesu, které trvají nejdéle.
Hugo má také stránku s užitečnou dokumentací, která je však rozsáhlá. Doufejme, že tento základní návod vám bude stačit k tomu, abyste mohli začít.
Pokud používáte Git a GitHub, GitLab, nebo BitBucket, existuje možnost jejich integrace. Sledují vaše vzdálené úložiště Hugo a automaticky aktualizují web při každé změně.