Static-Site-Generatoren: Mit Minimalismus zum eigenen Webprojekt

Das Angebot im World Wide Web zeichnet sich nicht nur durch seine thematische, sondern immer mehr auch durch seine funktionale Vielfalt aus. Dynamische Elemente, die dem Besucher die direkte Interaktion mit der Seite ermöglichen oder die Optik (ganze Homepage bzw. einzelne Inhalte) ereignisbasiert anpassen, erhöhen den Mehrwert oftmals spürbar und spielen eine immer wichtigere Rolle.

Dabei ist der Einsatz interaktiver Komponenten, die sich mithilfe von Datenbanken und server- oder clientseitigenSkriptsprachen wie PHP und JavaScript realisieren lassen, gar nicht für jeden Website-Typ sinnvoll: Kleinere Internetseiten wie Blogs, Unternehmensseiten oder private Homepages können durchaus auch mit ausschließlich statischen Inhalten überzeugen, ohne dass Besucher zu diesem Zweck auf elementare Funktionen verzichten müssen. Zur Umsetzung statischer Webpräsenzen greifen Entwickler zudem immer häufiger auf sogenannte Static-Site- bzw. Static-Website-Generatoren zurück, die den Programmierungsprozess dank vorgefertigter Layouts und Website-Komponenten erheblich vereinfachen.

Static-Website-Generatoren (seltener auch: Web-Page-Generatoren) sind fertige Codegerüste, auf deren Basis sich statische Webseiten erstellen lassen. Anders als Content-Management-Systeme, die Inhalte für gewöhnlich in Datenbanken speichern und den HTML-Code serverseitig mithilfe von Skriptsprachen wie PHP aufbereiten, erzeugen Static-Site-Generatoren den HTML-Code lokal auf dem Rechner des Entwicklers (alternativ auch in der Cloud). Alle notwendigen Komponenten sind zu diesem Zweck in einem gut strukturierten Verzeichnis gespeichert, wobei insbesondere die strikte Trennung von Layout und Content kennzeichnend ist. Diese macht es möglich, dass Nutzer jederzeit Änderungen am Design des Webprojekts vornehmen können, ohne Einfluss auf die veröffentlichten Inhalte zu nehmen. Zu diesem Zweck enthalten die meisten Generatoren eine Template-Engine, mit deren Hilfe entsprechende Layout-Vorlagen kreiert werden können.

Installation und Bedienung eines Static-Site-Generators funktionieren über die Kommandozeile. Die eigentlichen Website-Inhalte schreibt man in Auszeichnungssprachen wie Markdown, wobei entsprechende Editoren entweder in der Software integriert sind oder – bei Bedarf – manuell heruntergeladen werden müssen. Um die Website zu veröffentlichen, gilt es lediglich, den automatisch generierten Webcode auf den gewünschten Webspace zu übertragen. Anhand von Metadaten am Anfang der Dateien (häufig als „Front Matter“ bezeichnet) sorgt der Generator dann dafür, dass die Website im Browser der Besucher dargestellt wird. Anstatt das Verzeichnis auf den eigenen Webspace hochzuladen, kann es auch in einem Content-Delivery-Network (CDN) abgelegt werden.

Statische Webpräsenzen erinnern natürlich an die Anfangszeiten des World Wide Webs, in denen Pop-up-Werbung das maximale Maß an Interaktivität darstellte. Heute sind Websites häufig weitaus mehr als reine Informationsplattformen, weshalb dynamische Elemente auch ein wichtiger und nicht zu unterschätzender Faktor für den Erfolg einer Webanwendung sind. In bestimmten Fällen wie den bereits erwähnten Blogs oder Unternehmenspräsenzen steht die bloße Übermittlung von Informationen aber auch weiterhin im Fokus. Content-Management-Systeme und Homepage-Baukästen sind zwar auch für derartige Projekte verwendbar, Static-Site-Generatoren haben hier jedoch entscheidende Vorteile gegenüber den klassischen Lösungen:

• Geschwindigkeit: Projekte, die mit einem Static-Website-Generator erstellt werden, zeichnen sich durch eine hervorragende Performance aus. Da sie sich lediglich aus HTML- und optional aus CSS- und JavaScript-Code zusammensetzen, haben Clients bzw. Browser bei der Interpretation leichtes Spiel: Ressourcenaufwendige Datenbankabfragen entfallen, wodurch jeder Request vom Server ohne Umwege beantwortet werden kann. Zudem ist die Zwischenspeicherung der Inhalte sehr gut möglich, was bei einem erneuten Aufruf der Seite zusätzliche Zeitersparnis bringt.

