Anfang 2021, habe ich dieser und meiner persönlichen Website auf spanisch einen (neuen) Farbstrich verpasst, als ich auf Tachyons und Caddy umgestiegen bin.

Ich habe in Juni 2018 entschieden auf einen statischen Websitegenerator zu setzen: Lektor. Ich war im Großem und Ganzen zufrieden mit dem Ergebnis.

Mit der Zeit ist aber die Neugier auf andere Websitegeneratoren immer größer geworden und so verwende ich seit Anfang des Monats für die Generierung dieser Webseite Hugo und das Farbthema Congo.

Die Website wird blitzschnell generiert, lädt schnell, sieht auch am Smartphone gut aus und mit nur minimalen Anpassungen funktioniert sie wie die alte mit Lektor generierten Website.

Hugo #

Hugo ist, neben den üblichen Verdächtigen Next.js und Gatsby einer der populärsten statischen Websitegeneratoren zur Zeit.

Hugo ist mit der Programmiersprache Go entwickelt. Das bedeutet in erster Linie, dass für die Installation nur das (statisch verlinkte) vor kompilierte binäre Paket benötigt wird.

Hugo hat also keine zusätzlichen Abhängigkeiten. Nicht einmal Go muss installiert sein, um Hugo zu verwenden!

Installation #

Die Installationsanleitung von Hugo beschreibt alle mögliche Wege in Detail.

Die einfachste Weg Hugo zu installieren und aktualisiert zu halten ist aber mit Homebrew.

$ brew install hugo

Das funktioniert mit macOS oder Linux.

Congo #

Congo ist ein sehr mächtiges und leichtes mit Tailwind CSS gebauter Farbthema für Hugo.

Die Dokumentation ist sehr ausführlich und Congo enthält etwas, was ich gerne hätte, aber keine Lust habe selbst zu entwickeln: Light & Dark-Modus.

Installation #

Die Installationsanleitung von Congo beschreibt drei mögliche Wege. Der einfachste und der empfohlene Weg ist es als Hugo-Modul zu installieren.

Dafür erzeugen wird zunächst eine neue Website mit Hugo:

$ hugo new site denklab

Dann initialisieren wir diese als Hugo-Modul:

$ cd denklab
$ hugo mod init denklab

Anschließend konfigurieren wir den Import von Congo als Hugo-Modul:

# config/_default/module.toml
[[imports]]
path = "github.com/jpanther/congo/v2"

Wenn wir jetzt die Hugo-Module aktualisieren und den Hugo-Server starten.

$ hugo mod get -u
$ hugo server

Und die URL http://localhost:1313/ besuchen, werden wir den Start einer neuen Website mit Hugo und Congo sehen:

Konfiguration #

Eine Hugo Website wird default-mäßig mit einer TOML-Datei konfiguriert. YAML und JSON werden auch unterstützt. Es ist auch möglich die Konfiguration in ein config-Verzeichnis zu speichern.

Die einfachste Installation von Hugo wird mit einer TOML-Datei auskommen, für eine Seite mit Congo ist es besser (sprich übersichtlicher) die Konfiguration in Dateien aufzuteilen.

So wird die Website von oben, durch einer einfachen Datei konfiguriert:

# config.toml
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

Währenddessen besteht die Konfiguration für diese Website aus sechs Dateien.

$ tree config      
config
└── _default
    ├── config.toml
    ├── languages.de.toml
    ├── markup.toml
    ├── menus.de.toml
    ├── module.toml
    └── params.toml

Inhalt #

Der Inhalt einer Hugo Website wird im Verzeichnis content gespeichert. Markdown-Dateien werden zu Seiten.

So wird zum Beispiel aus now.md die now-Seite generiert. Aus den blog- und fragmente-Verzeichnissen werden die Blog- und Fragmente-Bereiche generiert.

Prinzipiell ist es möglich unter diesen Verzeichnissen direkt Markdown-Dateien zu haben, die dann Blog- oder Fragmente-Beiträge unter den jeweiligen Bereichen generieren.

Neue Blog-Beiträge werden dann mit einem einfachen Kommando erzeugt, zum Beispiel dieser Beitrag wurde damit erzeugt:

$ hugo new blog/hugo-congo.md

Da aber der Beitrag ein Bild enthält, habe ich daraus ein Verzeichnis gemacht, das die Datei index.md und das Bild enthält.

$ tree content/blog/hugo-congo 
content/blog/hugo-congo
├── index.md
└── Screenshot-My-New-Hugo-Site.png

Migration #

Für die Migration habe ich im ersten Schritt die Verzeichnisstruktur von Lektor kopiert, inklusive Bilder. In jedem Verzeichnis habe ich dann die ursprüngliche contents.lr-Datei in index.md umbenannt.

Da beide Markdown verwenden, habe dann händisch jede Datei ein wenig editiert, so dass dass aus Feldern der Lektor-Modellen das sogenannte front matter von Hugo wird und ein Paar Dinge aktualisiert.

Ich habe an ein Paar Stellen die Referenzen auf Bilder und die Code-Ausschnitte durch Shortcodes erzetzt. Das sind zwar spezifisch für Hugo und nicht mehr reines Markdown aber ich denke ich werde nicht in absehbarer Zeit auf einen anderen Websitegenerator umgestiegen.

Ich hätte natürlich ein Skript schreiben können, aber so viele Beiträge sind es ja nicht, so dass ich so schnell fertig war und so Makros und die Syntax von Suchen und Ersetzen bei Vim ein wenig geübt habe.

Anpassungen #

Ich habe lediglich zwei Vorlagen überschreiben müssen, damit die RSS-Feeds den gesamten Inhalt der Beiträge enthalten und nicht nur einen Ausschnitt enthält.

Ich habe zusätzlich zwei Konfigurationen eingeführt, zwei partials definiert, und zwei HTML-Vorlagen anpassen müssen, um die Seiten so zu bekommen, wie ich sie wollte.

Ausblick #

Das ist nur ein ganz schneller Einblick in den Umstieg dieser Seite von Lektor auf Hugo.

Ich habe absichtlich die Templates ausgelassen und nur an der Oberfläche von Hugo gekratzt und, wer weiss, vielleicht versuche ich mal mit Hugo https://rico-schmidt.name/pymotw-3/ zu generieren.

Ich werde bald die Konfiguration und den Inhalt meiner Website in einer selbst-gehosteter Instanz von Gitea veröffentlichen.