In diesem Artikel werden wir nach einer kurzen Klärung der Fragen “Was ist ein Static Site Generator?” und “Warum sollte man sowas benutzen?” vor allem eine Einführung in die Benutzung des Static Site Generator Hugo bieten.

Was ist ein Static Site Generator?

Ein Static Site Generator (SSG) ist ein Werkzeug zur Erstellung statischer Webseiten, das Text mit vorgefertigten Templates kombiniert und das Ergebnis primär als HTML-Dokument ausgibt. Der Vergleich zu Content Management Systemen (CMS) wie Wordpress, Drupal & Co liegt nahe. Aber im Gegensatz zu diesen monolithischen Systemen wird das entsprechende HTML-Dokument nicht mit jeder Anfrage erneut generiert, sondern nur einmalig. Um genau zu sein müssen weder der SSG noch ein Interpreter wie PHP auf dem Server installiert sein, da alle benötigen Dokumente bereits vorliegen und nur noch durch einen Webserver ausgeliefert werden müssen.

Warum?

• Mehr Sicherheit

Durch klar abgegrenzte Microservice APIs sind die möglichen Angriffsvektoren eingeschränkt und besser abzuschätzen.

• Kostengünstigere und einfachere Skalierbarkeit

Wenn die Auslieferung einer Webseite nur statische Dateien umfasst, ist die Skalierungfrage einfach mit mehr Servern beantwortet. Dabei bieten sich beispielsweise Content Delivery Networks (CDN) optimal an.

• Höhere Geschwindigkeit

Warum sollte man auf eine jedes Mal erneut generierte Webseiten warten, wenn man sie auch einmalig vorbereiten kann? Nichts schlägt vorgefertigte Daten verteilt über ein CDN, wenn es darum geht, die Zeit bis zum ersten Byte zu minimieren.

• Bessere Entwicklererfahrung

Lose Kopplung und Trennung der Kontrolle ermöglichen eine parallele fokussierte Entwicklung der einzelnen Schnittstellen, die sich so auch noch besser debuggen lassen.

Warum ausgerechnet Hugo?

Hugo ist einer der vielen SSGs, die der Markt aktuell zu bieten hat. Er ist dank seiner Open Source Lizenz unabhängig von einem einzelnen Hersteller und auch für kommerzielle Zwecke kostenlos nutzbar. Zudem wird diese Software regelmäßig mit Updates, Patches und neuen Features durch seine aktive Entwicklergemeinschaft versorgt.
Neben der pfeilschnellen Performance ist auch die Distributionsform als statisches Programm ein großer Vorteil gegenüber den Mitbewerbern. So ist neben dem Download einer einzelnen Datei keine weitere Installation einer Ausführungsumgebung oder anderen Abhängigkeiten nötig.

Der Weg zur ersten Seite

Systemspezifische Vorbereitung

Die folgenden Schritte müssen nur einmalig für jedes System ausgeführt werden:

  1. Die zum Zeitpunkt der Veröffentlichung aktuelle Hugo Version 0.58.3 kann man sich auf der Github-Seite des Projekts für sein jeweiliges System herunterladen.
  2. Das entpackte Programm legt man sich dann in ein Verzeichnis, das man noch seinem PATH hinzufügt. Alternativ kann man beim Aufruf des Programms auch immer den absoluten Pfad zur Datei angeben.

Projektspezifische Vorbereitung

Für jedes Projekt legt man sich ein Projektverzeichnis an. Für unser Beispiel verwenden wir ~/website.
Hugo kann uns diese Arbeit mit hugo new site ~/website abnehmen.

Theme finden und installieren