• Versionskontrolle für Content: Während die Inhalte dynamischer Webprojekte von der Codebasis getrennt in Datenbanken gespeichert werden, liegt der Content einer statischen Website typischerweise in einfachen Textdateien vor. Strukturell unterscheiden sich die inhaltlichen Elemente daher nicht von anderen Komponenten der Codebasis, weshalb sich ohne Probleme eine Versionsverwaltung einrichten lässt. So lässt sich beispielsweise nicht nur das Codegerüst eines Blogs in einem GitHub-Verzeichnis verwalten, sondern auch die einzelnen Blogbeiträge. Insbesondere wenn mehrere Personen für die Content-Verwaltung verantwortlich sind, behält man auf diese Weise problemlos die Übersicht über vorgenommene Änderungen. Mit GitHub Pages bietet die Entwicklerplattform sogar ein eigenes Paket aus Versionsverwaltung und Static-Site-Generator (in diesem Fall: Jekyll) an.

• Sicherheit: Ein weiterer Vorteil von Websites, die mithilfe von Static-Website-Generatoren erstellt wurden, ist, dass sie nur wenig Angriffsfläche bieten – anders als z. B. Content-Management-Systeme wie WordPress, die bereits von Hause aus die Gefahr von Sicherheitslücken mitbringen und regelmäßig aktualisiert werden müssen. Statische Webprojekte profitieren vor allem davon, dass sie ihren Zweck auch ohne Datenbankzugriffe und Nutzerinteraktion oder -authentifizierung erfüllen. Das komplette Risikopotenzial ist auf den einzelnen Zugriff durch den Client beim Aufruf der Seite beschränkt. Da dabei in der Regel nicht viel mehr als strukturierte HTML-Seiten ausgeliefert werden ist die Wahrscheinlichkeit eines ungewünschten Zugriffs auf ein Minimum reduziert.

• Einfache Server-Instandhaltung: Auch ein Static-Site-Generator hat als Software-Paket seine Abhängigkeiten, die es zu erfüllen gilt. Die Zahl benötigter Komponenten fällt vergleichsweise gering aus, jedoch sind diese ohnehin nur während des Entwicklungsprozesses relevant. Während andere Lösungen die verschiedensten Module, Datenbanken, Bibliotheken, Frameworks und Pakete auch für den Live-Betrieb benötigen und daher regelmäßige Aktualisierungen auf der Tagesordnung stehen, sind die generierten statischen Seiten mit dem Zeitpunkt der Veröffentlichung lediglich an einen funktionsfähigen Webserver gebunden.

• Gutes Traffic-Management: Webprojekte mit dynamischen Elementen haben in der Regel Probleme mit unerwarteten Traffic-Spitzen. Ein erhöhtes Besucheraufkommen kann zum Teil durch Caching-Mechanismen aufgefangen werden, allerdings stößt der Server dennoch schnell an seine Grenzen, wenn eine hohe Zahl von Requests mit Datenbankabfragen verknüpft ist. Websites, die mit einem Static-Website-Generator programmiert wurden, haben deutlich weniger Probleme mit punktuell hohen Besucherzahlen: Die Auslieferung statischer HTML-Seiten beansprucht die Ressourcen eines Servers nur minimal.

In diesem Whitepaper erfahren Sie unter anderem, welche Probleme konventionelle CMS mit sich bringen, warum statische Seiten mithilfe des Jamstacks zur echten Alternative werden – und wie Sie damit schlankere Workflows und bessere Kundenergebnisse gewährleisten.

Während die angesprochenen Vorzüge statischer Seiten – wie die hervorragende Auslieferungsgeschwindigkeit oder der hohe Sicherheitsfaktor – nicht von der Hand zu weisen sind, gibt es entscheidende Gründe, warum ein Static-Site-Generator für größere Projekte ungeeignet ist. Allen voran ist hier der enorme Pflegeaufwand zu nennen: Die Arbeit mit einem Generator setzt nicht nur umfangreiches Wissen über Markdown, HTML und Co. voraus, sondern lässt auch zahlreiche Automatismen vermissen, die in Content-Management-Systeme und Homepage-Baukästen selbstverständlich sind. Ferner lassen sich folgende Schwachpunkte bei der Verwendung von Static-Website-Generatoren ausmachen:

• Keine Echtzeit-Inhalte: Ein Static-Site-Generator bietet von sich aus keinerlei Möglichkeiten, dynamische Inhalte (Empfehlungen, Preisaktualisierungen, Volltextsuche etc.) zu erzeugen. Elemente, die sich automatisch an den jeweiligen Nutzer anpassen, indem Echtzeitdaten ausgewertet werden, lassen sich nur über Umwege, z. B. mithilfe clientseitiger Skripte (vor allem JavaScript), realisieren. Diese bedeuten allerdings wiederum potenzielle Sicherheitslücken, die Gefahren sowohl für das Webprojekt als auch für die Besucher mit sich bringen können. Zudem haben viele Nutzer JavaScript und andere Skriptsprachen in ihren Browsern blockiert, weshalb die jeweiligen Inhalte ihnen verborgen bleiben würden.

