Eleventy (11ty)

Was ist Eleventy (11ty)?

Eleventy (11ty) ist ein Static-Site-Generator in JavaScript, der auf Node.js läuft. Er liest Inhalte und Template-Dateien, etwa Markdown, Nunjucks oder Liquid, und schreibt reine statische HTML-Dateien in einen Ausgabeordner (standardmäßig _site), den Sie bei jedem Webhoster oder CDN hochladen können.

Er gehört zur selben Familie wie Hugo und Astro: Die Arbeit passiert beim Build. Besucher erhalten eine fertige Datei statt einer Seite, die bei jeder Anfrage neu zusammengesetzt wird. Den allgemeinen Ansatz erklärt Static Site Generation (SSG).

Wie Eleventy arbeitet

Eleventy liest ein Eingabeverzeichnis (standardmäßig das aktuelle), macht aus jedem Template eine oder mehrere Seiten und schreibt sie ins Ausgabeverzeichnis. Layouts umrahmen den Inhalt, und Daten aus mehreren Quellen werden vor dem Rendern zusammengeführt. Eleventy nennt das die Datenkaskade. Definieren zwei Quellen denselben Schlüssel, gewinnt die höhere. Von der höchsten zur niedrigsten Priorität:

• Berechnete Daten (Computed Data)
• Front Matter im Template selbst
• Daten-Dateien zum Template
• Verzeichnis-Daten-Dateien, auch aus übergeordneten Ordnern
• Front Matter in Layouts
• Globale Daten aus der Konfiguration
• Globale Daten-Dateien

Die Konfiguration steht in einer JavaScript-Datei, die Eleventy selbst findet, zum Beispiel eleventy.config.js. Die Variante .mjs wird ab Eleventy 3 unterstützt.

Unterstützte Template-Sprachen

Eleventy zwingt Sie nicht auf eine Template-Sprache. Laut Dokumentation unterstützt es HTML, Markdown, MDX, JavaScript, JSX, TypeScript, WebC, Nunjucks, Liquid, Handlebars, Mustache, EJS, HAML, Pug und Sass, und eigene Sprachen lassen sich ergänzen. Sie können sie in einem Projekt mischen und eine alte Website so Template für Template migrieren.

Collections und Pagination

Collections gruppieren Inhalte. Geben Sie Seiten im Front Matter denselben String bei tags, erscheinen sie gemeinsam in collections.<tag>; collections.all enthält standardmäßig alles. Tags dienen nur dazu, Collections zu bilden, sie sind keine Kategorie-Hierarchie.

Pagination macht aus einem Template viele Seiten. Sie fügen einen pagination-Block mit einer data-Quelle, einer size und meist einem permalink hinzu. Bei vier Einträgen und der Größe zwei schreibt Eleventy zwei Seiten und gibt jeder ihre Einträge plus Links zur vorherigen und nächsten Seite mit.

Beispiel: ein kleiner Blog

Legen Sie Markdown-Beiträge in einen Ordner posts, geben Sie jedem tags: post und ein Layout und ergänzen Sie ein Index-Template, das über collections.post iteriert. Nach dem Build enthält der Ausgabeordner pro Beitrag eine HTML-Datei plus eine Übersichtsseite. Laden Sie den Ordner hoch, und die Website ist live. Ein Anwendungsserver muss nicht laufen.

Häufige Fehler

• Funktionen zur Anfragezeit erwarten. Eine generierte Website rendert nicht auf dem Server, deshalb brauchen Formulare, Suche, Kommentare und Logins einen Drittanbieter-Dienst oder eine Serverless-Funktion. Wenn Seiten pro Anfrage entstehen sollen, schauen Sie sich Server-Side Rendering (SSR) an.
• Tags als Kategorien behandeln. Sie bilden nur Collections, planen Sie Ihre eigene Taxonomie im Front Matter oder in Daten-Dateien.
• Von der Priorität der Datenkaskade überrascht werden. Ein Wert im Front Matter schlägt einen aus einer Verzeichnis-Daten-Datei, und berechnete Daten schlagen beide. Prüfen Sie die Reihenfolge oben, bevor Sie einen Wert debuggen, der sich nicht ändert.
• Viel Client-JavaScript wieder einbauen. Der Geschwindigkeitsvorteil kommt davon, wenig Skript auszuliefern. Messen Sie, bevor Sie Bundles hinzufügen.

Eleventy, Lasttests und Monitoring

Eine statische Website hinter einem CDN bricht unter Last selten zusammen. Ein Lasttest der ganzen Seite bringt deshalb meist weniger als Tests der nicht statischen Teile: Formular-Handler, Such-Endpunkte und Serverless-Funktionen. Nutzen Sie für diese Endpunkte LoadFocus Load Testing und API-Monitoring, um sie zwischen den Releases zu überwachen.

Da die Ausgabe reines HTML ist, hängt die Ladezeit vor allem von Assets und Hosting ab. Page-Speed-Monitoring verfolgt Lighthouse-Werte und Core Web Vitals über die Zeit. Der (englische) Beitrag How to monitor Core Web Vitals with alerts and reports zeigt die Einrichtung.

Häufige Fragen zu Eleventy

Ist Eleventy ein Framework?

Nein. Es ist ein Build-Werkzeug, das Templates und Daten in statische Dateien verwandelt. Eleventy bringt keine eigene Front-End-Laufzeit mit, Sie entscheiden also selbst, ob Client-JavaScript dazukommt.

Was brauche ich, um Eleventy auszuführen?

Node.js. Die Dokumentation verlangt Version 18 oder höher und empfiehlt Releases mit gerader Nummer.

Kann Eleventy Seiten bei jeder Anfrage auf dem Server rendern?

Die Standardausgabe ist statisches HTML, das vorab gebaut wird. Für Rendering pro Anfrage nutzen Sie ein Framework mit Server-Rendering wie Next.js oder Nuxt oder rufen aus Ihren statischen Seiten eine Serverless-Funktion auf.

Worin unterscheidet sich Eleventy von Hugo?

Beide erzeugen statische Websites. Eleventy läuft auf Node.js und wird in JavaScript konfiguriert, mit vielen Template-Sprachen. Hugo ist ein einzelnes Go-Programm mit eigener Template-Syntax.

Wo kann ich eine Eleventy-Website hosten?

Überall, wo statische Dateien ausgeliefert werden: ein Speicher-Bucket hinter einem CDN, ein Static-Hosting-Dienst oder ein einfacher Webserver. Laden Sie den Inhalt des Ausgabeordners hoch.