Eleventy (11ty)

Was ist Eleventy (11ty)?

Eleventy, oft als 11ty geschrieben, ist ein JavaScript static site generator. Das Tool nimmt einen Ordner mit Inhaltsdateien wie Markdown-Dokumenten, HTML-Seiten und Vorlagen und erzeugt daraus fertige statische HTML-Seiten, die von jedem Webserver oder Content Delivery Network ausgeliefert werden koennen. Eleventy laeuft vollstaendig zur Build-Zeit auf Ihrem Rechner oder in einer Continuous-Integration-Pipeline. Das Ergebnis ist reines HTML und CSS, und nur dann JavaScript, wenn Sie es selbst hinzufuegen. Auf Node.js aufgebaut, zwingt Eleventy kein Frontend-Framework auf und bindet Sie nicht an eine einzige Vorlagensprache.

Was ist ein static site generator?

Ein static site generator erzeugt eine vollstaendige Website im Voraus, statt jede Seite bei jeder Anfrage neu zusammenzusetzen. In einem klassischen dynamischen Stack fuehrt ein Server bei jedem Aufruf Code aus und fragt eine Datenbank ab. Bei einem static site generator geschieht diese Arbeit einmal waehrend des Builds, und das Ergebnis ist eine Sammlung fertiger HTML-Dateien. Es gibt keine Datenbank zur Laufzeit und eine sehr kleine Angriffsflaeche. Statische Dateien lassen sich zudem hervorragend am Edge zwischenspeichern, weshalb solche Seiten bei Performance- und Core-Web-Vitals-Messungen oft sehr gut abschneiden.

Wie Eleventy arbeitet: die Datenkaskade

Die zentrale Idee hinter Eleventy ist die Datenkaskade. Jede Seite kann Daten aus mehreren Quellen erhalten, die Eleventy in einer festen Reihenfolge zusammenfuehrt: Front Matter einer Vorlage, JSON- oder JavaScript-Datendateien, zur Build-Zeit berechnete Werte und Datendateien auf Verzeichnisebene. Quellen mit hoeherer Prioritaet ueberschreiben solche mit niedrigerer. Beim Build liest Eleventy jede Eingabedatei, loest ihre Daten ueber die Kaskade auf, fuehrt die gewaehlte Template-Engine aus und schreibt das Ergebnis in ein Ausgabeverzeichnis, das standardmaessig _site heisst.

Unterstuetzte Vorlagensprachen

Eine grosse Staerke von Eleventy ist die Unterstuetzung vieler Vorlagensprachen, die sich in einem Projekt kombinieren lassen.

• Markdown fuer lange Inhalte wie Artikel und Dokumentation.
• Nunjucks und Liquid fuer Layouts, Schleifen und Bedingungen.
• HTML fuer Seiten ohne jegliche Vorlagenlogik.
• JavaScript und WebC fuer volle programmatische Kontrolle.

Zero-Config-Philosophie

Eleventy laeuft ohne Konfiguration. Richten Sie es auf einen Ordner mit Dateien, und es erzeugt eine Website. Waechst das Projekt, fuegen Sie eine einzige Konfigurationsdatei aus reinem JavaScript hinzu, ueblicherweise .eleventy.js genannt. Dort registrieren Sie Shortcodes, Filter, Plugins, Collections und Regeln fuer statische Assets. Komplexitaet kommt erst dann hinzu, wenn das Projekt sie wirklich braucht.

Collections und Pagination

Collections gruppieren zusammengehoerende Inhalte. Jede Menge von Seiten mit demselben Tag, etwa alle mit blog markierten Beitraege, wird automatisch zu einer Collection, ueber die Sie iterieren koennen, um Uebersichtsseiten, Navigationen und Feeds zu erzeugen. Die Pagination teilt eine grosse Collection auf mehrere Seiten auf und kann pro Datensatz eine eigene statische Seite generieren.

Warum Eleventy waehlen

Entwickler greifen zu Eleventy, wenn sie Geschwindigkeit und Kontrolle ohne das Gewicht eines vollstaendigen Frontend-Frameworks wollen. Da standardmaessig keine Client-Laufzeit ausgeliefert wird, sind die Seiten schlank: kein Hydration-Schritt, kein grosses JavaScript-Bundle. Das mentale Modell ist klein: Inhalt plus Vorlagen plus Daten ergibt HTML. Fuer inhaltsgetriebene Seiten bedeutet das schnellere Builds und weniger Wartung.

Eleventy im Vergleich

