Hugo bezeichnet nicht nur ein Modegetränk, sondern auch einen äußerst pfiffigen statischen Website-Generator. Dessen ansehnlicher Funktionsumfang erschwert allerdings den Einstieg ein wenig.

Es wäre doch praktisch, wenn Sie beim Erstellen einer neuen Website alles, was Sie veröffentlichen wollen, nur in eine Reihe von Textdateien schreiben müssten. Hugo [1] macht genau das möglich. Das Werkzeug generiert aus Markdown-Dateien automatisch eine fertige Website, die Sie nur noch auf einen Server hochladen müssen. Dort benötigt der so erzeugte Internet-Auftritt weder eine Skriptsprache wie PHP noch eine Datenbank oder andere Abhängigkeiten. Bei Änderungen an dieser statischen Website müssen Sie allerdings Hugo erneut über Ihre Texte laufen lassen.

Hugo kümmert sich auch um die Optik der Seiten: Das Werkzeug formatiert Ihre Texte anhand einer frei wählbaren Designvorlage, dem sogenannten Theme. Welche Passagen in Ihren Texten fett oder kursiv erscheinen sollen und welche Begriffe Überschriften darstellen, legen Sie mit Markdown-Kürzeln fest. Alternativ übernimmt Hugo dazu auch die entsprechenden HTML-Tags. Obwohl die Arbeitsweise von Hugo stark an Jekyll [2] erinnert, weicht das Werkzeug in vielen Bereichen vom Konkurrenten ab.

Anders als Jekyll ist Hugo in der Programmiersprache Go implementiert. Dadurch arbeitet es schneller als das auf der Skriptsprache Ruby basierende Jekyll. Darüber hinaus kommt Hugo in Form eines kompakten Programms auf die Festplatte, das keine weiteren Abhängigkeiten besitzt und noch nicht einmal zwingend eine Installation benötigt. Lassen Sie sich von der derzeit noch etwas niedrigen Versionsnummer 0.80.0 nicht abschrecken: Hugo gehört wie Jekyll zu den am meisten genutzten statischen Website-Generatoren und erzeugt unter anderem den Internet-Auftritt des Let’s-Encrypt-Projekts [3].

Blitzstart

Die meisten gängigen Distributionen halten Hugo in ihren Repositories vor. Sofern Sie das Werkzeug nicht in der Paketverwaltung der eingesetzten Distro finden oder diese nur eine veraltete Hugo-Version offeriert, wechseln Sie auf die Github-Seite des Projekts [4] und laden von dort das zur verwendeten Distribution passende Paket herunter.

Im Zweifelsfall greifen Sie zum Archiv mit der Endung _Linux-64bit.tar.gz (auf 32-Bit-Systemen: _Linux-32bit.tar.gz). Sobald Sie das Archiv entpacken, finden Sie darin das Programm hugo. Das ist schon alles, was Sie benötigen. Kopieren Sie die Anwendung an eine geeignete Stelle im System, etwa nach /usr/local/bin/. So können sogar alle Nutzer des Systems Hugo nutzen. Alternativ legen Sie es in Ihrem Arbeitsverzeichnis zusammen mit der entstehenden Website ab. In dem Fall müssen Sie Hugo allerdings immer mit ./hugo aus dem entsprechenden Verzeichnis heraus aufrufen.

Die Inhalte Ihrer Website sollten Sie in einem Arbeitsverzeichnis sammeln. Möchten Sie beispielsweise ein Blog mit Linux-Nachrichten erstellen, bietet sich linuxfacts/ als Ordner an. Erstellen Sie ihn nicht selbst, sondern überlassen Sie das Hugo:

$ hugo new site linuxfacts

Das Werkzeug legt dabei gleichzeitig noch eine Konfigurationsdatei und mehrere Unterordner an (Abbildung 1). Während die Konfigurationsdatei das Verhalten von Hugo steuert, helfen Ihnen die Verzeichnisse dabei, etwas Ordnung zu halten. Die Inhalte der Website sammelt beispielsweise der Ordner content/. Jede darin abgelegte Textdatei wandelt Hugo später in eine eigene Webseite um.

Abbildung 1: Hugo behandelt die Dateien in den einzelnen Verzeichnissen unterschiedlich. public/ entsteht nach dem ersten Bau der Website und enthält den fertigen Internet-Auftritt.

Seitenweise

Um die Beispielseite mit etwas Leben zu füllen, soll als Erstes ein Impressum her. Erstellen Sie dazu im Ordner content/ die neue Textdatei impressum.md. Die Endung md weist Hugo darauf hin, dass dabei Markdown die Überschriften und andere Elemente kennzeichnet. Möchten Sie lieber mit klassischen HTML-Tags arbeiten, verwenden Sie stattdessen die Endung .html.

