Schnelle Website für 0 € im Monat: Das perfekte Setup mit Hugo & Cloudflare

Sie kennen das Problem: Eine WordPress-Seite, ständig Plugin-Updates, schlechte Ladezeiten und Core Web Vitals, die jeden Besucher verzweifeln lassen. Ich habe es satt gehabt und eine komplett neue Lösung entwickelt. Eine statische Website mit Hugo und Cloudflare Pages, die blitzschnell lädt und nichts kostet. Hier ist die detaillierte Anleitung mit Stack, Konfiguration und den wichtigsten Trade-offs.

Warum statische Websites die bessere Wahl sind

Statische Websites sind kein Relikt aus der frühen Internetzeit. Im Gegenteil: Sie bieten enorme Vorteile, besonders für Content-Projekte wie Blogs, Dokumentationen oder Affiliate-Seiten. Der Hauptgrund: Es gibt keine Datenbank, keine Serverprozesse und keine wartungsintensiven Plugins. Das bedeutet:

• Schnellere Ladezeiten: Keine Datenbankabfragen, keine PHP-Prozesse – die Seite wird direkt als HTML ausgeliefert.
• Bessere Sicherheit: Keine Angriffsfläche für SQL-Injections, Plugin-Schwachstellen oder veraltete Software.
• Geringere Kosten: Keine Servermiete, keine teuren Hosting-Pakete. Selbst kostenpflichtige Domain-Namen schlagen mit nur etwa 10 € pro Jahr zu Buche.
• Einfache Skalierung: Selbst bei hohem Traffic bleibt die Performance stabil, da der Content statisch ausgeliefert wird.

Der einzige Nachteil: Dynamische Inhalte wie Kommentare oder Benutzerkonten müssen über externe Dienste eingebunden werden. Doch für reine Content-Seiten ist das kein Problem.

Hugo vs. Next.js, Gatsby und Eleventy: Warum der Static-Site-Generator entscheidend ist

Die Wahl des richtigen Static-Site-Generators (SSG) ist entscheidend für die Performance und Entwicklungsgeschwindigkeit. Ich habe vier Optionen getestet und mich schließlich für Hugo entschieden. Hier die wichtigsten Erkenntnisse:

• Next.js: Ideal für interaktive Anwendungen, aber übertrieben für reine Content-Seiten. Der statische Export ist möglich, aber der Build-Prozess ist langsamer und der Output schwerer als nötig. Zudem stoßen die kostenlosen Bandbreitenlimits von Vercel bei höherem Traffic schnell an Grenzen.

• Gatsby: Einst der Star unter den SSGs, heute jedoch veraltet und langsam. Der GraphQL-Layer ist zwar mächtig, aber für einfache Content-Seiten unnötiger Overhead. Die Build-Zeiten werden bei größeren Projekten notorisch langsam, und das Ökosystem ist stark fragmentiert.

• Eleventy (11ty): Eine hervorragende Wahl, wenn man tief in der Node.js-Welt steckt. Es bietet maximale Flexibilität und ist extrem leichtgewichtig. Der Build-Prozess ist jedoch deutlich langsamer als bei Hugo – bei einem vergleichbaren Projekt dauerte der Build mit Eleventy 3 bis 5 Sekunden, während Hugo in unter 400 Millisekunden fertig war. Das macht einen enormen Unterschied bei der Entwicklung.

• Hugo: Der klare Sieger für Content-Seiten. Die Build-Zeiten sind atemberaubend schnell, und der Generator ist als einzelne Binärdatei verfügbar – kein node_modules, keine Abhängigkeiten, keine Kompatibilitätsprobleme. Die Go-Templating-Syntax mag anfangs gewöhnungsbedürftig sein, aber sie zahlt sich aus. Die Lernkurve ist steil, aber die Belohnung folgt schnell.

Cloudflare Pages: Hosting mit integriertem CDN und kostenlosem SSL

Cloudflare Pages ist mehr als nur ein Hosting-Anbieter. Es kombiniert Hosting, CDN, SSL und sogar Analytics in einem einzigen Service – und das alles kostenlos. Die Einrichtung ist denkbar einfach:

