Hugo: Static Site Generator, Editionen und Build-Geschwindigkeit

Was ist Hugo?

Hugo ist ein Open-Source-Generator für statische Websites (Static Site Generator), geschrieben in Go. Er liest Markdown-Inhalte, Templates und eine Konfigurationsdatei und schreibt daraus einen Ordner mit reinem HTML, CSS und JavaScript, den jeder Webserver oder jedes CDN ausliefern kann. Hugo kommt als einzelne ausführbare Datei, und laut der eigenen Website rendert es auch große Sites in Sekunden, oft schneller.

Hugo gehört zur Familie der statischen Seitengenerierung: Seiten werden einmal vorab gebaut statt bei jeder Anfrage. Damit steht es neben Astro im Jamstack-Werkzeugkasten, mit anderem Kompromiss: Hugo nutzt Go-Templates ohne JavaScript-Laufzeit, Astro ein JavaScript-Komponentenmodell.

So funktioniert eine Hugo-Site

Ein Projekt ist ein Ordner mit einigen festen Verzeichnissen (laut Hugo-Dokumentation):

my-site/
  archetypes/   Vorlagen für neue Inhalte
  assets/       CSS, Sass, JS und Bilder für die Asset-Pipeline
  content/      Markdown-Seiten
  data/         Datendateien (JSON, TOML, YAML, XML)
  i18n/         Übersetzungstabellen
  layouts/      Templates
  static/       wird unverändert nach public/ kopiert
  themes/       optionale Themes
  hugo.toml     Site-Konfiguration
  public/       generierte Site (entsteht beim Build)

Eine Seite schreibst du als Markdown, mit Front Matter am Anfang:

+++
title = 'Mein erster Beitrag'
date = 2026-10-23
draft = false
+++

Hallo, **Hugo**. Dieses Markdown wird beim Build zu einer HTML-Seite.

Ein Template in layouts/ packt den Inhalt in das HTML deiner Site. Zwei Befehle decken den Alltag ab:

hugo server -D    # lokaler Entwicklungsserver, inkl. Entwürfen
hugo --minify     # Site nach public/ bauen

Mit hugo new content angelegte Inhalte starten als Entwurf und bleiben aus einem normalen Build heraus, bis du draft = false setzt. Hugo beherrscht außerdem mehrsprachige Sites, Taxonomien wie Tags, Shortcodes, mehrere Ausgabeformate (HTML plus RSS oder JSON) und Bildverarbeitung wie Skalieren und Zuschneiden.

Standard-, Extended- und Deploy-Edition

Hugo erscheint in mehreren Editionen. Die Standard-Edition deckt den Kern ab. Die Extended-Edition ergänzt LibSass-Unterstützung für Sass (laut Dokumentation ist LibSass veraltet, empfohlen wird Dart Sass, das mit jeder Edition funktioniert). Die Deploy-Edition lädt direkt in einen AWS-S3-Bucket, Google Cloud Storage oder Azure Storage hoch, Extended/Deploy bietet beides. Die Dokumentation empfiehlt die Standard-Edition, solange du die Extras nicht brauchst. Go brauchst du nur, um Hugo aus dem Quellcode zu bauen oder Hugo Modules zu nutzen. Die Installationsanleitung listet alle Plattformen.

Ist Hugo wirklich schnell?

Die Build-Geschwindigkeit ist Hugos wichtigstes Verkaufsargument, aber Zahlen aus dem Netz solltest du mit Vorsicht lesen. Die Dokumentation beschreibt die Geschwindigkeit nur qualitativ und nennt keinen Benchmark; deine Build-Zeit hängt von Seitenzahl, Template-Komplexität, Bildverarbeitung und Rechner ab. Miss deinen eigenen Build, bevor du Generatoren vergleichst. Und ein schneller Build macht noch keine schnelle Site: Besucher spüren nur, was du auslieferst, also HTML, CSS, JavaScript und Bilder.

