V tomto krátkém návodu bych vám rád ukázal, jak vytvořit webové stránky pomocí Huga. Hugo je populární framework pro tvorbu webových stránek, který lze snadno upravovat, pokud znáte základy kódování. Tento návod je však určen také pro úplné začátečníky, kteří nemají žádné předchozí zkušenosti s tvorbou webových stránek. Nejprve se zaměříme na přípravu vývojového prostředí. Poté vám ukážu, kde stáhnout vlastní téma a jak ho používat.

Vývojové prostředí

Nejprve budeme potřebovat editor, ve kterém můžeme upravovat soubory - psát obsah a upravovat kód. Jedním z nejoblíbenějších editorů je VS Code. Existují však i další editory, například Atom nebo Sublime Text. VS Code má bohatou kolekci rozšíření a poměrně aktivní komunitu. Atom je v mnoha ohledech velmi podobný, ale může být o něco pomalejší než VS Code. Sublime Text je placený editor a ve srovnání s VS Code a Atomem je velmi rychlý, nicméně kolekce rozšíření není tak bohatá jako v případě Atomu nebo VS Code. Záleží tak pouze na vás, který editor si vyberete.

Pokud jste uživateli systému macOS, je instalace Homebrew, package-managerem pro macOS, dobrým nápadem a téměř nutností. Tento krok výrazně zjednodušší váš vývojářský work-flow. Chcete-li nainstalovat Homebrew, navštivte jeho webové stránky a postupujte podle popsaných kroků. Brew vám řekne, abyste někam vložili řádek kódu - do terminálu systému macOS. Jedná se o aplikaci, kterou najdete v Launchpadu v systému macOS. Co je to package-manager? Jedná se o správce instalací, aktualizací a konfigurací aplikací konzistentním způsobem. Uživatelé systému Windows si budou muset nainstalovat Chocolatey, package-manager pro systém Windows. Terminálová aplikace závisí na verzi systému Windows, kterou používáte. Systém Windows 11 nabízí aplikaci Windows Terminal, která ve výchozím nastavení používá prostředí PowerShell; v systému Windows 10 si musíte aplikaci Windows Terminal stáhnout z obchodu Microsoft Store. Kód do aplikace Windows Terminal můžete vložit z webu Chocolatey. Tento Terminál budeme později používat také ke spuštění programu Hugo. Jste-li uživateli systému Linux, máte již předinstalovaný package-manager, který je součástí vaší linuxové distribuce.

Po úspěšné instalaci package-manageru pro váš operační systém je třeba nainstalovat systém Git. Tento nástroj bude sledovat všechny změny, které provedete v projektových souborech. Git můžete nainstalovat různými způsoby, které se liší dle operačního systému, který používáte:

V systému MacOS použijeme Homebrew, který jsme nainstalovali v předchozím kroku, a do Terminálu zadáme tento příkaz:

1brew install git

V systému Linux můžeme použít vestavěného správce balíčků; například package-manager apt-get v Ubuntu:

1apt-get install git

V systému Windows si můžeme stáhnout instalační program Git z webové stránky Git.

Nyní můžeme nainstalovat framework Hugo. Podobně jako v případě systému Git se tento krok liší podle používaného operačního systému. V systému macOS opět použijeme Homebrew a příkaz vložíme do Terminálu:

1brew install hugo

V systému Linux:

1apt-get install hugo

a ve Windows použijeme Chocolatey:

1choco install hugo -confirm

Nyní můžeme vyzkoušet, zda byl Hugo nainstalován správně. Zkuste do terminálu napsat následující příkaz:

1hugo version

Pokud se Hugo nepodařilo nainstalovat, zobrazí se varianta hlášení "command not found". Pokud však instalace proběhla úspěšně, měla by se zobrazit informace o verzi Huga, kterou používáte, např:

1hugo v0.96.0+extended darwin/arm64 BuildDate=unknown

Výběr tématu

Hugo má spoustu témat; některá jsou placená a některá jsou zdarma. Můžete si také napsat vlastní téma. Pokud nemáte předchozí zkušenosti s vývojem webových stránek, je dobré začít s nějakým existujícím tématem. Časem si ho budete moci upravit podle svých potřeb. Mnoho bezplatných témat naleznete na stránkách Hugo a také na GitHubu. Placené motivy najdete na této webové stránce.