Öffnen Sie die Datei impressum.md, und füllen Sie sie mit dem Impressum aus Listing 1. Ganz am Anfang der Textdatei erwartet Hugo immer ein paar allgemeine Informationen über die Seite. Dazu zählt insbesondere deren Titel. Die Daten in diesem sogenannten Front Matter wertet Hugo aus und baut sie später in die Seite ein. Abhängig von der gewählten Designvorlage erscheint beispielsweise der title prominent als Überschrift.

Jeweils drei Striche rahmen die Informationen ein, die dem YAML-Standard folgen: In jeder Zeile steht links eine Bezeichnung für die nach dem Doppelpunkt folgenden Informationen. Anhand der Bezeichnung wie date kann Hugo später das Datum dem richtigen Platz auf der Webseite zuordnen. Anstelle des YAML-Formats dürfen Sie die Informationen auch mit TOML, JSON oder Org-Schlüsselwörtern notieren. Im Fall von TOML verwenden Sie +++ anstelle von ---; JSON-Daten kapseln Sie zwischen geschweiften Klammern ({}) ein, denen eine Leerzeile folgt.

---
title: "Impressum"
date: 2021-02-09T11:52:00+01:00
---
Verantwortlich für den Inhalt:
Tux Pinguin
Distributionsweg 11
81739 München
![Das offizielle Linux-Maskottchen](/tux.png)

Nach demselben Prinzip können Sie jetzt weitere Seiten anlegen. Diese wiederum dürfen Sie innerhalb des Ordners content/ in weitere Unterverzeichnisse sortieren. So könnten Sie etwa alle Nachrichtenmeldungen unter content/news/ sammeln. Bilder, CSS und Javascript gehören hingegen in das Verzeichnis static/. Die darin liegenden Dateien kopiert Hugo unverändert in die fertige Website.

Wie Sie ein dort abgelegtes Bild einbinden, demonstriert die letzte Zeile in Listing 1. Sie dürfen folglich eine relative Pfadangabe ohne ein vorangestelltes /static/ verwenden. Innerhalb von static/ dürfen Sie zudem die Dateien nach Belieben in Unterverzeichnisse sortieren.

Automatischer Entwurf

Auch beim Anlegen der einzelnen Seiten hilft Hugo. Der folgende Befehl erstellt im Unterverzeichnis content den neuen Ordner post und darin die Seite libreoffice71.md:

$ hugo new post/libreoffice71.md

Die so erzeugte Seite besitzt bereits einen passenden Vorspann. Den title leitet Hugo aus dem Dateinamen ab. Darüber hinaus enthält das Front Matter noch den Hinweis draft: true. Damit geht Hugo davon aus, dass es sich noch um einen Entwurf handelt, und übernimmt den Text noch nicht in die generierte Website. Erst wenn Sie true durch false ersetzen, sehen Sie die Nachricht über LibreOffice 7.1 in der exportierten Webseite.

Für das Beispiel rufen Sie den obigen Befehl auf, öffnen die Datei libreoffice71.md und hinterlegen einen kleinen Text zur Veröffentlichung von LibreOffice 7.1. Wenn Sie möchten, orientieren Sie sich dabei am Beispiel aus Abbildung 2. Die Verzeichnisstruktur unterhalb von content/ spiegelt sich übrigens später auch in den URLs wider. Die Nachricht zu LibreOffice lässt sich beispielsweise unter http://example.com/posts/libreoffice71 erreichen.

Abbildung 2: Hier hat Hugo die Meldung über LibreOffice 7.1 automatisch in die Form eines Blog-Beitrags gepresst. Der Titel LibreOffice 7.1 veröffentlicht entspricht dem title im Front Matter.

Thematisch

Die Optik der erzeugten Seiten bestimmt eine Designvorlage. Diese sogenannten Themes finden Sie in zahlreichen Varianten im Internet (Abbildung 3). Achten Sie beim Stöbern jedoch immer auf die Lizenzen: Nicht alle Themes dürfen Sie kostenfrei einsetzen. Für die ersten Schritte empfehlen die Hugo-Entwickler das Theme Ananke, das unter einer MIT-Lizenz steht.

Abbildung 3: Die Hugo-Website führt einen Katalog mit durchweg qualitativ hochwertigen Themes. Über die Tags lässt sich die Auswahl gezielt einschränken.

Zur Installation laden Sie von der Github-Seite des Entwicklers [5] das zugehörende Archiv herunter und entpacken es. Das Verzeichnis mit dem Theme benennen Sie in das etwas handlichere ananke/ um und verschieben es dann im Arbeitsverzeichnis in den Ordner themes/. Abschließend müssen Sie Hugo noch anweisen, dieses Theme zu verwenden. Dazu öffnen Sie im Projektverzeichnis die Konfigurationsdatei config.toml mit einem Texteditor und ergänzen am Ende die Zeile theme = "ananke".

