© GoodStudio/Shutterstock.com
Ein Blick auf den Static-Site-Generator

Einen Blog mit Eleventy erstellen


Static-Site-Generatoren gibt es schon seit Jahren (z. B. Hugo, Jekyll, ...) und mit dem Erfolg des JAMStack haben sie nochmal an Popularität dazugewonnen. Im letzten Jahr hat sich besonders Eleventy hervorgetan, was Grund genug sein sollte, es sich einmal genauer anzusehen.

Für mich war die Suche nach der richtigen technischen Lösung, um meine Seite im Internet verfügbar zu machen, ein beständiges Problem, das ich über unterschiedliche Tools zu lösen versucht habe. Natürlich fing alles irgendwann mit der ersten eigenen, natürlich von Hand geschriebenen HTML-Seite an, die aber schnell durch technischere Lösungen ersetzt wurde. Nach den ersten Schritten landete wahrscheinlich jeder bei WordPress. Hier fühlte ich mich für viele Jahre relativ frei in der Gestaltung der Seite und hinsichtlich der technischen Anpassungsmöglichkeiten. Der Aufwand für die die Pflege von Versionen, Plug-ins und diversen Sicherheitsproblemen war jedoch auch nicht zu unterschätzen.

Mit dem Erscheinen des JAMStacks [1] änderte sich dann auch mein Blick auf die eigene Seite: Es gibt für mich keinen Grund, warum immer, wenn eine neue Seite angefordert wird, auch eine Datenbankanfrage notwendig ist, um die Seite dynamisch zu erzeugen. Auch Inhalte aus anderen Quellen, bei mir der eigene Podcast, bleiben nach der Veröffentlichung statische Seiten. Es reicht hier also vollkommen, diese einmal zu erzeugen und als HTML auf einem Server abzulegen.

Den JAMStack sollte man nicht nur auf Blogs und eher contentlastige Webseiten beschränken: Immer, wenn man Daten nicht dynamisch berechnen muss, sondern sie während des Build-Prozesses vorliegen hat, kann man sie auch schon vorab statisch erstellen. Das spart viel Aufwand beim Betrieb und womöglich auch Kosten für Server und Datenbanken. Mit dem JAMStack kamen zahlreiche Static-Site-Generatoren auf den Markt. Einer davon ist Eleventy (11ty), den ich selbst gern verwende und heute vorstellen möchte [2]. In diesem Artikel erkläre ich, was Eleventy ist und wie man damit eine einfache Seite erzeugt. Aus dieser erzeugen wir dann in einem weiteren Schritt einen Blog und lernen dabei ein paar nützliche Hilfsmittel von Eleventy kennen.

Static-Site-Generator

Bei klassischen Webseiten nutzen wir einen Webserver, um Seiten zu generieren. Hierbei werden in aller Regel Seiten dynamisch aus Templates erstellt, die mit Daten angereichert werden. Bei statischen Seiten verlagern wir diese Erzeugung in den Build-Prozess. Wir erzeugen also statische HTML-Dateien ebenso aus vordefinierten Templates und reichern diese mit Daten an. Der JAMStack, den ich im Entwickler Magazin 2.2021 bereits beschrieben habe, lässt sich also mit einem Static-Site-Generator einfach realisieren.

Eleventy

Eleventy wurde als JavaScript-Alternative zu Jekyll [3], das in Ruby geschrieben wurde, entwickelt. Eleventy kommt grundsätzlich ohne Konfigurationsdatei aus und unterstützt zahlreiche Templateformate:

  • HTML *.html

  • Markdown *.md

  • JavaScript *.11ty.js

  • Liquid *.liquid

  • Nunjucks *.njk

  • Handlebars *.hbs

  • Mustache *.mustache

  • EJS *.ejs

  • Haml *.haml

  • Pug *.pug

In der täglichen Arbeit stechen für mich die einfache Projektstruktur und der Umgang mit unterschiedlichen Datenquellen hervor. Eleventy fühlt sich schlank an und kann gut an APIs angebunden werden. Auch wenn man bei der Konfiguration irgendwann nicht mehr an JavaScript vorbeikommt, kommt beim Anwender am Ende eine statische HTML-Seite an und in aller Regel keine Single-Page Application.

Eine Seite mit Eleventy erstellen

Um eine Seite mit Eleventy zu erzeugen, benötigen wir eine Markdown-Datei (oder eine Datei in einem der unterstützen Formate) und Eleventy selbst. Es kann via npm install -g @11ty/eleventy global installiert oder direkt mit npx eingesetzt werden. Aber fangen wir bei der Markdown-Datei an. Diese könnte folgendermaßen aussehen:

# Hallo Welt! Diese Seite wurde mit [eleventy](https://11ty.dev) erzeugt

Die Datei speichern wir in einem leeren Verzeichnis als index.md ab und nutzen dann Eleventy, um daraus eine HTML-Datei zu erstellen: npx @11ty/eleventy.

Im Terminal sehen# wir, dass eine Datei index.html im Verzeichnis _site erstellt wurde. Und wie zu erwarten war, entspricht das erzeugte Markup unserer Markdown-Datei:

<h1>Hallo Welt!</h1> <p>Diese Seite wurde mit <a href="https://11ty.dev">eleventy</a> erzeugt</p>

Nun können wir jedes Mal, wenn wir etwas geändert haben, die Seite neu bauen, oder wir nutzen Eleventy, um das für uns zu tun. Zudem kann Eleventy einen Server für uns starten, der das Ergebnis ausliefert: npx @11ty/eleventy --serve.

Standardmäßig wird die Seite auf Port 8080 zur Verfügung gestellt. Das Ergebnis ist für den Anfang schon ganz gut und ich nutze hin und wieder Eleventy, um aus einer Markdown-Datei das passende HTML zu generieren. Für eine richtige Seite reicht diese Lösung allerdings sicherlich noch nicht aus: Wir brauchen hier noch einen vernünftigen Rahmen für unsere HTML-Datei und somit ein passendes Template. Dafür setzen wir in diesem Beispiel Nunjucks als Template-Engine ein.

Layoutdateien

Nunjucks kann Layouts erzeugen. Diese werden bei Eleventy im Ordner _includes abgelegt und können dann aus der Seite heraus referenziert werden. In unserem Fall legen wir die Datei layout.njk im Ordner _includes mit dem Inhalt aus Listing 1 an.

Listing 1

<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>{{ title }}</title> <meta name="description" content="Our first eleventy page"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <main> {% block content %} {{ content | safe }} {% endblock %} </main> </body> </html>
  1. {{ title }} und {{ content }} erlauben es uns, Inhalte im Layout von außen zu definieren.

  2. Wir definieren mit {% block content %} einen Bereich in der Webseite, den wir später noch füllen können, wenn wir ein weiteres Layout benötigen.

Wir wollen auch verhindern, dass unser Inhalt doppelt in Anführungszeichen dargestellt wird. Nunjucks bringt hier den safe-Filter, den wir uns später ansehen werden.

Aber wie teilen wir nun unserer Seite erst einmal mit, welches Layout sie nutzen soll? Hier erfindet Eleventy natürlich nicht das Rad neu, sondern erlaubt wie zahlreiche andere Static-Site-Generatoren die Verwendung von Front Matter. Front Matter ist ein Block von Metadaten, die am Anfang der Datei eingefügt werden. In aller Regel geschieht das im YAML-Format.

In unserer Seite definieren wir in Front Matter nun die Layoutdatei, die Eleventy im _incl...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang