Was ist ein Static-Site-Generator?

Zur Umsetzung statischer Webpräsenzen greifen Entwickler immer häufiger auf Jamstacks mit Static-Site- bzw. Static-Website-Generatoren zurück, die den Programmierungsprozess erheblich vereinfachen und eine schnelle Bereitstellung der Seiten ermöglichen. Jegliche dynamischen Funktionen werden auf eine verteilte Architektur ausgelagert. Clientseitiges JavaScript, das mit den APIs von Microservices kommuniziert, sorgt dabei für die notwendige Dynamik. Was ist ein Static-Site-Generator?

Static-Website-Generatoren sind fertige Codegerüste, auf deren Basis sich statische Webseiten erstellen lassen. Anders als Content-Management-Systeme, die Inhalte aus Datenbanken abrufen, erzeugen Static-Site-Generatoren die HTML-Dateien einer Seite mithilfe eines Skripts aus Eingabedateien, die in einem Dateisystem gespeichert sind. Dieser Prozess findet außerdem bereits zum Erstellungszeitpunkt statt, also während Änderungen an Code und Content vorgenommen werden und nicht erst dann, wenn der Benutzer die Seite mit seinem Browser aufruft.

In bestimmten Fällen wie Blogs oder Unternehmenspräsenzen steht die bloße Übermittlung von Informationen 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 Geschwindigkeit auf Nutzerseite aus. Das ist der Tatsache zu verdanken, dass die Verarbeitung der Dateien bereits zur Entwicklungszeit bzw. Aufbauzeit der Seiten stattfindet und nicht erst zum Zeitpunkt der Abfrage der Seite (Stichwort: Datenbankabfrage) durch den Nutzer.
   
• 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.
   
• 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 Haus aus die Gefahr von Sicherheitslücken mitbringen und regelmäßig aktualisiert werden müssen. 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.

Content-Management-Systeme haben die Art und Weise, wie Websites gebaut werden, revolutioniert. Der hohe manuelle Aufwand, der für die Programmierung klassischer statischer Websites erforderlich war, gehörte dank der praktischen Systeme schnell der Vergangenheit an. Die entscheidende Neuerung und Veränderung zu dem alten Ansatz: Die Speicherung von Content in Datenbanken und die damit verbundene Möglichkeit, Seiten erst bei der Anfrage der Nutzer in passender Weise zusammenzusetzen und zu präsentieren.

Static-Site-Generatoren schlagen die Brücke zwischen der klassischen statischen Website und CMS-Projekten. Wie beim klassischen Programmierungsansatz sind die Seiten und deren Inhalte bereits generiert, bevor sie von den Nutzern abgerufen werden. Wie Content-Management-Systeme erlauben es Static-Site-Generatoren Entwicklern auf der anderen Seite, Templates zu verwenden und Seiten automatisch zu generieren.

Der entscheidende Unterschied zwischen Static-Site-Generator und CMS besteht also in dem Zeitpunkt, zu dem die Webseiten kreiert werden – bei ersterem noch während des Entwicklungsprozesses, bei letzterem auf Anfrage des Nutzers. Zudem entfällt beim Generator die Abhängigkeit von Datenbanken bzw. einer anderen externen Datenquelle sowie eine serverseitige Datenverarbeitung beim Zugriff auf die Website. Es ist natürlich auch möglich, mit einer API bei Bedarf externe Datenquellen einzubinden.

Static-Site-Generatoren für den Aufbau des eigenen Webprojekts zu nutzen, kann sich aus vielerlei Gründen auszahlen. Der wohl entscheidendste Beweggrund ist das Performance-Plus, das die kreierten Websites vorweisen können. Die exzellenten Ladezeiten beim Zugriff, die aus den fertig generierten Inhalten resultieren, wirken sich positiv auf die User-Experience aus. Da sämtliche Dateien der Website zentral an einem Punkt gespeichert werden, bieten Projekte auf Basis eines Static-Site-Generators außerdem maximale Flexibilität und Verfügbarkeit. Zudem ist der Verwaltungsaufwand minimal.

Sollen allerdings

• 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 vorzuziehen.

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. Die Arbeit mit einem Generator setzt beispielsweise 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 mithilfe clientseitiger Skripte (vor allem JavaScript), realisieren.
   
• 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). Auch hier ist JavaScript gefragt bzw. die Unterstützung von Drittanbieter-Services erforderlich. Die Plattform DISQUS kann beispielsweise dazu verwendet werden, um Static-Website-Generator-Projekten eine Kommentarfunktion (inklusive Moderation und Spam-Management) hinzuzufügen.
   
• Keine Standard-Benutzeroberfläche: Static-Site-Generatoren haben wie auch Headless CMS von Hause aus kein Interface, über das sich neue Inhalte einfügen oder bestehende Inhalte anpassen bzw. löschen lassen, sondern werden im Terminal bedient 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.

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.

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, JavaScript, Go…) filtern.

In der folgenden Tabelle sind einige der wichtigsten Generatoren auf Basis der StaticGen-Informationen aufgeführt:

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.

Den Code von Static-Site-Generatoren inklusive der Inhalte, Assets und Skripte, die für die Generation der Ausgabe verantwortlich sind, können Sie einfach und unkompliziert in einem GitHub-Repository speichern und pflegen. Auf diese Weise verknüpfen Sie Ihr Projekt mit einer Versionskontrolle und vereinfachen die Zusammenarbeit am Code.

Schließlich bleibt nur die Bereitstellung der Dateien auf einem Webserver zu erledigen, wobei der Building-Prozess für HTML- und CSS-Dateien bei jeder Aktualisierung des Repositorys zu wiederholen ist. Auch dieses Aufgabenfeld können Sie sich erheblich vereinfachen – mit Hosting-Services für Static-Site-Generatoren wie Deploy Now. Die Lösung von IONOS stößt im Hintergrund automatisch eine Aktualisierung der statischen Inhalte auf Ihrem Webspace an, wenn Sie Änderungen am Verzeichnis Ihres Static-Site-Generators vornehmen. Hierfür nutzt Deploy Now einen GitHub-Actions-Workflow, der es Ihnen ermöglicht, die Build-Logs direkt in der GitHub-Benutzeroberfläche zu beobachten.

Deploy Now ist ein praktischer Hosting-Service und bietet Unterstützung für alle gängigen Static-Site-Generatoren und ist darüber hinaus bestens für Jamstack-Hosting geeignet. Ferner zeichnet sich Deploy Now durch einfaches Staging aus und bietet Ihnen ein kostenloses SSL/TLS-Zertifikat sowie DDoS-Schutz für Ihr Projekt.

Die Entscheidung, ob Sie ihre eigene Domain mitbringen und einbinden oder eine neue Domain bei IONOS registrieren, liegt bei Ihnen. Weitere Informationen zu technischen Konfigurationen, Tutorials und Starter-Projekten finden Sie in der offiziellen Deploy-Now-Dokumentation.