Serie: Static Site Generators - Hugo (Teil 1)

Inhaltsverzeichnis

1. Einleitung
2. Hugo Teil 1 (das ist dieser Artikel)
3. Publii
4. Hugo Teil 2
5. mdBook
6. Hugo Teil 3
7. Pandoc/Markdown

Nach der Einleitung geht es im zweiten Beitrag um den beliebten Static Site Generator (SSG) Hugo. Jawohl, Hugo ist auch ein Cocktail:

Hugo ist ein schwach alkoholischer Cocktail aus Prosecco, Zitronenmelisse- oder Holunderblüten-Sirup, frischer Minze und Mineral- oder Sodawasser; oft sind auch Limettenstücke oder -saft enthalten. Der Longdrink verbreitete sich, ausgehend von Südtirol, nach dem Jahr 2005, vor allem im deutschsprachigen Raum und wird auch häufig als Aperitif gereicht.

Falls es euch hilft, könnt ihr einen Hugo trinken, während ihr Hugo ausprobiert. Aber bitte nicht zu viel davon!

Installation

Hugo gibt es in allen Standardrepositories der bekannten Linux-Distributionen. Ihr könnt die Anwendung ganz einfach über die Paketverwaltung (Software-Store) eurer Distro mit einem Klick installieren. Um zu überprüfen, ob die Installation erfolgreich war, könnt ihr ein Terminal öffnen und hugo version eingeben. Das sieht so aus:

hugo version
hugo v0.147.3+extended+withdeploy linux/amd64 BuildDate=unknown

Idealerweise sollte auch bei euch +extended und +withdeploy angezeigt werden. Das sind Pakete, die man früher zusätzlich installieren musste, heute jedoch mit dem Hugo Hauptpaket ausgeliefert werden. Macht euch keine Sorgen, wenn dort nur hugo v0.xyz steht; es wird trotzdem funktionieren.

Ausserdem braucht ihr Git. Bei den meisten Anwender:innen wird das bereits installiert sein. Ihr könnt das ebenfalls im Terminal mit git version überprüfen:

git version
git version 2.49.0

Falls es fehlt, installiert es bitte über eure Paketverwaltung.

Einrichten

Vermutlich gibt es bei euch ein Verzeichnis für eure eigenen Programme und Skripte. Vielleicht heisst es dev, Development, Entwicklung, Skripte oder so ähnlich. Falls dem nicht so ist, empfehle ich es. Ihr könnt auch einfach unter ~/home/ ein Verzeichnis namens hugo anlegen. Das muss nicht so heissen, zeigt aber an, dass dort eure Hugo-Projekte liegen.

Nun navigiert ihr in das neu angelegte hugo-Verzeichnis und führt diesen Befehl im Terminal aus:

hugo new site meineseite

Damit weist ihr Hugo an, ein neues Webseiten-Projekt anzulegen. Es heisst "meineseite" oder wie immer ihr es nennen möchtet. Nun könnt ihr mit cd meineseite in das von Hugo neu erstellte Verzeichnis gehen. Dort sieht es so aus:

~/delme/hugo/meineseite tree
.
├── archetypes
│   └── default.md
├── assets
├── content
├── data
├── hugo.toml
├── i18n
├── layouts
├── static
└── themes

An dieser Stelle möchte ich nicht alle, sondern nur die wichtigen Dateien und Unterverzeichnisse erklären.

• content - darin befinden sich alle Seiten eurer Website
• hugo.toml - das ist die Konfigurationsdatei eurer Website
• i18n - das ist relevant, falls ihr ein Thema (erkläre ich später) verwendet, welches Mehrsprachigkeit unterstützt
• layouts - dort kann man Bausteine anlegen, um Markdown-Inhalte zu ergänzen
• static - hier liegen die Bilder, PDFs, Videos, usw.
• themes - in diesem Verzeichnis könnt ihr beliebige Designs für eure Website ablegen
• public - dieses Verzeichnis wird erst erzeugt, wenn ihr eure Website mit Hugo generiert. Darin liegt dann die vollständige Website. Für das Publizieren auf einen Webserver benötigt ihr nur den Inhalt dieses Verzeichnisses.

Im nächsten Schritt führt ihr den Befehl git init aus. Das ist aus zwei Gründen notwendig: ihr braucht git, um ein Thema herunterzuladen und um eine Versionsverwaltung für eure Website zu erhalten.

git init
Leeres Git-Repository in /home/ralf/delme/hugo/meineseite/.git/ initialisiert

Jetzt holen wir uns ein Thema für die neue Website. Dafür wählen wir das Thema Ananke aus und clonen es aus dem Original-Repository:

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Klone nach '/home/ralf/delme/hugo/meineseite/themes/ananke'...
remote: Enumerating objects: 4054, done.
remote: Counting objects: 100% (24/24), done.
remote: Compressing objects: 100% (23/23), done.
remote: Total 4054 (delta 13), reused 1 (delta 1), pack-reused 4030 (from 2)
Empfange Objekte: 100% (4054/4054), 6.24 MiB | 8.08 MiB/s, fertig.
Löse Unterschiede auf: 100% (1953/1953), fertig.