Da Sie die Konfigurationsdatei gerade geöffnet haben, können Sie auch gleich noch hinter baseURL= die sogenannte Basis-URL Ihrer Website hinterlegen. Sie beginnt mit http:// oder https://, dem der Domain-Name folgt. Außerdem tauschen Sie den languageCode gegen de-DE und geben Ihrem Internet-Auftritt einen anderen Titel – im Beispiel bietet sich Linux Facts an.

Website generieren

Nun können Sie Ihre Website erzeugen lassen, indem Sie einfach im Projektverzeichnis hugo aufrufen. Der fertige Internet-Auftritt landet im Unterverzeichnis ./public/, dessen Inhalt Sie nur noch auf den Webserver hochladen müssen. Geben Sie Hugo zusätzlich den Parameter -D mit auf den Weg, baut er zudem auch alle noch als draft gekennzeichneten Seiten mit ein.

Vor dem Hochladen auf den Webserver empfiehlt sich allerdings noch ein kontrollierender Blick. Dabei hilft Hugo mit seinem eingebauten Webserver, den Sie mit hugo server starten (Abbildung 4). Indem Sie mit einem Webbrowser http://localhost:1313 ansteuern, können Sie nun Ihre Website begutachten. Mit hugo server -D berücksichtigt Hugo auch alle Entwürfe.

Abbildung 4: Beim Erstellen einer Seite liefert Hugo auch immer eine Statistik. Da das Werkzeug einige Seiten automatisch erstellt, kann die Anzahl der Webseiten höher sein als erwartet.

In jedem Fall überwacht der Server im Hintergrund das Arbeitsverzeichnis und erstellt die Website nach jeder Änderung automatisch neu. So verfolgen Sie Ihre Anpassungen an der Seite live im Browser. Nach Abschluss aller Arbeiten beenden Sie den Webserver per [Strg]+[C].

Speisekarte

Auf der fertigen Beispiel-Site fehlt allerdings das Impressum. Hugo hat zwar eine entsprechende Page erstellt, auf den einzelnen Seiten fehlen jedoch noch passende Links dorthin. Seiten wie das Impressum sollten Besucher möglichst über ein Menü erreichen. Das Theme bietet sogar eines an, doch da es im Moment keine Menüpunkte besitzt, ist es nicht zu sehen.

Um dem Menü einen Eintrag für das Impressum hinzuzufügen, ergänzen Sie im Front Matter des Impressums die Einstellung menu: main. Sobald Sie die Datei speichern, taucht auf der Start- und allen weiteren Seiten ein neuer Menüpunkt auf, der zum Impressum führt. Themes können beliebig viele Menüs an unterschiedlichen Positionen anbieten. Zur Unterscheidung erhält jedes davon einen eigenen Namen. Als main bezeichnet das Ananke-Theme das Menü rechts oben in der Ecke.

Andere Themes bieten mitunter zusätzliche Menüs an. So gibt es häufig ein Menü am unteren Ende der Seite, das auf den Namen footer hört. Um auch dort noch einen Link auf das Impressum einblenden zu lassen, ändern Sie menu: main in menu: ["main", "footer"].

Typisch

Blog-Beiträge müssen später anders aussehen als das Impressum. Mit anderen Worten: Es gibt verschiedene Seitentypen, denen Hugo jeweils eine andere Optik überstülpen muss. Den Typ einer Seite legen Sie hinter type im Front Matter fest.

Im Fall von type: page handelt es sich beispielsweise um eine einfache Seite, wie etwa das Impressum. Lassen Sie im Front Matter type weg, ermittelt Hugo den Typ einer Seite anhand des ersten Unterverzeichnisses unter content/. Die Datei content/post/libreoffice71.md ist dann automatisch vom Typ post (Abbildung 5).

Abbildung 5: So präsentiert das Theme Ananke Seiten vom Typ post…

Welche Typen es gibt und wie die zugehörigen Seiten aussehen, bestimmt maßgeblich das gewählte Theme. Probieren Sie einmal aus, was passiert, wenn Sie type: page im Front Matter der Datei libreoffice71.md ergänzen (Abbildung 6).

Abbildung 6: … und so Seiten vom Typ page.

Sobald Sie ein ansprechendes Theme gefunden haben, entsteht häufig der Wunsch, das Aussehen einer Unterseite zu verändern. Im Beispiel könnte man beispielsweise die Optik des Impressums etwas optimieren. Dazu müssen Sie nicht gleich in das Theme eingreifen. Stattdessen erlaubt Hugo, für jeden Seitentyp eine eigene Vorlage zu hinterlegen. Dazu benötigen Sie allerdings HTML- und CSS-Kenntnisse.

