5 Min. Lesezeit

Hugo Development Server – Lokal und im Netzwerk testen

Hugo bietet vielfältige Möglichkeiten zum lokalen Testen – von einfachen Server-Befehlen bis hin zu Netzwerk-Tests auf verschiedenen Geräten.

hugo

Hugo bietet mit dem integrierten Development Server eine schnelle und effiziente Möglichkeit, Webseiten während der Entwicklung zu testen. Der Befehl hugo server startet einen lokalen Server mit Live Reload – Änderungen werden sofort im Browser sichtbar. In diesem Artikel schauen wir uns an, wie man den Hugo-Server optimal nutzt.

Warum Hugo?

Hugo ist einer der schnellsten Static Site Generators überhaupt. Während andere Frameworks bei jedem Build mehrere Sekunden brauchen, liefert Hugo Rebuild-Zeiten im Millisekundenbereich.

┌─────────────────────┬──────────────────┬───────────────┐
│ Generator           │ ~100 Seiten      │ ~1000 Seiten  │
├─────────────────────┼──────────────────┼───────────────┤
│ Hugo                │ < 200ms          │ < 1s          │
│ Eleventy            │ ~1s              │ ~5s           │
│ Gatsby              │ ~8s              │ ~30s          │
│ Next.js (SSG)       │ ~5s              │ ~20s          │
└─────────────────────┴──────────────────┴───────────────┘

Grundlegende Befehle

# Standard: localhost:1313
hugo server

# Mit Draft-Inhalten (während der Arbeit an neuen Artikeln)
hugo server -D

# Ohne Fast Render (vollständiger Rebuild bei jeder Änderung)
hugo server --disableFastRender

# Anderer Port (z.B. wenn 1313 belegt ist)
hugo server --port 3000

Tipp: Fast Render ist standardmäßig aktiv und baut nur die geänderte Seite neu. Das ist schnell, kann aber gelegentlich zu veralteten Daten in Listenansichten führen. Bei unerwartetem Verhalten hilft --disableFastRender.

Testen auf verschiedenen Geräten

Ein oft unterschätztes Feature: Man kann die Hugo-Seite direkt auf Smartphone, Tablet oder anderen Rechnern im lokalen Netzwerk testen. Ideal für Responsive Design.

1. Eigene IP-Adresse ermitteln

# macOS
ipconfig getifaddr en0

# Linux
hostname -I

# Windows (PowerShell)
(Get-NetIPAddress -AddressFamily IPv4).IPAddress

2. Server mit Netzwerkzugriff starten

hugo server --bind 0.0.0.0 --baseURL http://<DEINE_IP>:1313

Beispiel-Output:

hugo server --bind 0.0.0.0 --baseURL http://192.168.178.42:1313

                   | DE
-------------------+-----
  Pages            | 45
  Paginator pages  |  2
  Non-page files   |  0
  Static files     | 32
  Processed images |  8
  Aliases          | 12
  Sitemaps         |  1
  Cleaned          |  0

Built in 156 ms
Web Server is available at http://192.168.178.42:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop

Jetzt kann die Seite von jedem Gerät im selben WLAN aufgerufen werden.

Mein Setup für Cross-Device Testing

hugo server \
  --bind 0.0.0.0 \
  --baseURL http://$(ipconfig getifaddr en0):1313 \
  -D \
  --disableFastRender \
  --noHTTPCache

Das kombiniert:

  • Netzwerkzugriff für alle Geräte
  • Automatische IP-Erkennung (macOS)
  • Draft-Inhalte
  • Vollständigen Rebuild
  • Deaktiviertes Browser-Caching

Alle wichtigen Flags

