Static Site Generatoren im Überlick

Mit einem Static Site Generator wie Gatsby, Eleventy oder Jekyll lassen sich große statische Web-Auftritte auch ohne CMS erstellen. Doch so beliebt die Static Site Generatoren in der Entwickler-Szene auch sind, so sehr hat ihr technischer Ansatz ein Überschwappen in den Mainstream bislang verhindert.

Screenshot Gatsby Static Site Generator

Das könnte sich in Zukunft jedoch ändern. Denn neue Konzepte wie das Desktop-CMS Publii richten sich vornehmlich an End-Anwender, während im Enterprise-Bereich eine Kombination aus einem Static Site Generator und den neuen Headless-CMS Karriere macht. Auch externe Autoren-Oberlächen wie Forestry.io, integrierte Admin-Dashboards wie bei dem Generator Lektor CMS und das Inline-Editing Dashboard Tina CMS bereiten zumindest einen kleinen Pfad in den Mainstream. Dennoch dürften die Flat-File-CMS für den normalen Autor und den kleinen Webseiten-Betreiber vorerst die einfachere Alternative bleiben.

Im Enterprise-Bereich sieht es jedoch anders aus, denn hier ist das technische Know-How zum Aufsetzen entsprechender Workflows vorhanden und hier können die Kosten-Vorteile statischer Architekturen voll zur Geltung kommen. Ein Beispiel dafür ist die bekannte Marke Braun.de, die zum Groß-Konzern Procter&Gamble gehört. Während der Web-Auftritt von Braun noch vor wenigen Jahren auf einem großen Enterprise-CMS lief, wird die Seite heute mit dem Static Site Generator Gatsby ausgeliefert.

Mit Gatsby Cloud hat der populäre Generator Ende 2019 ein weiteres Teil im großen Content-Puzzle geliefert. Gatsby Cloud kann gleichermaßen mit klassischen CMS wie WordPress und mit neuen Headless-Services wie Contentful kombiniert werden. Interessant ist vor allem die Kombination mit Headless-CMS, da Gatsby nicht nur die fehlende Seitengenerierung anbietet, sondern auch eine Seiten-Preview mitbringt und so die Headless-CMS perfekt ergänzt. Gatsby Cloud dürfte damit einen wichtigen Impuls für die Headless-Architektur liefern.

#Marktüberblick

Einen passenden Static Site Generator zu finden fällt bei dem riesigen Angebot nicht ganz leicht: Mehr als zweihundert Systeme listet alleine die Webseite StaticGen auf. Dabei gibt es für beinahe jede Programmier-Sprache und für jedes Framework gleich mehrere Static Website Generatoren zur Auswahl. Um ein paar Beispiele aufzulisten:

Sprache Static Site Generator
Ruby Jekyll, Middleman, Nanoc
Node/JavaScript Docusaurus (React.js), Eleventy (Node.js), Hexo (Node.js), Gatsby (React.js), Next (React), Nuxt (Vue.js), Metalsmith, Harp, VuePress (Vue.js), Wintersmith (Node.js,CoffeScript)
Go Hugo
Python Pelican, MKDocs, Cactus, Lektor, Hyde, Sphinx
PHP Sculpin, Daux, Couscous
Bash Expose
Haskell Hakyll

Es gibt jedoch nicht nur statische Site Generatoren für Blogs und Websites, sondern auch Generatoren für speziellere Anwendungsgebiete. Beinahe zeitgleich mit Jekyll ist im Jahr 2008 zum Beispiel Sphinx entstanden, ein Static Site Generator für Code-Dokumentationen. Im Bereich der Dokumentation ist zuletzt auch Facebook eingestiegen und hat Ende 2017 mit Docusaurus einen komplett neuen Static Site Generator ins Rennen geschickt. Ein weiteres Anwendungsgebiet ist die Erstellung von E-Books mit einem Static Website Generator wie GitBook und Bookdown. Weitere spezialisierte Kandidaten sind:

Spezialisierung Static Site Generator
Eher Blogs Jekyll, Hexo, Pelican, Octopress, Wheat
Eher Webseiten Hugo, Gatsby, Metalsmith, Middleman, Wintersmith
Code-Dokumentationen Docusaurus, MKDocs, Sphinx, DocFX, Couscous, Daux
Bücher GitBook, Bookdown, mdBook

Wer einen passenden Static Site Generator sucht, sollte also erst einmal den Angebots-Dschungel durchforsten und sich ein Bild über die verschiedenen Anwendungsgebiete machen. Allerdings sollte man sich auch über die Funktionsweise und über die Möglichkeiten bzw. Grenzen von statischen Website Generatoren informieren. Denn sie unterscheiden sich deutlich von der Funktionsweise eines normalen CMS und sind längst nicht für jeden Anwendungsfall geeignet.

#Dynamische und statische Systeme

Auch wenn Static Site Generatoren und statische Webseiten generell als moderner Trend bei den Content Management Systemen wahrgenommen werden, knüpft die Entwicklung in Wahrheit an die frühen Zeiten der Webseiten-Entwicklung an. Damals wurden statische Webseiten mit Programmen wie Dreamweaver oder Frontpage erstellt. Und auch die frühen Content Management Systeme produzierten meist statische Webauftritte. Erst später gewannen dynamische Systeme wie WordPress und Co. die Oberhand und ermöglichten mit ihrer höheren Flexibilität das Web2.0.

Der große Unterschied zwischen dynamischen und statischen CMS kommt beim Publizieren einer Webseite zum Tragen. Veröffentlicht ein Autor in einem dynamischen CMS eine neue Seite, dann wird lediglich ein Zugriff auf die Seiten-Inhalte gewährt. Beim Besuch der Seiten-URL werden die Inhalte beispielsweise aus einer Datenbank gelesen und die Seite wird dynamisch erzeugt. Zum Zeitpunkt des Seitenbesuchs wird also eine Menge Code ausgeführt.

Bei einem statischen CMS wird der Code nur einmal bei der Veröffentlichung der Seite ausgeführt. Dabei generiert das System eine fertige Webseite und legt sie als statisches HTML in einem Verzeichnis ab. Beim Besuch der Seite wird kein Code mehr ausgeführt, sondern lediglich die fertige HTML-Seite ausgeliefert.

Statische Systeme sind natürlich wesentlich sparsamer, sicherer und schneller. Vor allem aufgrund ihrer hohen Performance sind sie auch nie vollständig aus dem Enterprise-Bereich verschwunden. Als Beispiele kann man das inzwischen nicht mehr existierende WCMS Gauss oder auch das teil-statische CMS FirstSpirit nennen. Dynamische Systeme versuchen ihren Mangel an Geschwindigkeit und ihren hohen Rechen-Verbrauch durch serverseitige Caching-Logiken abzufangen. Das Caching, also die Zwischenspeicherung der dynamischen Seiten auf dem Server, kann allerdings sehr schnell zu einer komplexen Technologie anwachsen.

Trotzdem haben auch statische Systeme ihre Nachteile: Schon bei der kleinsten Änderung im Footer muss der gesamte Web-Auftritt neu generiert werden. Fügt man seinem Auftritt einen neuen "tag" hinzu, müssen anschließend alle Tag-Seiten (z.B. Übersichtsseiten) im Vorfeld erzeugt werden. Und auch einfache Kommentare und andere Interaktionen mit dem User sind mit statischen Systemen nicht ohne weiteres möglich. Die Entstehung des Web2.0 wäre ohne dynamische Systeme also kaum denkbar gewesen.

#Static Site Generatoren: Unterschiede zum CMS