• Mühsame Verwertung von User-Input: Ein weiteres Problem fehlender Server-Skripte und Datenbanken wird deutlich, wenn das Webprojekt in bestimmten Situationen auch Nutzereingaben ermöglichen soll (etwa bei einem Kontaktformular). Wer statische Seiten mit einem derartigen Angebot verknüpfen möchte, kommt um JavaScript bzw. die Unterstützung von Drittanbieter-Services nicht herum. Die Plattform DISQUS kann beispielsweise dazu verwendet werden, um Static-Website-Generator-Projekten eine Kommentarfunktion (inklusive Moderation und Spam-Management) hinzuzufügen – allerdings greift auch dieser Dienst auf JavaScript zurück. Das zuvor erwähnte GitHub Pages bietet darüber hinaus eine Kommentarfunktion, die eng an das Versionsmanagement gekoppelt ist und serverseitig ausgewertet wird. In jedem Fall sind der zeitliche und technische Aufwand zur Realisierung derartiger Nutzerkomponenten als vergleichsweise hoch einzustufen.

• Keine Standard-Benutzeroberfläche: Static-Site-Generatoren haben von Hause aus kein Interface, über das sich neue Inhalte einfügen oder bestehende Inhalte anpassen bzw. löschen lassen. WYSIWYG-Editoren helfen zwar dabei, den benötigten Markdown-Code zu schreiben und das Resultat per Vorschau-Funktion schon im Vorhinein zu inspizieren, erübrigen aber nicht den manuellen Upload der fertigen Dateien auf den Server. Insbesondere für Redakteure, die nur wenig mit dem tatsächlichen Code und der Struktur der Website anfangen können, ist dieser Prozess nur schwer nachzuvollziehen, weshalb der Einstieg deutlich mehr Zeit in Anspruch nimmt als beispielsweise bei einem CMS wie WordPress.

Zusammenfassend lässt sich also sagen, dass Projekte, die auf statischen Seiten basieren, vor allem dort ihre Schwächen haben, wo Aktualität, Veränderung und Nutzer-Interaktion gefragt sind. Sollen

• Inhalte regelmäßig überarbeitet,
• Funktionalitäten auch im Nachhinein hinzugefügt,
• Nutzereingaben verarbeitet oder
• optische Anpassungen jederzeit und auch mit geringem Know-how vorgenommen werden,

sind Lösungen wie Baukästen und Content-Management-Systeme den minimalistischen Static-Website-Generatoren vorzuziehen.

Die Anzahl an Static-Site-Generatoren ist in den vergangenen Jahren erheblich gestiegen. Auf GitHub befinden sich die Projektverzeichnisse zahlreicher Open-Source-Lösungen, die kostenfrei zur Erstellung der eigenen Website genutzt und nach Bedarf angepasst werden können. Eine Übersicht über die beliebtesten Vertreter liefert staticgen.com: Die Seite listet die verschiedenen Möglichkeiten alphabetisch oder sortiert nach GitHub-Sternen, -Forks oder -Issues (Optimierungsvorschläge/Aufgaben) auf. Zusätzlich lassen sich die Website-Gerüste auch nach der zugrundeliegenden Programmiersprache (u. a. Ruby, Python, C, C++) filtern. In der folgenden Tabelle sind einige der wichtigsten Generatoren (ohne JavaScript) auf Basis der StaticGen-Informationen aufgeführt:

Mit über 31.000 Sternen und 7.000 Abspaltungen ist Jekyll die unangefochtene Nummer eins der Static-Site-Generatoren auf GitHub. Das mag auch daran liegen, dass das Jekyll-Gerüst die Grundlage für den offiziellen Hosting-Dienst der Entwicklerplattform bildet, der den Namen „GitHub Pages“ trägt. Zudem zählt der bereits 2008 von GitHub-Gründer Tom Preston-Werner veröffentlichte Generator, der in Ruby geschrieben ist, zu den ältesten seiner Zunft. Für die Generierung des HTML-Codes ist die Rendering-Engine Liquid verantwortlich. Unser Ratgeber liefert ausführliche Informationen sowie ein Tutorial zur Jekyll-Projekterstellung via GitHub Pages.

Seit 2013 macht auch der von Steve Francia veröffentlichte Generator Hugo auf sich aufmerksam (über 20.000 GitHub-Sterne und 2.700 Forks). Anders als Jekyll ist Hugo in der Programmiersprache Go geschrieben, die von Google-Mitarbeitern entwickelt wurde. Auf der offiziellen Homepage stellt das Hugo-Team über 100 fertige Themes zur Verfügung, die als Layout- und Design-Vorlage zur Realisierung der eigenen Website genutzt werden können. Der Static-Website-Generator bietet darüber hinaus die Besonderheit, dass er bereits einen eigenen Webserver zur Auslieferung der HTML-Seiten beinhaltet.

Auch wenn die anderen in der Tabelle aufgeführten Generatoren wie Octopress, Middleman oder Cactus nicht über den gleichen Verbreitungsgrad wie Hugo und vor allem Jekyll verfügen, kann sich ein genauerer Test durchaus lohnen – sei es aufgrund anderer Programmiersprachen oder weil eine andere Template-Engine zum Einsatz kommt. Wegen ihrer geringen Programmgröße sind die verschiedenen Vertreter in kürzester Zeit testbereit, sodass man bequem nach dem Website-Generator fahnden kann, der am besten auf die eigenen Fähigkeiten und Bedürfnissen zugeschnitten ist.