Static Website Generator: Statisch ist das neue Dynamisch

In den letzten Jahren etabliert sich immer mehr ein Trend beim Bau von Webseiten: Statische anstatt dynamischer Webseiten.

5 Key Facts:

• Dynamische Webseiten werden beim Abruf vom Server generiert, z.B. bei einem CMS wie WordPress (PHP/MySQL)
• Statische Webseiten bestehen nur aus HTML/CSS/Javascript
• Static Site Generators generieren statische Webseiten im Vorfeld, bieten Trennung von Layout und Content
• Beide Lösungen haben Vor- und Nachteile und der Einsatz ist von Projekt zu Projekt abzuwägen
• Static Site Generators werden auch schon von größeren Unternehmen für kleine bis mittelgroße Webseiten wie Microsites eingesetzt

Erklärung: Dynamisch und statisch

Was sind dynamische Webseiten?
Als dynamische Webseiten werden solche bezeichnet, deren Inhalt beim Aufruf vom Server „dynamisch“ generiert wird. Das ist bei den meisten Content-Management-Systemen (CMS) der Fall.

Das bekannteste Beispiel: WordPress. Hier werden beim Aufruf jedes Mal die Inhalte aus einer Datenbank gezogen und mit Hilfe der serverseitigen Programmiersprache PHP zu einer Seite zusammengebaut. Ist ein Cache konfiguriert, werden die Seiten nur zum Teil und/oder bei Änderungen neu generiert.

Was sind statische Webseiten?
Statische Webseiten bestehen aus HTML, CSS und optional Javascript. Die Seite muss nicht erst durch eine serverseitige Programmiersprache bei Abruf generiert werden.

Und Static Website Generator?
Statische Webseiten-Generatoren generieren komplette statische Webseiten auf dem lokalen Rechner oder in der Cloud. Diese können dann auf einem Server oder in einem Content-Delivery-Network (CDN) abgelegt werden.

Die Generatoren bieten die Möglichkeit, ähnlich wie bei Content-Management-Systemen, Layout-Templates zu verwenden, Inhalt und Darstellung zu trennen und teilweise sogar den Inhalt aus einem externen CMS zu ziehen.

Vorteile und Nachteile statischer Webseiten

Vorteile

• Sicherer, da keine Sicherheitslücken durch Datenbank und Servercode entstehen (gerade beim extensiven Einsatz von fremden Plugins)
• Schneller, da keine serverseitige Programmiersprache mehr ausgeführt werden muss
• Skaliert besser, da bei Trafficspitzen weniger Last auf den Server ausgeübt wird
• Kann in einem Content-Delivery-Network (CDN) abgelegt werden, was die globale Verfügbarkeit und Geschwindigkeit erhöht
• Versionierung und Backup der kompletten Webseite über Git möglich

Nachteile

• Heutige Lösungen sind eher für Programmierer und Tüftler gedacht (trotzdem im Einsatz bei größeren Unternehmen wie Mailchimp)
• Eher für kleine bis mittelgroße Webseiten geeignet (Microsites, Blogs, Firmenseiten, theoretisch aber auch mit Hilfe von Javascript kleine Shops möglich)
• Workflow über Git (GitHub, Bitbucket) fast zwingend, wenn mehr als eine Person an der Webseite arbeitet
• Theoretisch nicht dynamisch, d.h. keine Suche, Update von Preisen etc. out-of-the-Box möglich (praktisch aber über Javascript implementierter)
• Kein CMS und meist wird der Content in Form von Markdown-Dateien erstellt (Anbindung an ein CMS aber zum Teil möglich)

Wie man bei den lesen kann, sind viele davon zu lösen, allerdings mit deutlich mehr einmaligem Aufwand als bei bekannten und etablierten CMS.

Static Website Generators stehen meiner Meinung nach noch am Anfang, aber mit Potenzial! CMS werden Headless („Headless CMS“), d.h. sie bieten nur noch eine Oberfläche zur Content-Erstellung und die Inhalte werden per API bereit gestellt. Diese API kann dann von Static Website Generators, Javascript-Applikationen oder mobilen Apps angesprochen werden. Wordpress.com hat erst kürzlich die Oberfläche von PHP auf Node.js umgestellt und stellt eine solche API bereit. Andere Anbieter wie Contentful haben aus dem Headless CMS schon ein Geschäftsmodell gemacht. Es wird allerdings noch ein wenig dauern, bis dieser Trend im Mainstream angekommen ist.

