Wer nur ein Blog, eine technische Dokumentation oder eine Web-Visitenkarte online stellen möchte, der spart mit statischen Website-Generatoren viel Arbeit.

Die meisten Internet-Auftritte liefert heute ein Content-Management-System wie WordPress, Drupal oder Typo3 aus. Solche CMS lassen sich zwar komfortabel im Webbrowser bedienen, auf dem Webserver muss jedoch eine Skriptsprache wie PHP und eine Datenbank laufen. Das erschwert nicht nur die Installation, sondern auch die Wartung: Über eine Sicherheitslücke im CMS können Angreifer Informationen abfischen oder gar den Webserver übernehmen. Zudem baut ein CMS eine Seite erst dann zusammen, wenn ein Besucher sie lesen möchte. Das dynamische Erzeugen kostet nicht nur Zeit, sondern bei vielen Anfragen auch entsprechend Rechenleistung.

Erst die Arbeit

Einen anderen Weg gehen statische Website-Generatoren (englisch: Static Website Generator). Sie nehmen die Inhalte einer Website entgegen und erzeugen daraus anhand einer Designvorlage die einzelnen Webseiten des Internet-Auftritts. Das Ergebnis müssen Sie nur noch auf den eigenen Webserver hochladen.

Da die Seiten in auslieferungsfertigem Zustand vorliegen, benötigen sie weder PHP noch eine Datenbank. Der Webserver kann sie zudem deutlich schneller ausliefern als dynamisch erzeugte Pages. Obendrein lässt sich ein solcher statischer Internet-Auftritt in einem Versionskontrollsystem wie Git speichern.

Ein Static Site Generator hat aber auch Nachteile: Dynamische Funktionen, wie etwa die in Blogs beliebten Kommentare, lassen sich nicht oder nur schwer umsetzen. Einige Website-Generatoren wie Lektor [1] oder Pelican [2] binden dazu beispielsweise externe Dienste ein. Die Kommentarfunktion stellt dann Disqus bereit. Mit Ausnahme von Lektor (Abbildung 1) verfügen die Seitengeneratoren zudem nicht über einen Editor für die Inhalte.

Abbildung 1: Lektor erlaubt über ein Admin-Interface das komfortable Eingeben von Inhalten im Browser. Bei anderen Generatoren müssen Sie dazu einen externen Texteditor bemühen.

Darüber hinaus fehlt eine Benutzerverwaltung, sodass Sie den Zugriff auf anderen Wegen einschränken müssen. Eine Ausnahme machen unter anderem Gatsby [3] und Next.js [4], die zur Benutzerauthentifizierung einen externen Dienst einspannen, wie etwa Netlify Identity. Die erzeugte Website nimmt die Login-Daten des Besuchers entgegen und befragt dann den entsprechenden Dienst, ob der Benutzer eine Seite sehen darf.

Qual der Wahl

Mittlerweile existieren zuhauf statische Website-Generatoren. Eine Auswahl fasst die Jamstack-Website zusammen [5]. Dort können Sie die Werkzeuge nach der Programmiersprache und der verwendeten Lizenz filtern (Abbildung 2).

Abbildung 2: Jamstack listete zu Redaktionsschluss nicht weniger als 322 statische Website-Generatoren auf.

Fast alle Generatoren arbeiten nach demselben Prinzip: Zunächst legen Sie die zu veröffentlichenden Inhalte in Textdateien ab. Überschriften, Links und andere Elemente kennzeichnen Sie mit Markdown, HTML-Tags oder einer anderen Auszeichnungssprache. Die Website-Generatoren erwarten die Texte dabei meist in ganz bestimmten, vorgegebenen Unterverzeichnissen. Jekyll [6] sammelt beispielsweise alle Blog-Posts unter _posts/.

Am Anfang der Textdateien dürfen Sie zusätzliche Informationen unterbringen, wie etwa das Veröffentlichungsdatum oder Schlagwörter (Tags). Viele Generatoren nutzen dabei die YAML-Notation. Die Informationen aus diesem Vorspann – oft auch als Front Matter bezeichnet – bauen die Website-Generatoren entweder an geeigneten Stellen in die Website ein oder lösen entsprechende Aktionen aus. Entdeckt beispielsweise Hugo [7] im Front Matter den Hinweis draft: true, landet der Text nicht in der produktiven Website. Auf diese Weise können Sie den Entwurf einer Seite in Ruhe überarbeiten.

Aufgehübscht

Die Optik der Seiten bestimmt eine Designvorlage. Diese sogenannten Themes bestehen aus einem konventionellen HTML-Gerüst, in dem Platzhalter die Stellen für die entsprechenden Inhalte markieren. Der Static Website Generator baut dann die Texte in das Theme ein und produziert so die fertige Webseite.

Je nach Beliebtheit des statischen Website-Generators offeriert die zugehörige Community oft zahlreiche fertige Themes (Abbildung 3), deren Qualität jedoch schwankt. Die Generatoren bringen aber durchweg ein Standard-Theme mit, das als Ausgangspunkt für eine eigene Designvorlage herhalten kann (Abbildung 4).

Abbildung 3: Wie hier Hexo führen die meisten Werkzeuge auf ihrer Website einen Katalog mit vorgefertigten Themes.

Abbildung 4: Mkdocs bringt ein Standard-Theme auf der Basis von Bootstrap mit, das auch die Entwickler selbst auf der Projekt-Website verwenden.

