Statické webové stránky se snadno vytvářejí a používají se neuvěřitelně rychle. Pokud se naučíte používat Hugo, můžete v Linuxu generovat tematické statické webové stránky. Vytváření webových stránek je opět zábava!
Table of Contents
Generátor webových stránek Hugo
Statický web je web, který nevytváří ani neupravuje webové stránky za běhu. Nechybí podkladová databáze, zpracování elektronického obchodu, popř PHP. Všechny webové stránky jsou kompletně předpřipravené a mohou být návštěvníkům poskytnuty velmi rychle.
To ale neznamená, že statický web musí být nudný. Mohou používat vše, co HTML poskytuje, plus Kaskádové styly (CSS) a JavaScript. Mohou také snadno mít věci jako kolotoče obrázků a webové stránky klouzající přes obrázky na pozadí.
Generátor stránek Hugo pracuje se šablonou a veškerým obsahem, který jste vytvořili, aby vygeneroval dokončený web. Poté jej můžete umístit na hostingovou platformu a okamžitě mít živé webové stránky.
Hugo používá snížení pro stránky a položky blogu, které vytvoříte. Markdown je asi nejjednodušší značkovací jazyk, který existuje, což usnadňuje údržbu vašeho webu.
Hugoovy konfigurační soubory jsou in Tomův zřejmý, minimální jazyk (TOML) a YAML není značkovací jazyk (YAML), které jsou stejně snadné. Dalším bonusem je, že Hugo je neuvěřitelně rychlý – některé stránky se načítají za méně než sekundu. Má mnoho šablon, ze kterých si můžete vybrat, a další se neustále přidávají, takže je snadné začít. Stačí si vybrat šablonu a přidat nějaký obsah, díky kterému bude vaše.
Hugo také funguje jako malý webový server přímo na vašem počítači. Živou verzi svého webu můžete vidět, když jej navrhujete a vytváříte, a kdykoli přidáte nový příspěvek. Také se automaticky aktualizuje pokaždé, když v editoru „Uložíte“, takže můžete okamžitě vidět účinek svých změn ve svém prohlížeči.
Hosting vašich stránek
Pokud jde o hostování vašeho statického webu, máte z čeho vybírat. Většina společností nabídnout hosting zdarma pro osobní nebo open source použití. Samozřejmě si také můžete vybrat běžnou webhostingovou společnost, jako je kterákoli z následujících:
Letecká akrobacie
Amazon S3
Blankyt
CloudFront
DreamHost
Firebase
stránky GitHub
Do toho tati
Google Cloud Storage
Heroku
Stránky GitLab
Netlify
Rackspace
Přepětí
Instalace Huga
Spolu s Hugem musíte mít nainstalovaný Git. Git byl již nainstalován na Fedora 32 a Manjaro 20.0.1. Na Ubuntu 20.04 (Focal Fossa) byl přidán automaticky jako závislý na Hugovi.
Chcete-li nainstalovat Hugo na Ubuntu, použijte tento příkaz:
sudo apt-get install hugo
Na Fedoře musíte napsat:
sudo dnf install hugo
Příkaz pro Manjaro je:
sudo pacman -Syu hugo
Vytvoření webu s Hugem
Když požádáme Huga, aby vytvořil nový web, vytvoří pro nás sadu adresářů. Ty budou obsahovat různé prvky naší webové stránky. Toto však není konečný web, který bude nahrán na vaši hostitelskou platformu. Tyto adresáře budou obsahovat téma, konfigurační soubory, obsah a obrázky, které Hugo použije jako vstup, když jej požádáme o vytvoření skutečné webové stránky.
Je to jako rozdíl mezi zdrojovým kódem a zkompilovaným programem. Zdrojový kód je materiál, který kompilátor používá ke generování konečného produktu. Podobně Hugo vezme obsah těchto adresářů a vytvoří funkční web.
Příkaz, který se chystáme spustit, vytvoří adresář se stejným názvem jako web, který chcete vytvořit. Tento adresář bude vytvořen v adresáři, ve kterém spustíte příkaz.
Přesuňte se tedy do adresáře, ve kterém chcete vytvořit svůj web. Používáme náš domovský adresář, takže zadáme následující:
hugo new site geek-demo
Tím se vytvoří adresář „geek-demo“. Pro přepnutí do tohoto adresáře a spuštění ls zadáme následující:
cd geek-demo/
ls
Vidíme konfigurační soubor „config.toml“ a adresáře, které byly vytvořeny. Ty jsou však prakticky prázdné, protože se jedná pouze o lešení pro web.
Inicializace Git a přidání motivu
Potřebujeme přidat motiv, aby Hugo věděl, jak chceme, aby hotový web vypadal. K tomu musíme inicializovat Git. V kořenové složce vašeho webu (v té, která obsahuje soubor „config.toml“) spusťte tento příkaz:
git init
Existují stovky témat můžete si vybrat a každý má webovou stránku, která jej popisuje. Můžete spustit ukázku motivu a zjistit, jaký je příkaz k jeho stažení. budeme používat jedna se jmenovala Meghna.
Abychom toto téma začlenili do našeho webu, musíme se přepnout do složky „Themes“ a spustit příkaz git clone:
cd themes
git clone https://github.com/themefisher/meghna-hugo.git
Git v průběhu zobrazuje některé zprávy. Po dokončení použijeme ls k zobrazení adresáře obsahujícího téma:
ls
Témata Hugo zahrnují funkční ukázkovou webovou stránku. Tento výchozí web musíte zkopírovat do adresářů svého webu.
Nejprve se vraťte do kořenového adresáře vašeho webu. Používáme volbu -r (rekurzivní) cp k zahrnutí podadresářů a volbu -f (force) k přepsání jakýchkoli existujících souborů:
cd ..
cp themes/meghna-hugo/exampleSite/* -rf .
Spuštění vašeho webu lokálně
Udělali jsme dost pro to, abychom lokálně spustili nový web. Stále bude obsahovat zástupný text a obrázky, ale to jsou pouze kosmetické změny. Nejprve ověříme, že technické části fungují.
Řekneme Hugovi, aby spustil svůj webový server a použil možnost -D (koncept), aby se ujistil, že všechny soubory, které mohou být označeny „konceptem“, jsou zahrnuty na webu:
hugo server -D
Obrázek níže ukazuje výstup z našeho příkazu hugo.
Bylo nám řečeno, že Hugo postavil web za 142 milisekund (říkali jsme, že to bylo rychlé, že?). Také nám říká, že máme stisknout Ctrl+C pro zastavení serveru, ale zatím ho nechat spuštěný.
Otevřete prohlížeč a přejděte na localhost:1313, abyste viděli svůj web.
Úprava výchozího obsahu webu
Zatímco to takto běží, Hugo obsluhuje webové stránky z paměti. Nevytvořila 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í, obnoví se web ve vašem prohlížeči – 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 nechte editor otevřený.
Hugo zjistí, že došlo ke změnám v souboru „config.toml“, takže je přečte, znovu sestaví web a obnoví prohlížeč.
Nyní byste měli na kartě prohlížeče vidět název, který jste pro svůj web vybrali. Získání okamžité vizuální zpětné vazby k uloženým změnám výrazně urychluje proces přizpůsobení webu.
Všechna témata jsou odlišná, ale zjistili jsme, že ta, která jsme dříve sledovali, byla docela jednoduchá. Různé sekce webu mají jasné názvy, stejně jako nastavení v každé sekci, takže je vždy zřejmé, co měníte.
A opět, jakmile uložíte změnu, uvidíte, co jste ve svém prohlížeči změnili. Pokud se vám to nelíbí, stačí změnu zvrátit a uložit znovu.
Různé konfigurační soubory, které řídí web, jsou každý vyhrazeny pro jednu úlohu a jsou smysluplným způsobem označeny. Jejich sledování není obtížné, protože v adresáři není příliš mnoho míst, kde mohou být. Obvykle jsou ve složce „Data“.
Protože používáme dvojjazyčnou šablonu, naše anglické konfigurační soubory jsou v podadresáři „En“.
Pokud v editoru otevřete soubor Data > En > banner.yml, uvidíte kolekci nastavení, která řídí oblast banneru webu.
Když změníte nastavení „Název“ a „Obsah“, změníte text na stránce banneru.
Změnili jsme také nastavení „Štítek“, takže text tlačítka říká „Zjistit více“. Pravděpodobně budete chtít změnit i obrázek svého 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 tak, aby vyhovovaly vašim potřebám.
Budete také chtít změnit obrázky. Na výchozí obrázek bude 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 podadresáři pro různé sekce webu. Veškeré oblíbené ikony a loga umístěte přímo do adresáře „Statické > Obrázky“.
Přidání nového obsahu blogu
Zatím jsme se dívali, jak změnit to, co už existuje. Ale jak přidáme nový příspěvek na blog? Hugo používá pro vytváření nového obsahu koncept zvaný „Archetypy“. Pokud nevytvoříme archetyp pro naše položky blogu, vytvoří se nám výchozí soubor pokaždé, když požádáme Huga o vytvoření nové položky blogu.
To je v pořádku, ale s archetypem si můžeme ušetřit určité úsilí a zajistit, aby pro nás bylo předem zadáno co nejvíce přední hmoty.
V tomto motivu jsou položky blogu umístěny v Obsah > Čeština > Blog. Pokud otevřeme existující položku blogu v editoru – například „simple-blog-post-1.md“ – můžeme vidět hlavní věc.
Musíme zkopírovat tuto sekci, upravit aktuální položky, aby ji bylo možné použít jako šablonu archetypu, a poté ji uložit do složky „Archetypes“. Pokud jej pojmenujeme „blog.md“, bude automaticky použit jako šablona pro nové položky blogu.
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 poté ji zkopírujte stisknutím Ctrl+C. Stisknutím Ctrl+N začněte nový soubor a poté stisknutím Ctrl+V vložte, co jste zkopírovali.
Nyní proveďte následující změny a nezapomeňte ponechat mezeru za dvojtečkou (:) v každém řádku:
Title: Změňte toto na „{{ nahradit .Name „-“ ” ” | title }}” (včetně uvozovek). Ke každému novému příspěvku na blogu bude automaticky vložen název. Je tvořen z názvu souboru, který předáte příkazu hugo new, jak uvidíme.
Datum: Změňte toto 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 motiv žádný nenajde, použije obrázek z dalšího řádku.
obrázek: 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, a to ještě předtím, než najdete, změníte velikost nebo uložíte vlastní. Jakmile to uděláte, můžete snadno upravit název souboru tak, aby odpovídal názvu vašeho vlastního obrázku.
Autor: Změňte si toto na své jméno.
Popis: Zde napíšete krátký popis každého příspěvku. Pokud toto změníte na prázdný řetězec (“”), můžete zadat popis pro každý nový blog, aniž byste museli upravovat starý 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ý záznam blogu.
Všimněte si, že náš soubor by měl mít příponu „.md“, protože k zápisu do blogu budeme používat markdown:
hugo new blog/first-new-blog-post-on-this-site.md
Nyní chceme otevřít náš nový blogový záznam v editoru:
gedit content/english/blog/first-new-blog-post-on-this-site.md
Náš nový blogový příspěvek se otevírá v geditu.
Byly pro nás přidány všechny následující části přední hmoty:
Název: Toto bylo odvozeno z názvu souboru. Pokud to potřebuje 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ů. Pusťte jej do Statické > Obrázky > Blog. Zde budete muset zadat skutečný název souboru obrázku.
Autor: Vaše jméno je přidáno automaticky.
Popis: Toto 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ž uložíte svůj soubor, Hugo znovu vytvoří webovou stránku a aktualizuje ji ve vašem 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ý záznam blogu vypadá na své vlastní stránce.
Po dokončení psaní příspěvku na blogu 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.
Tvorba webových stránek
V kořenovém adresáři svého webu zadejte následující příkaz k vytvoření webu:
hugo
Hugo vytváří web a uvádí počet stránek a dalších komponent, které vytvořil. Vytvoření našeho trvalo 134 milisekund.
Hugo vytvoří nový adresář 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 přenosu na vaši hostingovou platformu.
Všimněte si, že na vaši hostitelskou platformu musíte nahrát soubory a adresáře v adresáři „Public“, nikoli samotný adresář „Public“.
Nyní znáte základy
Každé téma bude vyžadovat trochu zkoumání, abyste zjistili, jak můžete dosáhnout toho, aby vypadalo tak, jak chcete, ale to je ta zábavná část! Vzhledem k tomu, že Hugo dokáže okamžitě vykreslit změny v okně prohlížeče, nic netrvá příliš dlouho.
Pravděpodobně zjistíte, že psaní textu a hledání a ořezávání obrázků jsou části procesu, které trvají nejdéle.
Hugo Užitečná je také stránka dokumentace, ale rozsáhlé. Doufejme, že tento základní návod vám bude stačit, abyste mohli začít.
Pokud používáte Git a Github, GitLab, nebo BitBucket, pro tyto platformy jsou k dispozici také integrace. Sledují vaše vzdálené úložiště Hugo a přestavují váš živý web, kdykoli na něj provedete změny.