Die Zukunft ist statisch, die Zukunft ist toll

Einführung in statische Websites und Static Site Generators (SSG)

Statische Websites erleben dank eines neuen Ökosystems, das sich um Static Site Generators, Headless Content Management Systemen (CMS), GitHub, APIs und automatisierte Bereitstellungsprozesse herum entwickelt, ein Revival.

Nach mehr als einem Jahrzehnt traditioneller, Backend-zentrierter CMS wie Drupal, Typo3 oder WordPress erreicht die Frustration mit diesen traditionellen CMS-Systemen ihren Höhepunkt: Leistung, Sicherheit, Konfiguration, responsives Styling und Bereitstellung sind typische Fallstricke, die relativ einfache Website-Projekte unnötig langwierig, kostspielig, schwierig zu pflegen und oft frustrierend machen. Darüber hinaus hat die Verfügbarkeit einer Vielzahl von Plug-ins für CMS-Systeme zu aufgeblähten Websites geführt, die mit Funktionen vollgestopft sind, welche niemand nutzt. Dies verstärkt die Frustration von Website-Nutzern, Eigentümern, Entwicklern und Projektmanagern.

Fokus auf mobile Nutzer

Da die mobile Internetnutzung die Desktop-Nutzung überholt hat, ist es für moderne Online-Auftritte unerlässlich, den Fokus auf die mobilen Nutzer zu verlagern. Schlüsselfaktoren für den mobilen Erfolg sind:

• Reduzierung der Funktionalität auf das Wesentliche, um die Nutzung des knappen Bildschirmplatzes zu optimieren.
• Attraktives Interaktionsdesign, Storytelling und Styling der Seiten, um die flüchtige Aufmerksamkeit der mobilen Nutzer zu gewinnen.
• Steigerung der Leistung durch den Einsatz von Caching-Mechanismen und die Verringerung des Platzbedarfs der Seite, um langsamen mobilen Netzverbindungen entgegenzuwirken.

Modus Operandi eines SSG

Gleichzeitig möchte niemand mehr in die 90er Jahre zurückkehren und einfache Websites in HTML schreiben und per FTP bereitstellen. Diese Websites waren zwar leistungsfähig (keine Datenbankabfragen, kein serverseitiges Rendering von HTML-Markup), sind aber nicht sehr praktisch. Es gibt jedoch ausgereifte statische Website-Generatoren (SSG) wie Jekyll oder neuere Tools wie Hugo oder Middleman. SSGs rendern statische Websites: statisches HTML und statische Assets. Der SSG muss bei jeder Änderung des Inhalts einmal aufgerufen werden, und die geänderten, statischen Webseiten müssen dann über ein CDN bereitgestellt werden.

Die generierte statische Website ist das Äquivalent zum Cache eines herkömmlichen CMS. Die Website ist somit äusserst leistungsfähig, da es keinen Backend-Code oder Datenbankabfragen gibt, die dynamisch HTML erstellen. Da es sich um eine statische Website handelt, kann sie auch über ein CDN bereitgestellt und ausgeliefert werden, was die Website unempfindlich gegenüber Server- oder Rechenzentrumsausfällen macht und einen globalen Leistungsschub für Ihre Website bedeutet.

Sie können den Quellcode Ihrer SSG-basierten Website problemlos in einem Git-Repository hosten. Dies ermöglicht die Versionskontrolle und eine vollständig nachvollziehbare Historie für die Website und die Inhalte. Die Ablage Ihrer Inhalte in einem Git-Repository bietet noch weitere Vorteile, z. B. automatisierte SSG-Builds und -Einsätze über Webhooks sowie die Vorschau produktiver Inhalte auf Entwicklungsversionen. Letzteres ist so einfach wie das Zusammenführen von Inhalten aus dem Master-Zweig in die Entwicklungszweige.

Ein weiterer Vorteil des fehlenden Backends ist die deutlich erhöhte Sicherheit: Sie müssen nicht befürchten, dass sich jemand in Ihren Backend-Server hackt oder bösartigen Code einschleust. Mit einer SSG ist das Leben cool 😎.

Hugo als potenter Static Site Generator

Was den zu verwendenden SSG betrifft, ist Hugo ein sehr leistungsfähiger, in Golang geschriebener Generator für statische Websites, der perfekt geeignet ist, um Webseiten mit attraktiven, strukturierten Inhalten zu erstellen (wie einfache Seiten, Blogposts, Veranstaltungen, Mitarbeiterseiten, Referenzprojekte oder was auch immer Ihnen an Inhalten einfällt). Alles was es braucht, ist ein wenig Konfiguration für jeden “Archetyp” (so nennt Hugo die verschiedenen Inhaltstypen) sowie ein Layout für die Ausgabe jedes Inhaltstyps im HTML-Format. Hugo unterstützt von Haus aus mehrsprachige Seiten und ist Open Source. Die Generierung der gesamten Website für eine kleinere Website mit etwa 20 Inhaltsseiten dauert weniger als 100 μs (Mikrosekunden). Es gibt eine umfangreiche Liste von SSGs unter https://www.staticgen.com/.