Static Site Generators im Vergleich, mit gemessenen Build-Zeiten
Static Site Generators im Vergleich
Static Site Generators im Vergleich: Astro vs Hugo vs Eleventy, Build-Zeiten | We.Inc
Astro, Hugo, Eleventy, Next.js Static Export und Jekyll im Vergleich, mit Build-Zeiten, gemessen an denselben 1,000 Markdown-Posts, einer Feature-Tabelle und demselben Post-Template in jedem Tool.
Ein Static Site Generator macht beim Build aus Markdown und Templates reine HTML-Dateien, die jeder Host und jedes CDN schnell ausliefern kann. Hugo baut am schnellsten; in unserem Test machte es aus 1,000 Posts in weniger als einer halben Sekunde fertige Seiten. Eleventy ist am flexibelsten, und Astro passt am besten, wenn einige Teile interaktive Komponenten brauchen.
Die Wahl in einer Zeile
Wenn du
Nimm
die schnellsten Builds für Tausende Seiten willst
Hugo
reines JavaScript und wenige Vorgaben willst
Eleventy
einige interaktive Komponenten brauchst
Astro
schon eine React- oder Next.js-Codebasis hast
Next.js Static Export
Wir haben Astro, Eleventy und Hugo dieselben 1,000 Markdown-Posts gegeben und jeweils drei saubere Builds gemessen, damit die Zahlen wirklich vergleichbar sind. Unter den Ergebnissen zeigt dieselbe Post-Seite in jedem Tool, wie sich die Arbeit damit anfühlt.
Schreibe Inhalte als Markdown-Dateien mit Front Matter.
Schreibe ein Template, das jeden Post in dein Seitenlayout einbettet.
Starte den Build; jede Datei wird zu einer HTML-Seite.
Lade den Ausgabeordner auf einen beliebigen statischen Host oder ein CDN hoch.
Die Build-Zeit zählt vor allem bei großen Websites und Preview-Deploys; unter ein paar hundert Seiten sind alle diese Tools schnell.
Lege Bilder nicht in Markdown-Ordner, die unverändert kopiert werden; lass die Bild-Pipeline des Tools sie skalieren.
Richte von Anfang an eine Sitemap und Canonical-URLs ein; die meisten Generatoren haben für beides ein Plugin.
Für Redakteure ohne Technikkenntnisse kombinierst du den Generator mit einem Headless- oder Git-basierten CMS.
Häufige Fragen
Was ist der Jamstack?
Eine Art, Websites als vorab gebautes HTML, CSS und JavaScript aus einem CDN auszuliefern, wobei dynamische Funktionen über APIs hinzukommen. Static Site Generators erzeugen den vorab gebauten Teil.
Ist Hugo schneller als Astro?
Bei reinen Markdown-Seiten ja, in unserem Test mit großem Abstand: etwa 0.3 Sekunden gegenüber etwa 1 Sekunde für 1,000 Posts, sobald die Caches warm sind. Astro erledigt pro Seite mehr, etwa typgeprüfte Inhalte und das Rendern von Komponenten.
Kann eine statische Website Formulare und Suche haben?
Ja. Formulare können an einen Formulardienst oder eine Serverless-Funktion senden, und die Suche kann im Browser über einen vorab gebauten Index laufen. Für beides braucht es keinen klassischen Server.
Ist eine statische Website gut für SEO?
Sehr. Jede Seite ist schon beim ersten Laden vollständiges HTML, schnell ausgeliefert und für Crawler leicht zu lesen. Gute Titel, Beschreibungen, interne Links und eine Sitemap brauchst du trotzdem.
Wann du keinen Generator nutzen solltest
Wenn die Leute, die die Website pflegen, mit Markdown und Git nicht vertraut sind, ersparen dir ein gehosteter Website-Baukasten oder ein CMS mit visuellem Editor viel Hilfestellung. Generatoren glänzen, wenn Entwickler die Website verantworten oder ein CMS sie mit Inhalten füttert.
Build-Zeiten, gemessen
Dieselben 1,000 Posts in jedem Tool, Ausgabe vor jedem Lauf gelöscht. Wiederholte Läufe sind schneller, weil die Tools und das Betriebssystem warme Caches haben.
Gemessen: 1,000 Markdown-Posts zu HTML (Sekunden)
Generator
Erster Lauf
Wiederholte Läufe
Hugo 0.167
Eleventy 3.1
Astro 7.3
0.97 bis 1.01
Wie sie sich unterscheiden
Direkt nebeneinander
Astro
Hugo
Eleventy
Next.js Export
Jekyll
Sprache
JavaScript / TypeScript
Go (eine einzige Binärdatei)
JavaScript
JavaScript / TypeScript
Ruby
Templates
.astro, dazu React, Vue, Svelte
Go-Templates
Nunjucks, Liquid, WebC, JS und mehr
React
Liquid
Standardmäßig ausgeliefertes JavaScript
Keins
Keins
Keins
React-Runtime
Keins
Interaktive Teile
Islands mit Client-Direktiven
Eigene Skripte einbinden
Eigene Skripte oder WebC einbinden
Jede React-Komponente
Eigene Skripte einbinden
Lizenz
MIT
Apache-2.0
MIT
MIT
MIT
Ideal für
Content-Websites, die ein paar interaktive Teile brauchen
Sehr große Websites, schnelle Builds
Flexible, schlanke Websites
React-Teams, die statische Ausgabe wollen
Blogs auf GitHub Pages
Dieselbe Post-Seite in jedem Tool
Astro: eine Blogpost-Seite aus einer Content Collection
Die Collection prüft das Front Matter jedes Posts gegen ein Schema, und getStaticPaths erzeugt beim Build eine Seite pro Post.
Eleventy: ein Layout für jeden Post in einem Ordner
Eine posts.json-Datei im Ordner wendet das Layout über die Data Cascade von Eleventy auf jede Markdown-Datei darin an.
Hugo: ein Template für Einzelseiten
Hugo wählt dieses Template für jede Seite in content/. .Content ist das gerenderte Markdown.
Next.js: Static Export
Wenn du output auf export setzt, schreibt der Build reine HTML-Dateien in den Ordner out. Funktionen, die einen Server brauchen, etwa Server Actions und Rendering auf Abruf, sind in diesem Modus nicht verfügbar.