1. Erstellen Sie ein Cloudflare-Konto und verbinden Sie es mit Ihrem GitHub-Repository.
2. Wählen Sie im Cloudflare Pages-Dashboard „Projekt erstellen“ → „Mit Git verbinden“.
3. Wählen Sie Ihr Repository aus und konfigurieren Sie die Build-Einstellungen:

• Build-Befehl: hugo --minify
• Ausgabe-Verzeichnis: public
• Umgebungsvariable: HUGO_VERSION = 0.147.0

Ein entscheidender Punkt: Pinnen Sie die Hugo-Version. Cloudflare nutzt standardmäßig eine alte Version von Hugo, was zu Kompatibilitätsproblemen führen kann. Meine lokale Entwicklung lief problemlos, doch der Build auf Cloudflare scheiterte, weil dort Hugo 0.92 statt 0.147 verwendet wurde. Zwei Tage Debugging später war klar: Die Version muss explizit angegeben werden.

Der kostenlose Tarif bietet 500 Builds pro Monat – mehr als ausreichend für die meisten Content-Projekte. Jeder Push auf den main-Branch löst einen automatischen Build und Deployment aus, und Pull Requests erhalten eine Vorschau-URL für die Qualitätsprüfung.

Die wrangler.toml-Konfiguration: Sicherheit und Performance optimieren

Die wrangler.toml-Datei steuert, wie Cloudflare Ihre Website baut und ausliefert. Eine gut konfigurierte Datei verbessert nicht nur die Performance, sondern auch die Sicherheit. Hier die wichtigsten Einstellungen:

[build]
command = "hugo --minify"
publish = "public"

[build.environment]
HUGO_VERSION = "0.147.0"

[[headers]]
for = "/*"
[headers.values]
X-Content-Type-Options = "nosniff"
X-Frame-Options = "DENY"
Referrer-Policy = "strict-origin-when-cross-origin"
Permissions-Policy = "camera=(), microphone=(), geolocation=()"
Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' static.cloudflareinsights.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self' cloudflareinsights.com; frame-ancestors 'none';"

[[headers]]
for = "/css/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
for = "/js/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
for = "/img/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"

Was diese Konfiguration bewirkt:

• Sicherheitsheader: Schützt vor Clickjacking (X-Frame-Options), verhindert MIME-Spoofing (X-Content-Type-Options) und erzwingt HTTPS (Strict-Transport-Security).
• Content-Security-Policy (CSP): Beschränkt, welche Ressourcen geladen werden dürfen, und schützt vor Cross-Site-Scripting (XSS).
• Immutable Caching: Die max-age=31536000 und immutable-Einstellung sorgen dafür, dass Browser Dateien ein ganzes Jahr lang zwischenspeichern, ohne sie erneut zu prüfen. Das reduziert die Ladezeit erheblich, da keine Roundtrips zum Server nötig sind.

Ein Beispiel: Wenn Sie Ihre CSS-Datei aktualisieren, ändert sich der Dateiname (z. B. durch einen Hash), und der Browser lädt die neue Version. Ohne diese Strategie würde der Browser die alte Datei weiterverwenden, bis der Cache abläuft – ein häufiger Fehler bei statischen Websites.

Fazit: Das perfekte Setup für Content-Projekte

Ein statisches Website-Setup mit Hugo und Cloudflare Pages ist nicht nur kostengünstig, sondern auch performant, sicher und wartungsarm. Es eignet sich besonders für:

• Blogs und Magazin-Websites
• Dokumentationsseiten
• Affiliate-Seiten
• Projekt-Websites ohne dynamische Inhalte

Der einzige Nachteil: Dynamische Funktionen wie Kommentare oder Benutzerinteraktionen müssen über externe Dienste wie Disqus oder Firebase integriert werden. Doch für reine Content-Projekte ist dieses Setup nahezu perfekt. Wenn Sie also eine schnelle, günstige und zukunftssichere Website erstellen möchten, sollten Sie Hugo und Cloudflare Pages ernsthaft in Betracht ziehen – es könnte die beste Entscheidung für Ihr nächstes Projekt sein.