Viele statische Website-Generatoren nehmen die Ersetzungen nicht selbst vor, sondern überlassen das im Hintergrund einer sogenannten Template Engine. Das beliebte Jekyll spannt dazu beispielsweise Liquid [8] ein. Die Template Engine gibt neben der Notation der Platzhalter auch die möglichen Funktionen vor. Liquid kann beispielsweise Inhalte unter bestimmten Bedingungen ausblenden. Für die eigentliche Optik sorgen CSS-Dateien, wobei einige Generatoren wie Jekyll zusätzliche Tools wie einen Sass-Compiler einbinden.

Die Werkzeuge erkennen beim Aufruf in der Regel automatisch neu hinzugefügte Inhalte. Das hat gleichzeitig den Vorteil, dass Sie den Durchlauf automatisieren oder in eigene Shell-Skripte einbinden können. Fast alle statischen Website-Generatoren bringen zudem einen eingebauten Webserver mit, der eine bequeme Vorschau des aktuellen Zustands der Website erlaubt. Meist überwacht das Werkzeug auch gleich noch das Projektverzeichnis und generiert bei Änderungen an den Texten die Site automatisch neu.

Zusatzfunktionen

Unter welcher URL eine Seite sich später erreichen lässt, leiten die Werkzeuge standardmäßig aus der Verzeichnisstruktur und den Dateinamen ab. Bei einigen Website-Generatoren wie Hexo [9] und Mkdocs [10] dürfen Sie selbst eine konkrete Internet-Adresse vorgeben, einen sogenannten Permalink. Die meisten Tools unterstützen zudem das Übersetzen des Internet-Auftritts in mehrere Sprachen. Plugins erweitern im Bedarfsfall den Funktionsumfang der Werkzeuge (Abbildung 5). Bei Vuepress [11] lässt sich so unter anderem eine Suchfunktion nachrüsten.

Abbildung 5: Unter den Erweiterungen für Hexo finden sich Plugins, die Bilder in verschiedene Größen konvertieren oder Musikstücke von Soundcloud einbinden.

Damit Sie Messwerte, Adressen und andere Datensätze nicht per Hand in die Seiten einfügen müssen, importieren einige Website-Generatoren wie Jekyll und Middleman [12] Tabellen, die dazu allerdings in ganz bestimmten Formaten vorliegen müssen. Middleman akzeptiert beispielsweise standardmäßig nur YAML und JSON, Jekyll immerhin auch CSV-Dateien. Die Aufbereitung der Daten erfolgt dann wieder mithilfe der Template Engine.

Nur wenige der Generatoren erlauben den Import bestehender Websites aus WordPress, Drupal und Konsorten. Mit dieser Dienstleistung werben etwa Gatsby und Pelican. Wie bei Hexo übernimmt den Import meist ein entsprechendes Plugin.

Sprachliche Differenzen

Durch die ähnliche Arbeitsweise bedingt, unterscheiden sich die Website-Generatoren nur in Details oder ihrem Schwerpunkt. So fokussieren Jekyll und Hexo vor allem auf Blogs; Gitbook, Mkdocs und Vuepress helfen beim Erstellen von Handbüchern und Dokumentationen. Dennoch lassen sie sich flexibel einsetzen. So generieren auch Jekyll und Hexo Handbücher, ein passendes Theme vorausgesetzt.

Die größten Unterschiede liegen in den verwendeten Programmiersprachen und Frameworks. Beispielsweise nutzen die Hugo-Entwickler Go, während Jekyll in Ruby implementiert ist. Das hat auch unmittelbare Auswirkungen auf die Arbeit mit den Werkzeugen. So erlaubt Vuepress das Verwenden von Vue-Komponenten innerhalb von Markdown, während Jekyll den Ruby-Paketmanager Gem einspannt.

Besonders stark bemerkbar macht sich die Programmiersprache bei den in Javascript implementierten Generatoren Gatsby und Next.js. Beide zwingen auch Autoren und Theme-Entwickler, die Skriptsprache sowie das React-Framework intensiv zu nutzen. Gatsby verwendet sogar zusätzlich noch JSX und GraphQL. Ohne entsprechende fundierte Kenntnisse sollten Sie sich daher an keinen dieser beiden Generatoren heranwagen. Andererseits locken Gatsby und Next.js mit einem besonders großen Funktionsumfang. Gatsby kann beispielsweise an Google Analytics andocken und Zahlungen über den Abrechnungsdienstleister Stripe abwickeln.

Next.js (Abbildung 6) fällt generell etwas aus der Reihe: Es generiert nicht nur statische Websites, sondern kann einzelne Seiten auch erst bei deren Anforderung zusammenbauen. Dazu setzt es eine Node.js-Umgebung auf dem Server voraus. Sie bildet auch die Voraussetzung für einige interaktive Funktionen, wie etwa das automatische Optimieren von Bildern für verschiedene Bildschirme.

Abbildung 6: Next.js hat viele prominente Nutzer, darunter etwa Tiktok, Hulu und Nike.

Fazit

Statische Website-Generatoren bieten sich immer dann an, wenn der eigene Internet-Auftritt hauptsächlich aus Texten besteht, die sich selten ändern. Prädestiniert sind die Generatoren vor allem für Blogs ohne Kommentarfunktion, technische Dokumentationen oder eine Unternehmensvorstellung.

Der Funktionsumfang der diversen Vertreter unterscheidet sich nur in Details. Bei der Suche nach einem passenden Werkzeug sollten Sie sich daher primär von den Ihnen bekannten Programmiersprachen leiten lassen. Für Python-Experten empfiehlt sich beispielsweise ein Blick auf Lektor, Javascript-Fans stürzen sich eher auf Gatsby oder Next.js. (jlu)