Trotz der beschriebenen Nachteile wird die statische Webseite mitten im Web2.0-Zeitalter wiederentdeckt. Und moderne Static Site-Generatoren sind sogar noch wesentlich reduzierter als die statischen Content Management Systeme. Denn Static Site Generatoren übernehmen zwar die Logik der statischen Seitengenerierung. Anders als vollwertige CMS bringen die Generatoren jedoch keine Administrationsoberfläche für die Verwaltung der Webseite und auch keine Autorenoberfläche zur Erstellung der Inhalte mit.

  • An die Stelle der Administrationsoberfläche ist die Konsole getreten. Das System und die Webseite werden also über ein Command Line Interface (CLI) administriert und erzeugt.
  • An die Stelle der Autorenoberfläche sind Markdown-Dateien getreten. Sie werden außerhalb des Systems per Hand erstellt oder mit speziellen Markdown-Editoren editiert. Die fertigen Markdown-Files werden dann im Datei-System des Generators abgelegt.

Neue Web-Auftritte werden also im einfachsten Fall auf dem Rechner erzeugt und dann per FTP auf den Server geladen. Zwar gibt es verschiedene Strategien, die Administration der Webseite komplett in das Web zu verlagern und eine "Deployment-Kette" zu bauen. Allerdings bleibt dieses Deployment bei statischen Site Generatoren immer ein recht hürdenreiches Unterfangen, während man sich bei vollwertigen Content-Management-Systemen um solche Fragen nicht kümmern muss.

#Gründe für den Aufstieg

Trotz dieser umständlichen Workflows bringen Site-Generatoren viele Vorteile mit, die für technische Anwender und dort vor allem für Web-Designer und Frontend-Entwickler spannend sind:

  • Im Vergleich zu dynamischen Webseiten, die mit komplexen und trägen Systemen wie WordPress erstellt werden, sind statische Webseiten schlank, performant, sicher und einfach zu warten.
  • Gleichzeitig können mit dem Generator auch große Web-Auftritte mit vielen Inhalten automatisch per Konsolen-Befehl generiert werden.
  • Web-Designer und Frontend-Entwickler können wie bei einem CMS Themes erstellen und den Webauftritt individuell gestalten.
  • Dabei werden Web-Designer und Frontend-Entwickler jedoch von der Backend-Technologie befreit und sie müssen sich nicht mehr um die Integration in ein CMS kümmern.
  • Ähnlich wie bei Flat File CMS benötigen auch Static Site Generatoren keine Datenbank mehr, da alle Inhalte als Markdown-Dateien abgespeichert werden.

Es gibt jedoch auch noch ein paar übergeordnete IT-Trends, die die Static Site Generatoren interessant machen können:

  • Der JAMStack-Trend: Beim JAMStack bestehen Webseiten nur noch aus einfachem HTML-Markup und JavaScript. Alle dynamischen Elemente werden von externen Diensten zur Verfügung gestellt. Die Elemente oder Daten können über eine API (Programmierschnittstelle) mit Hilfe von JavaScript abgerufen und in die statische Webseite integriert werden (JavaScript, APIs, Markup = JAM). Frontend-Frameworks wie Angular, Vue und React bieten sich als Werkzeuge an, und natürlich passen auch Statische Site-Generatoren in diese Strategie gut rein.
  • Der Microservice-Trend: Klassische Anbieter von APIs sind zum Beispiel Facebook, Twitter oder Disqus. Grundsätzlich kann jedoch jede Software mit Hilfe einer API zum Datenlieferant werden. Und der Trend geht dahin, eine große Software in viele kleine Microservices mit unabhängigen APIs zu zergliedern, die dann von Webseiten bei Bedarf genutzt werden können. Auch in diese Entwicklung würden statische Site-Generatoren passen.
  • Der Entkopplungs-Trend: Microservices sind möglichst klein und konzentrieren sich im besten Fall auf eine einzelne Aufgabe. Zum Beispiel die Verwaltung von Produkten oder die Lieferung von Medien. Einzelne Aufgabenbereiche werden also voneinander entkoppelt und unabhängig von anderen Services erledigt. Sie können dann wie Lego zu einem neuen Produkt zusammengefügt werden. Dieser Trend hin zur Entkopplung findet auch im CMS-Bereich statt: Die neuen Headless-CMS kümmern sich beispielsweise nur noch um die Verwaltung und Lieferung von Inhalten und lassen die Seiten-Generierung komplett weg. Diese Aufgabe könnte dann zum Beispiel ein Static Site Generator übernehmen.

