Die 10 besten Static-Site-Generatoren

Für viele Arten von Websites stellt ein Static-Site-Generator (SSG) die optimale Entwicklungslösung dar. Mit geringer Komplexität bei gleichzeitig hoher Performance und Sicherheit der resultierenden Sites erfreuen sich SSGs großer Beliebtheit. Die Nutzung eines Static-Site-Generators rückt den Fokus auf das Wesentliche: überzeugende Inhalte und eine hochoptimierte Benutzererfahrung („User Experience“, UX). Wir stellen die besten Static-Site-Generatoren vor und geben Tipps zur Auswahl und zum Einsatz.

Prinzipiell handelt es sich bei einem Static-Site-Generator um eine Software, welche eine statische Website erzeugt. Damit stehen SSGs im Gegensatz zu den ebenfalls weit verbreiteten Content Management Systemen (CMS) wie WordPress, Joomla! und Co. Gemessen an den verbreiteten CMS bestechen Static-Site-Generatoren durch deutlich geringere Komplexität bei gleichzeitig höherer Sicherheit. Manche SSGs erlauben sogar den Betrieb eines Content Management Systems als Headless CMS.

Das überzeugendste Argument für SSGs liegt jedoch in der Performance der erzeugten Websites. Eine statische Website besteht lediglich aus einer Sammlung von Dateien. Dies lässt sich mit minimalem Aufwand hosten, da keine spezielle Serverumgebung für die Ausführung von Code benötigt wird. Mit SSGs werden HTML- und CSS-Elemente direkt bei einer Veränderung des Codes gerendert. Durch dieses sogenannte Prerendering kann die fertige Website direkt bereitgestellt werden, wodurch die Performance erhöht wird. Im Gegensatz dazu wird eine dynamische Website erst nach Seitenaufruf serverseitig gerendert. Statische Sites sind auch viel einfacher zu cachen; beliebt sind sogenannte Edge-Caches, welche global verteilt über Content Delivery Networks (CDN) zur Verfügung gestellt werden. Beim Zugriff auf statische Sites ergeben sich schnellste Zugriffszeiten, eine optimale Benutzererfahrung, sowie das beste Ranking bei Suchmaschinen.

Bei den Static-Site-Generatoren handelt es sich quasi um eine „Back to the Roots“-Bewegung. Denn mit statischen Sites, bestehend aus HTML-Dokumenten, welche von Browsern abgerufen werden, begann der Siegeszug des World Wide Web. Wurden damals die einzelnen Seiten oft mühselig per Hand erstellt, kommen heutzutage mächtige Tools zum Einsatz. Static-Site-Generatoren liefern einen bis dato nahezu unerreichten Grad an Integration und Optimierung der auf den Seiten befindlichen Inhalte und Strukturen.

Static Side Generatoren sind ein Teil des sogenannten Jamstacks.Dessen Name leitet sich von den Anfangsbuchstaben von JavaScript, APIs und Markup

Websites, welche auf dem Jamstack beruhen, sind statische Websites, das heißt, die einzelnen Seiten liegen als HTML-Dokumente vor und werden an den Browser übertragen. Dies steht im Kontrast zu „dynamischen Websites“, bei denen die HTML-Dokumente auf dem Server programmatisch erzeugt werden. Die einzelnen Seiten einer Jamstack-Website sind untereinander verlinkt. Die Inhalte liegen oft in einem einfachen Markup-Format (wie Markdown) vor. Etwaige dynamische Inhalte, wie Kommentar- oder Suchfunktion, sind in JavaScript realisiert. Der Datenaustausch läuft über APIs, welche auf entfernten Systemen laufen.

Mit Jamstack werden Websites bereits während ihrer Build Time mithilfe von Static Side Generatoren generiert, was ihre Performance optimiert. Im Gegensatz dazu werden „klassische“ Websites während der Laufzeit bzw. Run Time generierten, was zu längeren Ladezeiten führt.

Aufgrund des einfachen Wirkprinzips und der großen Beliebtheit hat sich ein florierendes Ökosystem an Static-Site-Generatoren (SSG) entwickelt. Die Website Jamstack.org listet zum September 2021 über 300 SSGs und bietet eine Übersicht der zum Einsatz kommenden Technologien. Wir beziehen uns in der folgenden Auflistung auf Jamstack.org und sortieren die besten Static-Site-Generatoren nach deren Bewertung auf GitHub:

Schauen wir uns im Folgenden die besten Static-Site-Generatoren im Vergleich an.