3 Static Site Generators vorgestellt

Im folgenden stelle ich Generatoren für statische Webseiten vor, die ich selbst schon im Einsatz hatte. Es handelt sich nur um einen kleinen Teil der vorhandenen Lösungen. Einen Überblick kann man sich auf der Webseite StaticGen verschaffen (gerankt nach GitHub Stars).

1. Hugo

Hugo basiert auf der Programmiersprache Go, die bekannt dafür ist sehr, sehr schnell zu sein. Um es kurz zu machen: Hugo ist der mit großem Abstand schnellste Static Site Generator. Webseiten mit vielen einzelnen Seiten profitieren natürlich am meisten von der Geschwindigkeit beim Generieren der Webseite.

Hugo ist aktiv in der Entwicklung, Open-Source, wie übrigens alle anderen hier genannten Static Site Generators ebenfalls, und bietet eine Vielzahl an Funktionen out-of-the-box. Nicht so schön: In der Template-Sprache von Go findet sich nicht jeder gleich zurecht und bisher existiert keine Möglichkeit der Erweiterung durch Plugins.

Aber auch wenn die meisten Entwickler sich eher bei den Programmiersprachen Node.js, Python oder Ruby heimisch fühlen werden, kann der Go-basierte Static Site Generator Hugo aufgrund der überragenden Geschwindigkeit punkten.

Ideal für: Webseiten mit viel einzelnen Seiten und vielen Taxonomies (Kategorien, Tags etc.) wie z.B. mittelgroße Blogs

2. Harp.js

Harp ist ein Node.js basiertes Build Tool, Static Site Generator und Server in einem. Das schöne: Die meisten Dinge erledigen sich völlig ohne Konfiguration und Code.

Damit ist Harp eine der einfacheren Lösungen, die, wenn sie erstmal auf dem lokalen Rechner installiert ist, auch von Nicht-Tüftlern problemlos bedient werden kann. So lassen sich kleinere Webseiten wie Microsites im Handumdrehen erstellen. Sass, Less, Markdown, Jade etc. werden automatisch zu HTML, CSS und Javascript konvertiert. Das geht einfacher als mit Grunt, Gulp und Co.

Die Einfachheit und das Mantra „Convention over Configuration“ hat aber seinen Preis: Bei mittelgrößeren bis größeren Webseiten schwächelt das System nicht nur aufgrund seiner Geschwindigkeit, sondern aufgrund der eingeschränkten Einstellmöglichkeiten. Zudem erlauben die Markdown-Dateien nicht wie bei anderen Static Site Generators ein „YAML Front Matter“. Daher müssen die Metadaten etwas umständlich getrennt von der Markdown-Datei in einer zentralen JSON-Datei je Ordner hinterlegt werden.

Ideal für: Microsites, kleinere Unternehmens- oder Produkt-Webseiten

3. Metalsmith

Metalsmith ist definitiv der Static Site Generator für Tüftler. Das Node.js basierte Skript kann an sich nicht viel, außer durch eine Reihe von Dateien zu gehen und diese zu manipulieren. Es existieren aber eine ganze Reihe an Plugins, die dann das machen, was man von einem Static Site Generator erwartet. Der dafür notwendige Code erinnert stark an das bekannte Build Tool Gulp.

Der Ansatz der einzelnen Plugins bzw. Module ist gut und entspricht der Node.js-Entwicklerphilosophie. Allerdings kommt es oft zu Fehlern, wenn ein Skript in der Kette fehlerhaft oder nicht up-to-date ist.

Ideal für: experimentierfreudige Entwickler

Die drei hier vorgestellten Static Site Generator basieren entweder auf Go oder Node.js. Weitere in den Programmiersprachen Python, Ruby und PHP sind ebenfalls verfügbar. PHP ist zwar in der (deutschen) Entwicklergemeinde weit verbreitet, eignet sich aber meines Erachtens nicht wirklich als Grundlage für einen Static Site Generator. Warum? Das Abrufen, Manipulieren und Speichern von Dateien ist in PHP um ein Vielfaches langsamer als beispielsweise in Node.js oder Go. Zudem existieren im Ecosystem von Node.js einfach mehr Skripte und Tools für den Build Process wie CSS-Präprozessoren. Nach dem Motto: „Pick the right tool for the right job.“