Das Impressum ist vom Typ page. Um diesen Seiten eine andere Optik zu geben, erstellen Sie im Unterverzeichnis layouts/ einen Ordner mit dem Namen des Seitentyps – im Beispiel also page. Legen Sie darin die Datei single.html an. Zu einer Datei mit diesem Namen greift Hugo immer, um normale Seiten zu formatieren. In ihr können Sie jetzt ein neues HTML-Gerüst anlegen, wie in Listing 2 gezeigt.

<!doctype html>
<html>
  <head>
    <title>{{ .Title }}</title>
  </head>
  <body>
    <h1>{{ .Title }}</h1>
    <p>{{ .Params.date }}</p>
    {{ .Content }}
  </body>
</html>

Der Platzhalter {{ .Title }} steht für den Seitentitel, wie Sie ihn im Front Matter vorgegeben haben. {{ .Content }} ersetzt Hugo durch den eigentlichen Seiteninhalt. Über {{ .Params.Bezeichner }} kommen Sie an die übrigen Angaben im Front Matter, Sie müssen lediglich den entsprechenden Bezeichner hinter .Params. anhängen. {{ .Params.date }} steht beispielsweise für das Datum hinter date:.

Eine solche Vorlage mit Platzhaltern bezeichnet Hugo als Template. Eine sogenannte Template-Engine ersetzt die Platzhalter im Hintergrund. Go-Entwickler dürfte interessieren, dass Hugo dabei auf die Bibliotheken html/template und text/template zurückgreift. Die Namen für die entsprechenden Daten, wie etwa .Title, heißen Variablen, weil sie abhängig von der Seite einen anderen Wert aufweisen.

Nützliche Kürzel

Zusätzlich bietet Hugo noch einen Satz intelligenter Platzhalter, die sogenannten Shortcodes. Beispielsweise tauscht das Werkzeug den Shortcode {{< figure src="/images/tux.jpg" title="Tux" >}} gegen die zugehörigen <figure>-Tags. So spart der Shortcode Tipparbeit. Alles zwischen {{< highlight javascript >}} und {{< /highlight >}} formatiert Hugo hingegen als Javascript-Code. Besonders nützlich ist auch der Shortcode {{< relref "/post/libreoffice71.md" >}}. Er baut den korrekten Link zur Seite libreoffice71.md ein.

Eine komplett neue HTML-Datei zu erstellen, hat den Nachteil, dass Sie die Seite selbst vollständig mit einem Menü ausstatten und an das Theme anpassen müssen. Einfacher ist es daher, sich das entsprechende Template aus dem Theme zu fischen und es dann nach eigenen Vorstellungen zu verändern. Im Beispiel wechseln Sie im Projektverzeichnis in das Unterverzeichnis themes/ananke/layouts/page/ und kopieren den Inhalt der Datei single.html in Ihr eigenes Exemplar. Wie Sie dabei gleichzeitig sehen, besteht ein Theme im Wesentlichen aus einem Satz Layouts sowie passenden CSS- und Javascript-Dateien im Verzeichnis static/.

Templates gibt es nicht nur wie im Beispiel für einzelne Seiten, sondern beispielsweise auch für die Auflistungen von Blog-Beiträgen. Hugo erwartet solche Templates unter layouts/ in ganz bestimmten Verzeichnissen und mit vorgegebenen Dateinamen. Wie das Werkzeug nach dem passenden Template sucht, bestimmt ein ausgeklügeltes komplexes System, das die Dokumentation im Detail erklärt [6]. Dort finden Sie auch sämtliche Shortcodes.

Fazit

Mit den beschriebenen Möglichkeiten sind die Fähigkeiten von Hugo bei Weitem noch nicht erschöpft. So kann das Werkzeug etwa Tabellen aus Dateien einlesen und dann in die Seiten einbauen. Dateien lassen sich zudem über sogenannte Pipes verarbeiten. Auf diesem Weg wandelt Hugo beispielsweise Sass-Dateien in CSS-Dateien um. Daneben unterstützt Hugo das Erstellen von mehrsprachigen Websites. Es lohnt sich also, ausgiebig in der Dokumentation zu stöbern.

Hugo ist schnell einsatzbereit und bietet eine extrem mächtige Template-Sprache. Deren Flexibilität verlangt allerdings auch etwas Einarbeitungszeit. Die Dokumentation hat zudem mehr den Charakter einer Referenz, was den Einstieg entsprechend erschwert. Im Gegenzug erlaubt Hugo den Entwurf selbst komplexer Webseiten, die dann dank des statischen Aufbaus sicher im Netz stehen, sich aber mithilfe des Programms leicht ergänzen und ausbauen lassen. (cla)