Hugo je open-source generátor statických webových stránek určený pro malé projekty a informační stránky. Je napsán v jazyce Go, takže je velmi bezpečný a extrémně rychlý. Hugo poskytuje skvělý zážitek z psaní a je optimalizován pro prohlížení webových stránek. Ke spuštění Hugo webů nepotřebujete instalovat žádné závislosti, jako je PHP, Python nebo databáze.
V tomto tutoriálu vám ukážeme, jak nainstalovat a používat generátor stránek Hugo na Ubuntu 20.04.
Předpoklady
- Nové Ubuntu 20.04 VPS na cloudové platformě Atlantic.Net
- Heslo uživatele root nakonfigurované na vašem serveru
Krok 1 – Vytvořte cloudový server Atlantic.Net
Nejprve se přihlaste ke svému cloudovému serveru Atlantic.Net. Vytvořte nový server a jako operační systém vyberte Ubuntu 20.04 s alespoň 1 GB RAM. Připojte se ke svému cloudovému serveru přes SSH a přihlaste se pomocí přihlašovacích údajů zvýrazněných v horní části stránky.
Jakmile se přihlásíte ke svému serveru Ubuntu 20.04, spusťte následující příkaz a aktualizujte svůj základní systém nejnovějšími dostupnými balíčky.
apt-get update -y
Krok 2 – Nainstalujte Hugo
wget https://github.com/gohugoio/hugo/releases/download/v0.79.0/hugo_0.79.0_Linux-64bit.deb
Jakmile je balíček stažen, můžete jej nainstalovat pomocí následujícího příkazu:
dpkg -i hugo_0.79.0_Linux-64bit.deb
Pokud vidíte nějaké chyby závislostí, můžete je vyřešit pomocí následujícího příkazu:
apt-get install -f
Po instalaci Huga ověřte nainstalovanou verzi Huga pomocí následujícího příkazu:
hugo version
Měli byste získat následující výstup:
Hugo Static Site Generator v0.79.0-1415EFDC linux/amd64 BuildDate: 2020-11-27T09:09:02Z
Krok 3 – Vytvořte web pomocí Huga
Nejprve vytvořte nový web s názvem web1.doamin.com pomocí příkazu hugo, jak je znázorněno níže:
hugo new site web1.domain.com
Měli byste získat následující výstup:
Congratulations! Your new Hugo site is created in /root/web1.domain.com. Just a few more steps and you're ready to go: 1.Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
Seznam všech souborů a adresářů vygenerovaných Hugem můžete zobrazit pomocí následujícího příkazu:
ls web1.domain.com
Výstup:
archetypes config.toml content data layouts static themes
Krok 4 – Vytvořte svou první stránku
Nyní změňte adresář na svůj web a vytvořte novou stránku s názvem main.md pomocí následujícího příkazu:
cd web1.domain.com hugo new main.md
Měli byste získat následující výstup:
/root/web1.domain.com/content/main.md created
Dále upravte stránku main.md a přidejte nějaký obsah:
nano content/main.md
Na konec souboru přidejte následující řádky:
# Test Page This is my first test page.
Po dokončení uložte a zavřete soubor.
Krok 5 – Stažení a instalace motivu
Nejprve změňte adresář na motivy a stáhněte si motiv Hugo pomocí následujícího příkazu:
cd web1.domain.com/themes wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip
Po stažení stažený soubor rozbalte pomocí následujícího příkazu:
unzip master.zip
Dále přejmenujte extrahovaný adresář pomocí následujícího příkazu:
mv hugo-strata-theme-master hugo-strata-theme
Dále zkopírujte ukázkový obsah ze souboru config.toml umístěného v adresáři témat do výchozího souboru config.toml:
cat hugo-strata-theme/exampleSite/config.toml > ../config.toml
Dále upravte soubor config.toml pomocí následujícího příkazu:
nano ../config.toml
Změňte základní adresu URL a definujte název stránky, jak je uvedeno níže:
baseurl = "/" [[menu.main]] name = "main" url = "main" weight = 5
Uložte a zavřete soubor a poté vytvořte soubor rozvržení vstupní stránky pomocí následujícího příkazu:
nano /root/web1.domain.com/layouts/index.html
Přidejte následující řádky:
{{ define "main" }}
{{ if not .Site.Params.about.hide }}
{{ partial "about" . }}
{{ end }}
{{ if not .Site.Params.portfolio.hide }}
{{ partial "portfolio" . }}
{{ end }}
{{ if not .Site.Params.recentposts.hide }}
{{ partial "recent-posts" . }}
{{ end }}
{{ if not .Site.Params.contact.hide }}
{{ partial "contact" . }}
{{ end }}
{{ end }} Uložte a zavřete soubor.
Krok 6 – Vytvořte si svůj web
Nyní změňte adresář na svůj web a vytvořte si web Hugo pomocí následujícího příkazu:
cd /root/web1.domain.com hugo
Měli byste získat následující výstup:
Start building sites …
WARN 2020/12/06 09:21:44 Page.Hugo is deprecated and will be removed in a future release.
Use the global hugo function.
WARN 2020/12/06 09:21:44 Page.RSSLink is deprecated and will be removed in a future release.
Use the Output Format's link, e.g. something like:
{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}
| EN
-------------------+-----
Pages | 7
Paginator pages | 0
Non-page files | 0
Static files | 26
Processed images | 0
Aliases | 2
Sitemaps | 1
Cleaned | 0 Dále spusťte Hugo server zadáním IP vašeho serveru, jak je uvedeno níže:
hugo server --bind=0.0.0.0 --baseUrl=http://your-server-ip -D -F
Měli byste získat následující výstup:
Start building sites …
WARN 2020/12/06 09:22:02 Page.Hugo is deprecated and will be removed in a future release.
Use the global hugo function.
WARN 2020/12/06 09:22:02 Page.RSSLink is deprecated and will be removed in a future release.
Use the Output Format's link, e.g. something like:
{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}
| EN
-------------------+-----
Pages | 11
Paginator pages | 0
Non-page files | 0
Static files | 26
Processed images | 0
Aliases | 3
Sitemaps | 1
Cleaned | 0
Built in 35 ms
Watching for changes in /root/web1.domain.com/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /root/web1.domain.com/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://69.87.216.179:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop Krok 7 – Přístup k webovému uživatelskému rozhraní Hugo
Nyní otevřete webový prohlížeč a zadejte adresu URL http://ip-ip-vašeho-serveru:1313 . Na následující obrazovce byste měli vidět řídicí panel Hugo:
Klikněte na hlavní v levém panelu. Svou stránku byste měli vidět na následující obrazovce:
Závěr
Ve výše uvedené příručce jste se naučili, jak nainstalovat Hugo a vygenerovat statický web na Ubuntu 20.04. Nyní byste měli mít dostatek znalostí k tomu, abyste si s Hugem snadno vytvořili svůj vlastní statický web; zkuste to ještě dnes na VPS hostingu od Atlantic.Net!