All diese Trends sind derzeit jedoch nur für die IT interessant. Für Autoren und Anwender sind diese Entwicklungen weder sichtbar, noch spürbar. Stattdessen sind technisch weniger versierte Autoren bei Static Site Generatoren mit Workflows und Tools wie der Konsole, mit Git, mit Markdown oder mit FTP-Uploads konfrontiert. Damit lässt sich die nötige Akzeptanz im Mainstream natürlich nur schwer erreichen.

Im Dienstleistungs- und Enterprise-Bereich ist die Verbreitung solcher Trends dagegen wahrscheinlicher, weil dort das notwendige technische Know-How vorhanden ist und Argumente wie Sicherheit, Performance und Kostensenkungen schwerer wiegen. Für den Mainstream werden Static Site Generatoren jedoch nur interessant, wenn die Workflows am Ende ähnlich einfach sind, wie bei vollwertigen Content Management Systemen.

#Vom Static Site Generator zum CMS

Die Notwendigkeit, die Workflows von Static Site Generatoren auch für normale Anwender zu vereinfachen, ist natürlich auch den Entwicklern bewusst. Daher sind in den letzten Jahren eine Vielzahl an Tools und Strategien entstanden, die den Einsatz von statischen Webseite-Generatoren vereinfachen sollen. Die Bandbreite sieht ungefähr so aus:

  • Konsole und FTP: Das ist der Grund-Workflow von Statischen Site-Generatoren: Man erstellt die Inhalte lokal mit einem Markdown-Editor, generiert mit dem statischen Website-Generatoren den Webauftritt per Konsole und schiebt das fertige HTML per FTP auf den Webserver.
  • GitHub, GitLab, BitBucket: Ein übliches Szenario ist die Verbindung mit Git-Plattformen wie GitHub oder GitLab. Auf diesen Systemen läuft im Hintergrund der statische Website-Generator Jekyll. Man kann eine neue GitHub-Seite komplett über die Web-Oberfläche erstellen. Die Möglichkeiten sind allerdings sehr begrenzt. Alternativ kann man die Seite und deren Inhalte natürlich immer noch lokal mit Jekyll bearbeiten und die aktualisierten Dateien per Konsole in das Git-Repository schieben.
  • Netlify und Aerobatic: Netlifly und Aerobatic sind zwei Hoster, die sich auf statische Webseiten spezialisiert haben. Beide liefern die statischen Webseiten über ein globales Content Delivery Network (CDN) aus. In der einfachsten Variante kann man bei Aerobatic die fertigen Seiten vom lokalen Rechner per Konsole auf den Hoster schieben. Im nächsten Schritt kann man einen Prozess mit Git zur Inhalteverwaltung und Travis oder Jenkins zur Automatisierung aufsetzen. Netlify geht etwas weiter und bringt sowohl das CI-Tool, als auch ein eigenes NetlifyCMS mit. Man kann die fertige Seite also einfach bei GitHub veröffentlichen, den GitHub-Account mit Netlify verbinden, Änderungen über das NetlifyCMS vornehmen und die geänderte Webseite dann wieder automatisch veröffentlichen. Zugegeben, im Vergleich zu einem normalen CMS ist auch dieser Workflow für den Normal-Anwender zu komplex.
  • Forestry, cloudcannon, DatoCMS, prose.io, siteleaf: Bei diesen Projekten handelt es sich um Cloud-CMS. Grundsätzlich importieren die Dienste statische Webseiten von GitHub, Gitlab oder BitBucket und bieten dann ein webbasiertes CMS zur Bearbeitung der Inhalte an. Die Services funktionieren wie eine Art Remote-CMS, die sich wieder mit Diensten wie Netlify und Aerobatic kombinieren lassen. Prose.io ist dabei eher ein allgmeiner Datei-Editor für GitHub-Projekte und nicht auf Projekte mit statischen Website-Generatoren beschränkt. Forestry hat sich auf Jekyll und Hugo spezialisiert, cloudcannon und Siteleaf auf Jekyll. DatoCMS ist ein Headless-CMS mit support für Jekyll, Hugo, Hexo, Metalsmith, Middleman und Gatsby.
  • Headless CMS: Neben Dienste wie DatoCMS oder cloudcannon können natürlich auch andere Headless-CMS mit einem Static Site Generator kombiniert werden. Der Headless-Anbieter Contentful bietet beispielsweise Erweiterungen für Jekyll, Gatsby, Middleman oder Metalsmith an. Für die Automatisierung der statischen Website-Generierung muss allerdings auch hier erst noch ein Entwickler die Tools über einen Hoster wie Netlify verbinden. Das ist grundsätzlich eher eine Lösung für den Enterprise- und Dienstleistungs-Bereich.
  • Jekyll Admin: Für Jekyll ist im August 2016 ein Admin-Plugin veröffentlicht worden (siehe diese Video-Review). Damit können neue Seiten ähnlich wie bei einem CMS über ein Administrations-Interface erstellt und editiert werden. Das Plugin ist jedoch erst einmal für die Nutzung auf dem lokalen Rechner ausgelegt. Die Veröffentlichung erfolgt im Zweifelsfall immer noch per FTP.
  • LektorCMS: Was bei Jekyll noch als Plugin installiert werden muss, ist bei dem jungen LektorCMS bereits dabei. Lektor verfügt über eine relativ komplette Autoren-Oberfläche zur Erstellung und Verwaltung von Inhalten. Lektor bietet sogar ein Deployment per FTP oder Git mit Hilfe der Autorenoberfläche an. Allerdings muss für die lokale Arbeit mit Lektor immer noch ein Server per Konsole gestartet werden und das Deployment über FTP gilt als eher unsicher.
  • TinaCMS: Tina ist ein "Open-Source Site Editing Toolkit" for React-basierte Frameworks, allen voran für Gatsby und Next.js. Mit Tina lassen sich die statischen Webseiten mit einer vertrauten Mischung aus Formularen und Inline-Editing erstellen. Damit schlägt Tina die fehlende Brücke zum Mainstream-Autoren und es bleibt abzuwarten, ob diese Kombination in Zukunft Schule macht.
  • Publii: Publii ist derzeit das einzige Projekt, das sich an ein nicht technisches Publikum richtet und als vollwertiges CMS (oder besser gesagt als Website-Builder) gelten kann. Publii ist eine Desktop-Applikation für Windows und Mac. Man erstellt seine Seite ähnlich wie in einem CMS, jedoch lokal auf seinem Desktop. Die Synchronisation mit dem Server oder über Git funktioniert automatisch, nachdem man einmalig die Zugangsdaten eingegeben hat. Alles ohne Konsole und komlett mit einem nutzerfreundlichen Interface. So könnte also die künftige Lösung für den Mainstream aussehen.

