Um das Konzept Static Site Generator zu verstehen, schauen wir zunächst auf den Gegenspieler: Content-Management-Systeme. Moderne CMS bieten viele Vorteile. Sofortige Änderung aller Inhalte, WYSIWYG-Editor, Live-Vorschau, umfangreiche Berechtigungen und individuelle APIs sind nur einige davon. Aber sie haben auch erhebliche Nachteile.

Ein komplexes System bietet eine große Angriffsfläche und kommt in der Regel mit verbesserungswürdiger Performance daher. Für viele Websites lassen sich diese Nachteile ausgleichen. Aber dort, wo es primär auf hohe Stabilität und rasante Performance ankommt, schlägt die Stunde einer statischen Website.

Statische Websites sind reine HTML-Dateien die in einer Ordnerstruktur liegen. Ganz wie in den frühen Anfängen des Internets.

Es gibt kein PHP, kein Node.js, kein Ruby – die Dateien stehen einfach im Web zum Abruf bereit. Dafür reichen kleine Hosting-Pakete oder ein günstiger Amazon S3-Cloud-Speicher schon aus.

Ein Problem aber bleibt: Die Wartung der Inhalte bei statischen Websites ist unverhältnismäßig kompliziert. Möchtest du zum Beispiel heute noch HTML-Dateien per FTP hin- und herschieben, geschweige denn HTML-Code zum Entwerfen einer neuen Landingpage verwenden? Hier kommen Static Site Generators ins Spiel und machen dir das Leben einfacher. Schauen wir uns das doch mal genauer an.

Was ist ein Static Site Generator?

Ein Static Site Generator erzeugt im Rahmen eines sogenannten Build-Prozesses die statische Website. Dabei greift er auf verschiedenste Datenquellen und Templates zurück, um die einzelnen HTML-Dateien zu generieren. Als Datenquellen dienen dir beispielsweise Markup-Dateien oder API-Services, aber auch sogenannte Headless-CMS ohne eigenes Frontend wie Contentful sind beliebt. Die fertig kompilierte statische Website landet automatisiert auf einem Hosting-Server und ist von dort für die Besucher erreichbar.

Static Site Generators gibt es mittlerweile eine ganze Menge. Weiter unten stellen wir einige der populärsten kurz vor. Die Funktionsweise ist aber bei allen etwa gleich. Dabei sei gesagt: Zur Konfiguration des Generators ist Programmiererfahrung notwendig. Es handelt sich nicht um Baukasten- oder WYSIWYG-Systeme, sondern um komplexe Instrumente mit einer Vielzahl an Möglichkeiten.

Ein Projekt mit Static Site Generator ist also meist nicht einfacher oder schwieriger als ein klassisches CMS-Projekt. Es verfolgt einfach nur einen ganz anderen Ansatz.

Wie funktioniert ein Static Site Generator?

Die Funktionsweise eines Static Site Generators erklären wir mit einem fiktiven Beispiel:

• Eine Website listet Events auf, die Unternehmen sponsern können.
• Für ein solches Sponsoring füllen Unternehmen ein Formular aus, das eine E-Mail an den Anbieter auslöst.
• Die Rahmendaten der Events stammen aus Eventim.
• Die Redakteure reichern die Events im Headless CMS Contentful mit Content an.

Normalerweise ist ein klassischer CMS-Ansatz hier gut geeignet, aber auf die Events wird ein hoher Ansturm erwartet. Daher ist es wichtig, dass die Website zuverlässig funktioniert und nicht unter erhöhter Last zusammenbricht.

Der Build-Prozess

Der Anbieter entscheidet sich darum für den Einsatz eines Static Site Generators. Wann immer Änderungen der Eventim-Events oder der redaktionellen Inhalte in Contentful erfolgen, soll sich die statische Website selbst aktualisieren. Den Ablauf und das Zusammenspiel der Systeme erläutert das folgende Schaubild:

Beispiel: Systemarchitektur und Build-Prozess mit Static Site Generator

Ein neuer Build-Prozess kann manuell ausgelöst werden, aber auch bei Änderungen in Eventim oder in Contentful wird der Prozess angestoßen. Der Static Site Generator durchläuft nun das definierte Build-Skript und lädt die Event-Rahmendaten aus Eventim. Danach greift er auf die Contentful-API zurück, um die Events mit den redaktionellen und medialen Inhalten zu ergänzen. Die fertige statische Website wird automatisiert auf den Webserver geladen – fertig!

Dynamische Funktionen mit Microservices

Eine Frage ist aber noch offen: Wenn die Website rein statisch ist, wie kann dann das Formular eine E-Mail auslösen? Hierfür gibt es viele Möglichkeiten. Eine davon sind cloudbasierte, serverlose Funktionen wie AWS Lambda. Diese moderne Technologie stellt skalierbare Rechenleistung ohne einen dedizierten Server bereit und lässt sich für Microservices, wie z.B. das Versenden einer solchen E-Mail, wunderbar einsetzen.