Eleventy ist ein reiner static site generator, waehrend einige Alternativen ein Client-Framework oder eine Server-Laufzeit mitbringen.

Hugo ist in Go geschrieben und fuer sehr schnelle Builds bekannt. Next.js und Gatsby setzen auf React und eignen sich fuer reichhaltige Single-Page-Erlebnisse. Astro liegt Eleventy nahe, ergaenzt aber ein Komponentenmodell mit partieller Hydration. Eleventys Alleinstellungsmerkmal ist Minimalismus.

Typische Anwendungsfaelle

Eleventy passt zu Inhalten, die einmal geschrieben und oft gelesen werden: private und geschaeftliche Blogs, technische Dokumentation, Produkt- und Marketing-Seiten, Changelogs, Portfolios und Wissensdatenbanken. All das laesst sich als statische Dateien zu einem Host oder CDN ausliefern, ohne eine laufende Anwendung.

Performance-Vorteile

Statische Ausgabe ist die Grundlage der Performance von Eleventy. Vorgerendertes HTML kann sofort aus einem Cache nahe am Besucher ausgeliefert werden, was die Time to First Byte verkuerzt und dem Largest Contentful Paint hilft. Da standardmaessig kein Framework-JavaScript geladen wird, hat der Browser wenig zu tun. Ein schneller Generator ist jedoch nur ein Ausgangspunkt: die reale Geschwindigkeit haengt weiter von Bildgroessen, Drittanbieter-Skripten und Hosting ab, daher sollten Sie eine erzeugte Seite unter realistischen Bedingungen messen und Core Web Vitals sowie Lasttests pruefen.

Erste Schritte im Ueberblick

Da Eleventy auf Node.js laeuft, installieren Sie es zunaechst mit einem Paketmanager in ein Projekt. Danach legen Sie einen Ordner mit Inhalten an, fuegen optional eine Konfigurationsdatei hinzu und fuehren den Build-Befehl aus. Eleventy enthaelt zudem einen Entwicklungsserver mit automatischem Neuladen, sodass Sie Aenderungen lokal vorschauen koennen.

Zu beachtende Grenzen

Eleventy ist nicht fuer jedes Projekt das richtige Werkzeug. Inhalte, die sich bei jeder Anfrage aendern muessen, etwa ein personalisiertes Dashboard, benoetigen ein dynamisches Backend oder Client-Code. Sehr grosse Seiten koennen lange Build-Zeiten haben, auch wenn inkrementelle Builds helfen. Zudem setzt Eleventy Vertrautheit mit dem Node.js-Umfeld voraus.

FAQ zu Eleventy

Ist Eleventy kostenlos?

Ja. Eleventy ist Open Source und kostenlos nutzbar, auch fuer kommerzielle Projekte. Sie installieren es als Node.js-Paket und fuehren es lokal oder in einer Build-Pipeline aus.

Muss ich React koennen, um Eleventy zu nutzen?

Nein. Eleventy verwendet kein React und kein Client-Framework. Sie arbeiten mit Vorlagensprachen wie Markdown, Nunjucks und Liquid und fuegen JavaScript nur dort hinzu, wo eine Funktion es braucht.

Was ist der Unterschied zwischen Eleventy und WordPress?

WordPress erzeugt Seiten dynamisch aus einer Datenbank bei jeder Anfrage, waehrend Eleventy jede Seite zur Build-Zeit als statisches HTML vorrendert. Eleventy-Seiten haben keine Datenbank zu pflegen, Inhaltsaenderungen erfordern jedoch einen neuen Build.

Kann Eleventy grosse Websites bewaeltigen?

Eleventy kann Seiten mit tausenden Unterseiten bauen. Bei sehr grossen Projekten koennen vollstaendige Rebuilds Zeit kosten, weshalb Teams inkrementelle Builds nutzen. Wo reine Build-Geschwindigkeit oberste Prioritaet hat, bevorzugen manche Teams Hugo.

Verbessert Eleventy das SEO?

Eleventy bewertet Seiten nicht selbst, aber das schnelle, saubere HTML laesst sich leicht crawlen und schneidet oft gut bei Core Web Vitals ab. Guter Inhalt und korrekte Metadaten bleiben entscheidend.

Worin unterscheidet sich Eleventy von Next.js?

Next.js ist ein React-Framework, das serverseitig rendern kann und eine JavaScript-Laufzeit an den Browser liefert. Eleventy ist ein reiner static site generator ohne Client-Framework. Waehlen Sie Eleventy fuer inhaltsgetriebene Seiten und Next.js fuer eine reichhaltige React-Anwendung.