Hugo ist ein Open-Source-Projekt und begeistert schon seit 2013 viele Entwickler:innen, denn Hugo ermöglicht es, statische Webseiten, Blogs und andere Projekte, die hauptsächlich Inhalte darstellen, schnell und einfach umzusetzen. Die Build- und Ladelaufzeit solcher Seiten ist dabei extrem kurz und viele nützliche Features sind von Haus aus schon mit dabei!

Hugo glänzt also vor allem in folgenden Use Cases:

• Blogs oder persönliche Webseiten/Portfolios
• Dokumentationen
• Firmenseiten (ohne komplexe Logik)

1. Man sollte die Installationsanweisungen hier befolgen. Anschließend kann man mit dem Befehl ein Projekt anlegen:

1hugo new site meine-seite
2cd meine-seite

2. Für einen schnellen Einstieg nutzen wir eines der vielen Hugo-Themes namens Ananke. Dazu können wir uns das Theme als Submodul ins Projekt laden:

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

3. Alle Einstellungen unserer Webseite erfolgen nun über die .toml Datei:

1# hugo.toml
2baseURL = "https://example.com/"
3title = "Meine Seite"
4theme = "ananke"
5defaultContentLanguage = "de" # Standardsprache
6defaultContentLanguageInSubdir = false # Keine Subverzeichnisse für Standardsprache
7
8[pagination]
9pagerSize = 10 # Anzahl Inhalte pro Pager
10
11[languages]
12
13[languages.de]
14languageName = "Deutsch"
15weight = 1                # Steuert die Reihenfolge
16contentDir = "content/de" # Verzeichnis für deutsche Inhalte
17
18[languages.de.menus]
19[[languages.de.menus.main]]
20name = "Start"
21pageRef = "/" # interne Verlinkungen nutzen pageRef
22weight = 1
23[[languages.de.menus.main]]
24name = "Blog"
25pageRef = "/blog" 
26weight = 2
27[[languages.de.menus.main]]
28name = "GitHub"
29url = "https://github.com/gohugoio/hugo" # externe Verlinkungen nutzen url
30weight = 3
31
32[languages.en]
33languageName = "English"
34weight = 2
35contentDir = "content/en"
36title = "My Site"         # Englischer Titel der Seite
37
38[languages.en.menus]
39[[languages.en.menus.main]]
40name = "Home"
41pageRef = "/"
42weight = 1
43[[languages.en.menus.main]]
44name = "Blog"
45pageRef = "/blog"
46weight = 2
47[[languages.en.menus.main]]
48name = "GitHub"
49url = "https://github.com/gohugoio/hugo"
50weight = 3

Mit diesen wenigen Schritten haben wir nun ein ausführbares Projekt, das sogar schon Sprachen unterstützt. Um das Ganze lokal zu testen, kann man folgenden Befehl ausführen: hugo server

Blogeinträge können nun per Terminal angelegt werden:

1hugo new content content/de/blog/mein-erster-eintrag.md

Dank unseres Themes müssen wir uns nicht um die Darstellung kümmern und können jetzt auch schon den Blogeintrag sehen (eventuell muss der Server neu gestartet werden). Inhalte werden in Hugo in Markdown-Dateien gepflegt. Sogenannte Front Matter Controls am Anfang der Markdown-Inhalte ermöglichen es, zusätzliche Informationen anzugeben, wie beispielsweise den Titel, das Datum, etc.

Möchte man eigene Implementierungen vornehmen, ist das durch sogenannte Shortcodes möglich. Ein einfaches Beispiel sieht dabei so aus:

1{{/*  layouts/_shortcodes/demo.html  */}}
2
3{{- $title := .Get "title" -}}
4<div
5  style="background-color: darkseagreen; padding: 1rem; border-radius: 0.5rem"
6>
7  <div style="color: black; font-weight: bold">{{ $title }}</div>
8  <div>{{ .Inner }}</div>
9</div>

Dieser Code definiert einen <demo> HTML-Tag mit einem Parameter namens title und dem Inhalt, der umschlossen wird (.Inner). Anwenden tut man das nun in einer der Markdown-Dateien:

1+++
2date = '2025-09-04T15:28:51+02:00' # Front Matter Controls
3draft = true # Wird nicht auf Produktiv-Seiten gezeigt
4title = 'Mein Erster Eintrag'
5+++
6
7### Hallo Welt!
8Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
9tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
10At vero eos et accusam et justo duo dolores et ea rebum.
11
12<!-- Das nachfolgende "more" signalisiert das Ende der Zusammenfassung, -->
13<!-- alles Weitere wird erst in der entsprechenden Blogseite dargestellt -->
14<!--more-->
15
16{{<demo title="shortcode demo">}}
17
18Das ist der innere Text
19
20{{</demo>}}

Startseite:

Vollständiger Blogeintrag:

Vorteile:

• Wie man sehen konnte, ist in wenigen Augenblicken eine funktionsfähige Seite entstanden, die große Mengen an Inhalten unterstützen kann.
• Nützliche Features sind direkt dabei (z.B. Pagination, Internationalisierung, Kategorien und Tags, …).
• Es gibt viele Themes, auf die man aufbauen kann, und es wird aktiv am Open-Source-Projekt gearbeitet.
• Hugo kann auch Tailwind unterstützen.
• Man hat keine Abhängigkeiten zu Datenbanken, Backends oder anderen Tools.
• Die Wartung ist einfach.

Nachteile:

• Kein klassisches CMS – wer die Inhalte pflegen möchte, muss sich mit der jeweiligen Versionierung und der Markdown-Syntax vertraut machen.
• Hugo unterstützt keine dynamischen User-Interaktionen oder Inhalte und benötigt dafür zusätzliche Technologien.
• Begrenztes Plugin-Ökosystem; einiges muss man selbst über Partials/Shortcodes lösen (z.B. Formulare, Bildergalerien, …).

Hugo bringt alles mit, was man für schnelles, sicheres und effizientes Web-Publishing ohne Backend braucht. Ich bin erst vor kurzem auf Hugo gestoßen und konnte problemlos eine Infoseite damit basteln. Durch die Tailwind-Integration war es auch recht einfach, mein eigenes Theming umzusetzen. Insgesamt würde ich Hugo für die nächste Info- oder Blogseite auf jeden Fall wieder wählen und kann es jedem empfehlen.