Und fertig: Mit dieser Architektur hält die Website auch großem Ansturm souverän stand. Und sollte es doch mal knapp werden, kannst du die Ressourcen in Amazon S3 und AWS Lambda jederzeit flexibel hochskalieren. Der „Flaschenhals CMS“ ist eliminiert, die Website bietet kaum Angriffsfläche für böswillige Attacken.

Welche Vorteile bieten statische Websites gegenüber einem klassischen CMS?

Diese Vorteile hat ein Static Site Generator gegenüber einem klassischen CMS:

1. Performance
2. Sicherheit
3. Robustheit
4. Wartbarkeit
5. Flexibilität
6. Portabilität
7. Keine Backups

1. Performance

Statische Websites müssen serverseitig nicht verarbeitet werden und sind im Regelfall deutlich schneller als ihre CMS-Pendants. Dies begeistert nicht nur Smartphone-Benutzer mit geringer Bandbreite. Der höhere Score in Google PageSpeed Insights bewirkt eine potenziell bessere Platzierung in den Suchergebnissen.

2. Sicherheit

Die statische Website hat kein Backend, keine Administratoren und keine Datenbank. Das macht sie als Angriffsziel für Hacker sehr viel unattraktiver, und kritische Infrastruktur wie Headless CMS oder Cloud Functions liegt bei spezialisierten Anbietern.

3. Robustheit

Kein CMS, kein serverseitiger Code: Eine funktionierende statische Website bringt so schnell nichts aus der Ruhe. Lästige Serverfehler, welche die Website lahmlegen, gehören damit der Vergangenheit an.

4. Wartbarkeit

Klassische CMS müssen regelmäßig mit Updates versorgt werden, um Sicherheitslücken zu schließen. Bei statisch generierten Websites entfällt dieser Aufwand einfach: Ein einmal definierter Build-Prozess kann prinzipiell unendlich lange verwendet werden.

5. Flexibilität

Auch wenn statische Websites zunächst einmal statisch sind: Bei Bedarf können beliebige dynamische Funktionen per JavaScript umgesetzt werden. So lässt sich auch auf statischen Websites eine hochdynamische User Experience schaffen. Treibt man diesen Ansatz zu weit, leidet aber unter Umständen wieder die Performance.

6. Portabilität

Statische Websites stellen kaum Anforderungen an den Webserver, selbst kleine Hosting-Pakete sind prinzipiell schon ausreichend. Zudem lässt sich die Website ganz einfach umziehen, ohne separat zu migrierende Datenbank.

7. Keine Backups

Die Inhalte der Website liegen dezentral in verschiedenen Systemen – die Website ist nur das Produkt eines 1:1 wiederholbaren, automatisierten Build-Prozesses. Das bedeutet auch, dass die generierte Website nicht in einem Backup gesichert werden muss, da sie sich jederzeit auf Knopfdruck reproduzieren lässt.

Welche Nachteile hat ein Static Site Generator?

Eine der wichtigsten Schwächen gegenüber der konventionellen CMS-Lösung ist die zeitliche Latenz zwischen Inhaltsbearbeitung und -veröffentlichung, weil dazwischen immer der Build-Prozess steht. Kleine Fehler lassen sich daher nicht sofort beheben, sondern gehen mit einem gewissen Verzug einher. Zudem ist die Integration dynamischer Inhalte und Funktionen trickreicher als bei einer vollständig dynamischen, CMS-basierten Website. Nicht zuletzt ist auch das Fehlen einer sofortigen realen Vorschau der Inhalte ein wichtiger Punkt, an den sich Redakteure erst gewöhnen müssen.

Welcher Static Site Generator ist der beste?

Der Markt an Static Site Generators wächst stetig. Zu den Platzhirschen gehören Jekyll, Gatsby und Hugo. Gatsby setzt auf das populäre JavaScript-Framework React, das ursprünglich von Facebook entwickelt wurde. Auch wir bei 247GRAD greifen in Webprojekten gerne auf React zurück. Hugo hingegen basiert auf der Programmiersprache Go, Jekyll arbeitet mit Ruby.

Welcher Generator im Einzelfall die beste Wahl ist, hängt von den individuellen Anforderungen des Projekts ab. Einen Überblick mit Filtermöglichkeiten bietet die Website StaticGen.com – es schadet auch nicht, sich vor dem Projektstart einige Erfahrungsberichte durchzulesen, um mehr über die individuellen Stärken der Tools zu erfahren.

Du bist dir nicht sicher, ob deine neue Website von einem statischen Ansatz profitieren würde? Wir beraten dich gerne … melde dich einfach bei uns.