Wenn ihr jetzt in das themes-Verzeichnis schaut, seht ihr darin das Verzeichnis ananke, in dem sich eine vollständige Hugo-Website verbirgt. Wie ihr weitere Themes findet und installiert, erkläre ich später.

Nun müsst ihr der Konfigurationsdatei (hugo.toml) mitteilen, dass ananke das Thema eurer Website sein soll:

echo "theme = 'ananke'" >> hugo.toml

Das kann man selbstverständlich auch von Hand in die Datei hugo.toml eintragen. Da ihr im weiteren Verlauf der Website-Bearbeitung unweigerlich diese Datei editieren müsst, könnt ihr das auch jetzt machen:

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'

Bisher ist die hugo.toml nur ein Schatten ihrer selbst. Später wird dort viel mehr Inhalt erscheinen.

Laufen lassen

Tja, liebe Leute, das war es; eure erste Hugo-Website ist fertig. Um euch das Ergebnis anzusehen, generiert ihr die Site mit einem lokalen Webserver. Dazu tippt ihr ins Terminal: hugo server und öffnet im Webbrowser http://localhost:1313/. Falls ihr bisher nichts verkackt habt, seht ihr das:

Falls ihr jetzt enttäuscht seid, weil man fast nichts sieht, kann ich euch beruhigen. Da ihr noch keinerlei Inhalte geliefert habt, kann auch nichts angezeigt werden.

Inhalte erzeugen

Wie oben bereits erwähnt, befinden sich die Inhalte eurer Website im Verzeichnis content. Dieses kann man entweder selbst mit Unterverzeichnissen und Markdown-Dateien füllen, oder von Hugo generieren lassen. Ich rate zum zweiten Schritt, damit man sieht, wie eine Markdown-Datei bei Hugo aussehen muss. Der Befehl zum Generieren lautet:

hugo new content content/posts/ersteseite.md

Danach sieht es im content-Verzeichnis so aus:

~/del/hugo/meineseite/content tree
.
└── posts
    └── ersteseite.md

Die Datei ersteseite.md enthält:

+++
date = '2025-06-11T22:03:06+02:00'
draft = true
title = 'Ersteseite'
+++

Diesen Teil einer Inhaltsseite nennt man bei Hugo front matter. Das sind die Metadaten einer Inhaltsseite, welche viel umfangreicher sein können, als in diesem Beispiel. Jetzt fügen wir Inhalt im Markdown-Format hinzu:

+++
date = '2025-06-11T22:03:06+02:00'
draft = false
title = 'Ersteseite'
+++
## Willkommen auf Deiner Website

Hier kannst Du Inhalt im Markdown-Format schreiben.

Fast alles ist möglich: [Static Site Generators bei gnulinux.ch](https://gnulinux.ch/serie-static-site-generators/)

Bleib dran. Hugo wird dir gefallen.

Beachtet bitte, dass jetzt draft = false ist. Was es damit auf sich hat, erkläre ich ebenfalls später. Falls der lokale Webserver noch läuft (hugo server) seht ihr jetzt sofort das Update eurer Site. Hugo überwacht alle eure Änderungen und stellt sie sofort dem lokalen Webserver zur Verfügung:

Publizieren

Falls du mit den ersten Ergebnissen zufrieden bist, kannst du die Website auf einem Webserver publizieren. Dazu sind zwei Schritte notwendig:

1. Mit dem Befehl hugo generierst du die finale statische Version der Site. Diese befindet sich im Unterverzeichnis /public
2. Jetzt kannst du den Inhalt von /public per FTP, rsync, Git-CI oder sonst wie auf deinen Webserver kopieren.

Fertig ist die Wurst!

Fazit

Ich hoffe, dass dieser Einstieg in den Website-Bau mit Hugo auch für Einsteiger nachvollziehbar ist. Nun sollte es jedem klar sein, dass Static Site Generatoren ganz andere Werkzeuge sind, als WordPress und Co. Ich verstehe, wenn ihr euer Webprojekt lieber mit Easy-peasy, Klicki-Bunti erstellen möchtet. Nach dem zweiten Teil zu Hugo, den ich im Laufe dieses Sommers schreiben möchte, könnt ihr euch die Frage stellen, ob man mit einem SSG glücklich werden kann.

Um euch die Laune nicht vollkommen zu verderben; schaut doch mal auf die Hugo-Themes. Dort seht ihr, was möglich ist.

Titelbild: Foto von Greta Farnedi auf Unsplash

Quellen:

https://gohugo.io/

https://gohugo.io/documentation/