#Ausblick

Statische Site Generatoren haben bislang noch nicht den Sprung in den Mainstream geschafft. Dafür ist der Ansatz der Generatoren einfach zu technisch. Hinzu kommt, dass die Vorteile von Static Site Generatoren gegenüber älteren und komplexen Systemen wie WordPress zwar gewichtig klingen, im Vergleich zu jungen Content Management Systemen oder schlanken Flat File Systemen jedoch stark verblassen. Auch im klassischen Einsatz-Feld von WordPress – dem autarken und flexiblen Betrieb von Webseiten durch Laien-Anwender – bieten die Static Site Generatoren aufgrund der technischen Anforderungen (Build-Prozess) bislang noch keine überzeugende Alternative. Anders sieht es jedoch im Dienstleistungs- und Enterprise-Bereich aus. Hier könnten sich Static-Site-Generatoren vor allem durch die Kombination mit den neuen Headless-Content-Management-Systemen und mit Diensten wie Gatsby Cloud etablieren. Ganz auszuschließen ist allerdings nicht, dass wir mit dem Durchbruch der statischen Webseite auch wieder eine Renaissance der dynamischen und autark gehosteten Webseite erleben.

© by Sebastian Schürmanns, 2017 - 2024. All Rights Reserved. Built with Typemill.