Bloggen mit Hugo und GitHub Pages

Plattform

Eigentlich habe ich mich recht schnell für Hugo als Framework für das neue Blog entschieden. Davor hatte ich damit keinen Kontakt, aber Dokumentation und Community machten einen guten Eindruck auf mich. Außerdem waren andere Blogs und Websites, die auf Hugo basierte, simple, schnell und modern.

Theme

Das Theme hello-friend-ng habe ich (einfach und etwas langweilig) unter den Themes auf der offiziellen Hugo Website gefunden. Der Entwickler Djordje Atlialp nutzt es selbst für seinen Blog und ich bin bisher zufrieden mit dem Look und den integrierten Funktionen.

Erweiterungen

Zusätzlich zu den Grundfunktionen des Themes, nutze ich noch hugo-shortcode-gallery für Fotogallerien (z.B. im Blog Post über das Raspberry Pi Kubernetes Cluster) und hugo-notice, falls ich optisch auffallende Anmerkungen einfügen will.

Bei hugo-shortcode-gallery hat das Einrichten allerdings fast 2 Stunden gedauert, weil die Erweiterung jQuery voraussetzt, aber das Theme hello-friend-ng ohne auskommt. Letztendlich bin ich erst durch ein Issue bei GitHub auf die Option loadJQuery aufmerksam gemacht worden. Nur so als Tipp, falls ihr die Kombination aus dem Theme und der Erweiterung auch nutzen wollt. 😉

Hosting

Das Blog wird bei GitHub Pages (Repo) gehostet. Allerdings liegen die eigentlichen Quelldateien (Markdown, Bilder, Konfiguration, etc.) in einem anderen, privaten Repository, damit Entwürfe, Konfiguration und die Originalfotos (inkl. EXIF-Daten) nicht öffentlich sind. Ich habe mich bei der Einrichtung an dieser Anleitung orientiert.

Status

Auf der separaten Status Page wird die Erreichbarkeit und Geschwindigkeit des Blogs regelmäßig durch upptime geprüft. Dafür habe ich einfach ein eigenes Repo anhand des upptime Templates erstellt. Weiteres ist in dem Getting started beschrieben. Außerdem habe ich für die Status Badges einen kleinen Shortcode geschrieben.

<div style="display: flex">
    <div style="margin-right:0.5em"><a href="https://g11s.cc/upptime/history/blog"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fgerrited%2Fupptime%2Fmaster%2Fapi%2Fblog%2Fuptime.json" /></a></div>
    <div><a href="https://g11s.cc/upptime/history/blog"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fgerrited%2Fupptime%2Fmaster%2Fapi%2Fblog%2Fresponse-time.json" /></a></div>
</div>

Demo

Die Verweise in den Links und Bildern sind hartkodiert und müssten ausgetaucht werden, solltet ihr den Shortcode für eure Website nutzen wollen. Wenn der Code unter /layouts/shortcodes/upptime.html gespeichert wird, kann er folgendermaßen in Markdown eingefügt werden.

{{< upptime >}}

Ablauf

Meistens teste die die Änderungen lokal (via hugo server -D) und pushe sie erst, wenn ich mit dem Ergebnis zufrieden bin. Danach wird die öffentliche Website innerhalb weniger Sekunden durch die konfigurierte GitHub Action aktualisiert.

Auf dem Smartphone können kleinere Anpassungen auch über die GitHub Web UI oder App vorgenommen werden. Allerdings ist der Editor dafür nur mittelmäßig geeignet und es gibt keine Vorschau der Änderungen.

Fazit

Aktuell bin ich recht zufrieden mit dem Stack und Ablauf. Einiges ist etwas fummeliger als beim einem größeren System wie z.B. Wordpress, mit dem ich seit über 10 Jahren regelmäßig arbeite. Aber genau wegen des anderen Ansatzes, der Leichtgewichtigkeit und ein wenig Extraarbeit, habe ich mich auf die Suche nach einer anderen Lösung gemacht. Und vermutlich gehen die meisten Sachen in ein paar Wochen deutlich leichter von der Hand.