┌──────────────────────────┬──────────────────────────────────────────────┐
│ Flag                     │ Beschreibung                                 │
├──────────────────────────┼──────────────────────────────────────────────┤
│ -D, --buildDrafts        │ Auch Entwürfe rendern                        │
│ -E, --buildExpired       │ Abgelaufene Inhalte einschließen             │
│ -F, --buildFuture        │ Zukünftige Inhalte einschließen              │
│ --disableFastRender      │ Vollständiger Rebuild bei Änderungen         │
│ --noHTTPCache            │ Browser-Caching deaktivieren                 │
│ --navigateToChanged      │ Automatisch zur geänderten Seite navigieren  │
│ --gc                     │ Garbage Collection nach Build ausführen      │
│ --bind <IP>              │ Server an bestimmte IP binden                │
│ --baseURL <URL>          │ Base-URL für Links setzen                    │
│ --port <Port>            │ Anderer Port (Standard: 1313)                │
│ --renderStaticToDisk     │ Static Files auf Disk statt in Memory        │
│ --poll <Dauer>           │ Polling statt fsnotify (z.B. für Docker)     │
│ --templateMetrics        │ Template-Rendering-Zeiten anzeigen           │
│ --templateMetricsHints   │ Optimierungshinweise für Templates           │
└──────────────────────────┴──────────────────────────────────────────────┘

Hugo-Umgebungen nutzen

Hugo unterstützt verschiedene Umgebungen, die das Verhalten beeinflussen:

# Entwicklung (Standard bei hugo server)
hugo server -e development

# Produktion simulieren (Minification, keine Drafts)
hugo server -e production

# Eigene Umgebung
hugo server -e staging

In den Templates kann man darauf reagieren:

{{ if eq hugo.Environment "production" }}
  <!-- Analytics nur in Produktion -->
  <script async src="/js/analytics.js"></script>
{{ end }}

{{ if eq hugo.Environment "development" }}
  <!-- Debug-Info nur in Entwicklung -->
  <div class="debug-bar">
    Template: {{ .Layout }} | Type: {{ .Type }}
  </div>
{{ end }}

Performance-Debugging

Wenn der Build langsam wird:

# Template-Rendering-Zeiten anzeigen
hugo server --templateMetrics

# Ausgabe:
# Template Metrics:
#   baseof.html: 12ms (42 calls)
#   partials/head.html: 8ms (42 calls)
#   _default/list.html: 3ms (5 calls)

# Mit Optimierungshinweisen
hugo server --templateMetricsHints

# Memory-Profiling
hugo server --memprofile mem.pprof

# CPU-Profiling
hugo server --cpuprofile cpu.pprof

Typische Performance-Killer

  1. Zu viele where-Queries in Partials – partialCached nutzen
  2. Unoptimierte Bilder – Hugo Image Processing verwenden
  3. Komplexe Taxonomien – Nur notwendige Taxonomien definieren
  4. Große Dateien in static/ – Verlangsamen den Datei-Watch

Hugo Modules und Live Reload

In manchen Umgebungen (Docker, VM, Netzlaufwerke) funktioniert Filesystem-Watching nicht zuverlässig. Hier hilft Polling:

hugo server --poll 1s

Automatisierung mit Makefile

Für wiederkehrende Befehle:

.PHONY: dev dev-network build clean

# Lokaler Server
dev:
	hugo server -D --disableFastRender --noHTTPCache

# Server im Netzwerk
dev-network:
	hugo server -D --disableFastRender --noHTTPCache \
		--bind 0.0.0.0 \
		--baseURL http://$$(ipconfig getifaddr en0):1313

# Produktions-Build
build:
	hugo --minify --gc

# Build-Artefakte aufräumen
clean:
	rm -rf public/ resources/_gen/

Deployment-Workflow

Nach dem lokalen Testen folgt der Build und das Deployment:

# 1. Produktions-Build erstellen
hugo --minify --gc

# 2. Build-Output prüfen
ls -la public/

# 3. Per RSYNC deployen
rsync -avz --delete public/ user@server:/var/www/html/

# Oder als Shell-Script (deploy.sh.sh)
#!/bin/bash
hugo --minify --gc
rsync -avz --delete public/ user@notetheco.de:/var/www/html/
echo "Deployed!"

Fazit

Der Hugo Development Server ist extrem schnell und bietet alles für die lokale Entwicklung:

  • hugo server für den schnellen Start
  • -D um Drafts mitzubauen
  • --bind 0.0.0.0 für Cross-Device Testing im Netzwerk
  • --disableFastRender wenn etwas nicht aktualisiert wird
  • --templateMetrics wenn der Build langsam wird
  • Umgebungen nutzen um Development und Production zu trennen

Hugo macht die lokale Entwicklung so angenehm, dass man kaum auf den Build warten muss – und genau das ist der Grund, warum ich Hugo für diesen Blog gewählt habe.