Bei Next handelt es sich zahlenmäßig um den derzeit beliebtesten Static-Site-Generator (SSG). Next ist in JavaScript geschrieben. Für das Kompilieren wird lokal Node.js genutzt. Auch Server-Side-Rendering ist mit Node.js möglich. Als Template-Sprache kommt das JavaScript-Framework „React“ zum Einsatz, wobei der „TypeScript“-Dialekt unterstützt wird. So lassen sich modulare Komponenten erstellen, welche die Inhalte der Site enthalten.

Vorteile

• sowohl Static-Site-Generation (SSG) als auch Server-Side-Rendering (SSR) werden unterstützt
• erlaubt inkrementelle Regeneration geänderter Seiten

Nachteile

• enge Bindung zwischen Framework und Hosting-Plattform
• benötigt gutes Verständnis von JavaScript und React
• Dokumentation hauptsächlich für Linux- und Mac-Benutzer

Wie sich im Namen widerspiegelt, ist der Static-Site-Generator (SSG) Hugo in der Programmiersprache Go geschrieben. Anders als bei den meisten SSGs wird Hugo als einzelne Binärdatei ausgeliefert. Die sich daraus ergebende hohe Performance erlaubt die Erstellung statischer Sites mit tausenden von Seiten. Konzeptuell baut Hugo auf vielen der Prinzipien auf, die das SSG-Urgestein Jekyll bekannt machte.

Vorteile

• mit Build-Geschwindigkeit von ca. 1 ms pro Seite ausgesprochen schnell
• eignet sich für Erzeugung großer Sites
• als Binary ausgeliefert, daher so gut wie überall lauffähig
• Theme-Bibliothek und „Data-Driven Content“ Feature

Nachteile

• Programmiersprache Go und Template-Sprache Go Templates nicht weit verbreitet

Bei Gatsby handelt es sich nach Aussage der Homepage um einen React-basierten Entwicklungsansatz, welcher Rapid Development auf Grundlage einer GraphQL-Datenpipeline ermöglicht. Gatsby wird oft eingesetzt, um WordPress-Sites performant zu machen. Dabei werden die Inhalte per GraphQL-Schnittstelle ausgelesen und via React in eine statische Website verpackt. Durch dieses Entkoppeln von Front- und Backend wird WordPress zum „Headless CMS“. Mit Gatsby lassen sich aber auch „Progressive Web Apps“ (PWA) erstellen.

Vorteile

• ausgefeilte Bild-Optimierungen während des Build-Prozesses
• Hot Reloading für unmittelbare Spiegelung von Änderungen im Frontend
• Pre-Fetching von Inhalten beim Scrollen der Seite

Nachteile

• historisch schwache Performance bei der Erzeugung großer Sites mit vielen Seiten

Bei Jekyll handelt es sich um das Urgestein der Static-Site-Generatoren (SSG). Die Software machte das Konzept des SSG populär und führte zur weiten Verbreitung der Technologie. Konzeptuell ist der Static-Site-Generator recht simpel: Inhalte aus Markdown-Dateien werden in Templates angeordnet und als statische Site ausgeliefert. Jekyll eignet sich daher besonders gut zum Erzeugen von Blogs und Dokumentationen. Der SSG ist in Ruby geschrieben und ist als Unterbau der „GitHub Pages“ in den Code-Hosting Dienst GitHub integriert.

Vorteile

• einfach zu nutzen
• erzeugt Frontend-Code, ohne zwingend ein JavaScript-Framework einzubinden
• volle Kontrolle über das an den Browser ausgelieferte JavaScript

Nachteile

• Ruby heutzutage weniger verbreitete Sprache
• erfordert unter Windows relativ komplexes Setup

Wie am Namen zu erkennen, handelt es sich bei Nuxt um einen von Next inspirierten Static-Site-Generator (SSG). Jedoch kommt als Komponenten-Framework Vue anstelle von React zum Einsatz. Wie Next bietet auch Nuxt mehrere Einsatz-Modi: sowohl Static-Site-Generation (SSG) als auch Server-Side-Rendering (SSR) werden unterstützt.

Vorteile

• Vue in der Regel einfacher zu erlernen und einzusetzen als React
• hoher Grad an Modularität
• via Plugins erweiterbar

Nachteile

• kleinere Community als Next; daher evtl. weniger Dokumentation und Support