Eine große Auswahl an Themes findet man unter themes.gohugo.io. Die meisten Entwickler empfehlen eine Installation via Git. Für einen ersten Test genügt es allerdings auch das Theme in das entsprechende Verzeichnis manuell zu kopieren.
Beispielsweise laden wir das Theme Simplicity herunter und legen es in ~/website/themes ab. Die theme.toml wäre also unter ~/website/themes/simplicity-master/theme.toml erreichbar.
Um Hugo anzuweisen, dass das neue Theme benutzt werden soll, editieret man die config.toml im Projektverzeichnis und weist der Variable theme als Wert den entsprechenden Verzeichnisnamen in themes zu. Für unser Beispiel fügen wir also theme = "simplicity-master" hinzu. Dabei kann man auch direkt den Titel und Sprachcode der Seite anpassen. Unsere exemplarische Konfiguration sieht also wie folgend aus:

    baseURL = "http://localhost:1313/"
    languageCode = "de-de"
    title = "Meine grandiose Webseite"
    theme = "simplicity-master"

Seite erstellen

Ganz simpel dargestellt unterscheidet Hugo innerhalb eines Projekts zwischen zwei Seitentypen: Listen- und Einzelseiten. Listen bestehen größtenteils aus Verweisen auf Einzelseiten und Einzelseiten umfassen die eigentlichen Inhalte, die man selbst verfasst. Um Hugo verständlich zu machen, dass es sich um eine Liste handelt, benennt man die Datei _index.md. Hugo erwartet als Startseite eine Liste, da hier der Ausgangspunkt für weitere Verlinkungen ist. Um diese zu erstellen kann man hugo new _index.md benutzen, allerdings wird die “Front Matter” dann YAML-codiert. Stattdessen kann man die _index.md im Verzeichnis content auch manuell anlegen und die Front Matter auch in TOML oder JSON angeben. Als Front Matter bezeichnet man im Hugo Umfeld die Metadaten am Anfang eines Dokuments. Für unser Beispiel schreiben wir also in ~/website/content/_index.md Folgendes:

+++
title = "Startseite"
+++

# Hallo Webseitenbesucher

Schön, dass Sie den Weg auf unsere Webseite gefunden haben.  
Wir bieten Ihnen hier beeindruckende Produkte, wie zum Beispiel die "Lottozahlen as a service"-API.

Die durch drei + Zeichen eingerahmte Zeile ist die eben erwähnte Front Matter. Im Gegensatz zu unserem sehr simplen Beispiel umfasst sie meist mehr als nur die Variable title, die logischerweise den Titel der Seite bestimmt.
Befinden sich --- am Anfang und Ende, ist die Front Matter YAML-codiert, +++ steht für TOML und ein einzelnes JSON-Objekt mit Leerzeile am Schluss bedeutet wenig überraschend JSON. Dabei müssen die Seiten innerhalb eines Projekts nicht alle die gleiche Codierung haben.

Anhand der Dateiendung oder des Beispiels wird dem aufmerksamen Leser schon aufgefallen sein, dass die für den Inhalt verwendete Auszeichnungsprache Markdown ist. Wer möchte, kann allerdings auch direkt HTML verwenden.

Showdown

Nun will man nach der ganzen Vorbereitung auch die Früchte seiner Arbeit sehen. Dazu kann man den in Hugo eingebauten Entwicklungsserver im Projektverzeichnis nutzen. Für unser Beispiel führen wir also in ~/website den Befehl hugo server aus. Ist der Port 1313 bereits belegt, sucht sich Hugo randomisiert einen freien Port und teilt uns diesen via Standardausgabe mit. Sollte der Standardport allerdings frei sein, können wir direkt unter http://localhost:1313 unsere neue Webseite bewundern.

Ist man mit der Seite zufrieden, kann man die baseurl in der config.toml entsprechend seiner Live-Umgebung anpassen und sich die statischen Ressourcen via hugo (also ohne Unterkommando server) generieren lassen, die dann im Verzeichnis public aufzufinden sind. Den Inhalt dieses Verzeichnisses lädt man dann in den gewünschten Webroot oder verteilt ihn via CDN.

So kann man sich innerhalb kürzester Zeit eine hochperformante Internetpräsenz ohne großes Investment erstellen. Zusätzliche Informationen zu Hugo findet man in der englischsprachigen Dokumentation und demnächst auch in Form tiefergehender Artikel hier. Viel Spaß beim Ausprobieren und Weiterentwickeln!