Zuerst sollte Hugo installiert werden laut https://gohugo.io/getting-started/quick-start/. Am besten direkt auch Git als Versionsverwaltung mit installieren. Außerdem soll der Blog auf Gitlab kostenlos gehostet werden, mit einem CDN und DDoS Schutz von Cloudflare davor. Git ist also unverzichtbar.
Um Hugo und Git zu installieren, nutze ich einen Packetmanager für MAC/Linux oder Windows. Das vereinfacht die Installation erheblich. Als MAC oder Linux User über brew:
brew install hugo
brew install git
Als Windows User über Chocolatey:
choco install hugo
choco install git
Ist die Installation abgeschlossen, kann der Hugo Blog eingerichtet werden. Das geht einfach und simple über einen Befehl, welcher nur einmal nötig ist. Danach können über den Befehl “new” die ersten Beiträge/Posts erstellt werden. Aber alles nacheinander wie folgt:
Die Seite/den Blog zuerst erstellen:
hugo new site meineseite
Dann reinspringen in den Ordner, ein Git-Repository erstellen und das Theme aktivieren:
cd meineseite
git init
git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo
echo 'theme = "beautifulhugo"' >> config.toml
Der erste Post wird erstellt:
hugo new posts/erster-post.md
Den Post können wir mit einem beliebigen Editor anpassen:
nano /posts/erster-post.md
QUICKTIP: Ich nutze gerne Visual Studio Code als Editor (https://code.visualstudio.com/). Damit bekommt man Syntax Highlighting und hat eine Git-Funktion direkt integriert in der grafischen Oberfläche. Somit ist die Verwaltung später sehr einfach.
Um zu sehen wie der Blog bis jetzt aussieht, kann man im Hugo Seiten Ordner “meineseite” folgenden Befehl im Terminal/Console ausführen:
hugo server -D
Die Seite ist dann unter http://localhost:1313/ im Browser erreichbar und wird live aktualisiert wenn etwas geändert wird.
Weitere Einstellungen für die Seite und das Theme gehen in der config.toml:
baseURL = "https://example.org/"
languageCode = "de-de"
title = "Meine tolle Seite"
theme = "beautifulhugo"
[Menus]
main = [
{Name = "Home", weight = 1, URL = "/"},
{Name = "Posts", weight = 2, URL = "/posts"},
{Name = "Tags", weight = 3, URL = "/tags"}
]
[permalinks]
posts = "/:title/"
Je nach Lust und Laune einfach mal mit den Settings rumspielen. Es gibt noch wesentlich mehr, vor allem auch Theme abhängig.
Gefällt die Seite, wird der Befehl “hugo server -D” von vorhin beendet. Mit folgendem Befehl wird die Seite final erstellt:
hugo -D
Es entsteht ein Ordner “/public” wo die fertigen statischen Seiten drin liegen. Dieser Ordner (und nur dieser) kann jetzt auf einem Webspace hochgeladen werden. Die Seite ist damit Online erreichbar.
PS: Ich hoste die Hugo Seiten kostenlos auf Gitlab. Auch nutze ich den Cloudflare Service, welcher ein CDN für schnelle Seitenauslieferung und Caching beinhaltet. Schutz vor Überlastungsangriffen (DDoS) und ein kostenloses SSL-Zertifikat ist ebenfalls dabei. Zusammengefasst kann eine hochverfügbare und sichere Seite für komplett umsonst betrieben werden.
Wie das eingerichtet wird, seht ihr in einem weiteren Beitrag ;)