Po výběru oblíbeného tématu si stáhněte soubor zip. Na serveru GitHub jej stáhnete kliknutím na zelené tlačítko "Code" a výběrem možnosti "Download ZIP". Nyní můžete vytvořit projekt webu Hugo. Než však začnete, ujistěte se, že se nacházíte v adresáři (na místě), kde chcete mít své webové projekty. Tento adresář může být kdekoli na vašem počítači - může být ve vaší domovské složce, v dokumentech nebo kdekoli jinde. V systému MacOS doporučuji vytvořit složku Websites ve vašem domovském adresáři, což je adresář, ve kterém se nacházíte po otevření Terminálu. K navigaci v Terminálu použijte příkaz cd (změnit adresář). Struktura je následující:

1cd název_složky

Pokud chcete přejít do podadresářů, můžete cestu zapsat oddělenou lomítky.

1cd název_složky/jméno_složky/jméno_složky/jméno_složky

Pokud chcete vytvořit složku, můžete použít příkaz mkdir (make directory):

1mkdir název složky

Když se nacházíte v adresáři, kde chcete mít svůj projekt Hugo, napište následující příkaz. Název projektu může být jakýkoli, ale neměl by obsahovat mezery a diakritiku.

1hugo new site <NAME_OF_YOUR_SITE>

Poté byste měli obsah souboru zip rozbalit do složky /themes v adresáři vaší stránky Hugo. Následně je potřeba upravit soubor config.toml. Do konfigurace přidejte následující řádek:

1theme = '<Název složky tématu>'

Tím zajistíte, že Hugo načte vámi vybrané téma. Nyní můžete začít přidávat obsah na webové stránky Hugo. Obsah by měl být ve složce /content a ve formátu MD. MD je zkratka pro Markdown, značkovací jazyk, který umožňuje formátovat obsah. Nápovědu naleznete například v těchto pokynech.

Jak zobrazit vaše webové stránky

Pro zobrazení webové stránky je třeba spustit server Hugo, což lze provést následujícím příkazem:

1hugo serve

Tento příkaz musí být spuštěn v kořenovém adresáři vašeho projektu v terminálu. Kořenový adresář je adresář s názvem, který jste definovali při spuštění příkazu hugo new site <NAME_OF_YOUR_SITE>. Po spuštění tohoto příkazu byste měli vidět následující výstup:

1                   | CZ
2-------------------+-----
3  Stránky | 46
4  Stránkovač stránek | 0
5  Nestránkové soubory | 3
6  Statické soubory | 0
7  Zpracované obrázky | 0
8  Aliasy | 19
9  Mapy stránek | 1
10  Vyčištěné | 0
11
12Sestaveno za 134 ms
13Sleduje změny v /Users/<Username>/Websites/MyHugoProject/{archetypy,obsah,data,rozvržení,statické,motivy}
14Sleduje změny konfigurace v /Users/<Username>/Websites/MyHugoProject/config.toml
15Prostředí: "development"
16Servírování stránek z paměti
17Běží v režimu rychlého vykreslování. Pro úplné obnovení při změně: hugo server --disableFastRender
18Webový server je dostupný na adrese http://localhost:1313/ (bind adresa 127.0.0.1).
19Stisknutím kláves Ctrl+C se zastaví

Zpráva vám v tabulce sdělí počet obsahu zpracovaného frameworkem Hugo. Také vám sdělí, že framework Hugo monitoruje složky vašeho webu - všimněte si kudrnatých závorek s názvy složek jako obsah, data atd. Jakákoli změna, kterou v těchto složkách provedete, se tedy automaticky zobrazí na webu v prohlížeči. Můžete také zjistit informace o tom, kde se webová stránka nachází (dostupné z prohlížeče). Výchozí adresa je následující: http://localhost:1313. Nakonec je zde zpráva o tom, jak zastavit proces načítání za chodu; toho lze dosáhnout stisknutím kláves [CTRL] + [C] na klávesnici (po dokončení úprav obsahu sezení ukončíte stisknutím kláves [CTRL] + [C]).