Hexo bewirbt sich selbst als schnelles, simples und mächtiges Blog-Framework. Der Fokus liegt also auf dem Erzeugen von Blogs und anderen Sites, deren Inhalte sich als Sammlung von Markdown-Dateien vorhalten lassen. Damit ordnet Hexo sich in die Klasse der Jekyll-ähnlichen Static-Site-Generatoren ein. Durch den Einsatz von Plugins lässt sich eine Vielzahl von Template-Sprachen nutzen. Um schnell ein Design auf die Beine zu stellen, wählt man eins der vorgefertigten Themes.

Vorteile

• Plugins und Themes
• schnelle Generierung ganzer Sites mit hunderten von Seiten

Nachteile

• geringerer Funktionsumfang im Vergleich mit mächtigeren Lösungen

Mit Vuepress steht ein weiterer Static-Site-Generator (SSG) zur Verfügung, welcher auf Vue als Template-Sprache setzt. Das Mantra der Software lautet „Konvention ist besser als Konfiguration“. So lässt sich der SSG ohne großen Aufwand einsetzen; im einfachsten Fall reicht es, Markdown Dateien in einen speziellen Ordner zu legen und den Build-Prozess auszulösen. VuePress eignet sich besonders gut zum schnellen Erstellen von Dokumentationen.

Vorteile

• minimales Setup
• nutzt Vue und Webpack
• unterstützt Vue-Komponenten in Markdown

Nachteile

• geringerer Funktionsumfang im Vergleich mit mächtigeren Lösungen
• starker Fokus auf der Erstellung von Dokumentationen

Der Eleventy Static-Site-Generator wird oft als Jekyll-Alternative, bzw. „Jekyll in JavaScript implementiert“ beworben. Wie der berühmte Vorreiter erzeugt Eleventy statische Sites, ohne zwingend ein clientenseitiges JavaScript-Framework wie React oder Vue einzubauen. So verbleibt die volle Kontrolle über die ausgegebenen Seiten beim Entwickler. Das wohl auffallendste Merkmal von Eleventy ist die Flexibilität des Tools. Es lassen sich vielerlei Sprachen und Formate nutzen; das Standardverhalten des SSG lässt sich per Konfiguration weitgehend anpassen.

Vorteile

• Flexibilität; erlaubt gleichzeitige Nutzung verschiedener Template-Sprachen
• statische Site enthält kein JavaScript-Framework

Nachteile

• erfordert im Gegensatz zu anderen Lösungen mehr manuelle Anpassungen und technisches Verständnis
• noch kleine Community, daher relativ wenig Dokumentationen und Tutorials

Bei Gridsome handelt es sich um einen weiteren Static-Site-Generator (SSG), welcher das Vue-Framework als Template-Sprache verwendet In vielerlei Hinsicht orientiert sich die Software am Vorreiter Gatsby. So kommt eine Reihe ausgefeilter Optimierungen zum Einsatz: So werden beispielsweise Bilder automatisch für responsive Design vorbereitet und im fertigen HTML-Dokument durch spezielle Platzhalter ersetzt. Erst wenn ein Bild beim Scrollen in den Sichtbereich des Nutzers gerät, wird das passende Bildmaterial vom Server nachgeladen. Wie bei Gatsby lässt sich GraphQL neben Markdown als Datenquelle nutzen; so eignet sich Gridsome, um WordPress und Co. mit einer modernen, schnellen Benutzeroberfläche zu versehen.

Vorteile

• vielfältige Optimierungen: Code Splitting, Image Lazy Loading, etc.
• eignet sich zum Erstellen einer Vue Single Page Application (SPA)
• unterstützt GraphQL
• Hot Reloading spiegelt Änderungen direkt im Browser wider

Nachteile

• geringerer Funktionsumfang im Gegensatz zu Gatsby
• noch kleinere Community

Bei Jigsaw handelt es sich um einen der wenigen in PHP geschriebenen Static-Site-Generatoren (SSG). Dabei richtet sich die Software gezielt an PHP-Entwickler, welche an das Ökosystem des beliebten Laravel-Frameworks gewöhnt sind. So kommt mit Blade dieselbe Template-Sprache zum Einsatz; auch die Asset-Pipeline ist mit Laravel Mix gleich. Als Datenquelle kommen hauptsächlich lokale Markdown-Dateien zum Einsatz.

Vorteile

• baut auf bekannten Laravel-Tools auf

Nachteile

• Blade Template-Sprache nur im Laravel-Ökosystem geläufig
• geringer Funktionsumfang im Vergleich mit komplexeren Lösungen
• weniger ausgefeilte Optimierungen auf der fertigen Seite