Beispiel: eine Dokumentationsseite

Ein Team pflegt 300 Markdown-Seiten in Git. Jeder Push startet einen CI-Job, der hugo --minify ausführt und public/ bei einem statischen Host hinter einem CDN hochlädt. Die Hosting-Anleitung von Hugo nennt unter anderem AWS Amplify, Azure Static Web Apps, Cloudflare, Firebase, GitHub Pages, GitLab Pages, Netlify, Render, Vercel sowie rsync oder FTP. Es gibt keinen Anwendungsserver, den du patchen oder skalieren müsstest.

Häufige Fehler

• Schwebende Theme-Versionen. Ein Theme-Update kann dein Layout verändern. Pinne den Theme-Commit oder die Modulversion.
• Entwürfe vergessen. Fehlt eine Seite live, steht sie meist noch auf draft = true.
• Extended-Funktionen mit der Standard-Binary. Prüfe, welche Edition deine CI installiert, nicht nur dein Laptop.
• Laufzeitverhalten erwarten. Hugo hat keine Server-Laufzeit. Formulare, Suche und Kommentare brauchen einen Drittdienst oder eine Serverless-Funktion; für Rendering pro Anfrage passt eher Server-Side Rendering.
• Bild-Cache in der CI ignorieren. Verarbeitete Bilder liegen im Verzeichnis resources. Sichere es zwischen Builds, sonst macht die CI die Arbeit jedes Mal neu.
• Veraltete Inhalte. Daten sind zum Build-Zeitpunkt eingefroren, ein Headless-CMS braucht daher einen Webhook, der einen Rebuild auslöst.

Hugo, Performance-Tests und Monitoring

Statische Ausgabe nimmt den Anwendungsserver aus dem Anfragepfad, trotzdem kann die Seite durch schwere Bilder, Drittanbieter-Skripte oder einen schlecht konfigurierten Cache langsam sein. Führe nach jedem Deployment ein Lighthouse-Audit aus und beobachte die Core Web Vitals. LoadFocus Page Speed Monitoring führt geplante Lighthouse-Audits aus 25 Cloud-Regionen aus und alarmiert dich, wenn sich ein Wert verschlechtert. Zur Einrichtung siehe Core Web Vitals mit Alerts und Reports überwachen (auf Englisch), für die Behebung 10 Wege, die Website-Geschwindigkeit zu verbessern (auf Englisch).

Häufige Fragen: Hugo

Ist Hugo kostenlos?

Ja. Hugo ist Open Source, du zahlst nur für den Ort, an dem du die generierten Dateien hostest.

Muss ich Go können, um Hugo zu nutzen?

Du musst weder Go installieren noch Go schreiben, um eine Site zu bauen. Für eigene Layouts musst du aber Hugos Go-Template-Syntax lernen, das ist die steilste Stelle der Lernkurve. Mit einem Theme kannst du ohne eigene Templates starten.

Standard- oder Extended-Edition?

Starte mit der Standard-Edition. Wechsle nur zu Extended, wenn ein Theme oder deine Asset-Pipeline es braucht, zum Beispiel LibSass, und nimm für neue Sass-Arbeit lieber Dart Sass.

Kann Hugo Server-Side Rendering?

Nein. Hugo erzeugt Dateien zur Build-Zeit. Für dynamische Seiten ergänzt du clientseitiges JavaScript oder Serverless-Funktionen oder wählst ein Framework, das auf dem Server rendert.

Wo kann ich eine Hugo-Site hosten?

Überall, wo statische Dateien ausgeliefert werden: Cloudflare, Netlify, GitHub Pages, GitLab Pages, Vercel, AWS Amplify oder dein eigener S3-Bucket mit CDN, unter anderem.

Unterstützt Hugo mehrere Sprachen?

Ja. Hugo hat eingebaute Mehrsprachigkeit, mit übersetzten Inhalten und Übersetzungstabellen im Verzeichnis i18n.