Um den besten Static-Site-Generator (SSG) für ein Projekt zu wählen, gilt es, einige Fragen zu beantworten. Zunächst sollte man aufklären, welche Art von Site benötigt wird. Handelt es sich um einen Blog, oder eine Sammlung von Landing Pages? Dann eignet sich ein simpler SSG, welcher Seiten aus einer Handvoll Markdown-Dateien erzeugt. Oder wird eher eine Web-App oder ein Online-Shop gebraucht? Dann lohnt es sich, einen Komponenten-orientierten SSG auf Basis von React oder Vue in Betracht zu ziehen. Alternativ können Sie auch auf einen Static Side Generator zurückgreifen, der wie zum Beispiel Next auch das Server-Side-Rendering unterstützt.

Auch die Erfahrung der beteiligten Entwickler sollte in die Wahl des besten Static-Site-Generators (SSG) einbezogen werden. Je nach SSG steht gegebenenfalls nur eine Template-Sprache zur Verfügung. Dann ist es vorteilhaft, wenn die Entwickler mit der Sprache vertraut sind. Andere SSG sind in dieser Hinsicht flexibler; die Entwickler können aus einer Vielzahl an Template-Sprachen wählen. Ferner gilt zu unterscheiden, ob die Template-Sprache nur während des Build-Prozesses zum Einsatz kommt (Twig, Liquid), oder eng mit dem Frontend verwoben ist (React, Vue).

Als nächster wichtiger Punkt muss geklärt werden, woher die Inhalte für die Site stammen. Wird eine Site von Grund auf neu gebaut, lassen sich die Inhalte unter Umständen komplett in Markdown hinterlegen. Oder handelt es sich um eine existierende Site, welche bereits große Mengen an Inhalten enthält? Dann sollte ein Static-Site-Generator zum Einsatz kommen, welcher über definierte Schnittstellen wie GraphQL auf Inhalte unterschiedlicher Quellen zugreifen kann.

Auch das Hosting spielt eine Rolle bei der Wahl des besten Static-Site-Generators. Denn je nach Serverumgebung stehen nicht unbedingt alle Sprachen bzw. Ausführungsumgebungen zur Verfügung. Beim Hosting im Container ist dieser Punkt jedoch vernachlässigbar.

Zu guter Letzt sollte man bei der Wahl des besten Static-Site-Generators das jeweilige Ökosystem im Auge behalten. Es gilt, Nischenlösungen und Industrie-Standards voneinander abzugrenzen. Eine größere Community führt automatisch zu einem größeren Fundus an Dokumentation, Tutorials und hilfreichen Reports über aufgetretene und gelöste Fehler. Auch die Vertrautheit des SSG bei Entwicklern und Content-Mitarbeitern ist ein wichtiger Faktor für die Entscheidungsfindung.

Bei einem Static-Site-Generator (SSG) kommt im Gegensatz zu den meisten Content Management Systemen keine Datenbank zum Einsatz. Stattdessen liegen alle Bestandteile als Dateien vor. Dazu zählen die Inhalte und Assets für die statische Website, sowie Code und Konfiguration des SSG. Diese lassen sich allesamt in einem Git-Repository verwalten, wodurch Versionskontrolle und Kollaboration gegeben sind.

Um mit einem Static-Site-Generator eine statische Website zu bauen, werden HTML-Dokumente und Asset-Dateien (Bilder, Scripte, Stylesheets) in einem Build-Prozess erzeugt. Im darauf folgenden Deploy-Schritt werden die Dateien auf einen Webserver geladen. Mit IONOS Deploy Now lässt sich der gesamte Ablauf automatisieren. Bei jeder Änderung des Repository wird automatisch der Build-Prozess ausgelöst und die Dateien auf dem Server erneuert. Deploy Now greift dabei auf GitHub Actions zurück, so dass die Build-Logs direkt im GitHub-Dashboard angezeigt werden.

Deploy Now unterstützt die gebräuchlichen Static-Site-Generatoren. Ferner sind Staging-Umgebungen, kostenloses SSL und DDoS-Schutz im Funktionsumfang enthalten; Kunden können ihre eigenen Domänen nutzen. Mehr Informationen zur technischen Konfiguration, sowie Tutorials und Schnellstartanleitungen für alle gebräuchlichen Static-Site-Generatoren finden sich in der Deploy Now Dokumentation.