Housekeeping

In den letzten Monaten hab ich mal wieder etwas am Blog rumgeschraubt. Bisher habe ich Hexo zur Generierung der statischen Seiten genutzt. Allerdings hat Hexo in letzter Zeit wegen seiner starken Abhängigkeit zu node.js mehr Ärger als Freude gemacht. Aber der grundsätzliche Gedanke, die Seite einmal komplett durchzugenerieren und dem Webserver nur noch statische Inhalte zur Verfügung zu stellen gefällt mir besser als die Nutzung eines anfälligen CMS.

Deshalb hab ich mich nach Alternativen umgeschaut und habe mich für Hugo als Generator entschieden. Da die Artikel im Markdown vorliegen, war das inhaltliche Migrieren auch kein grosses Problem. Schwieriger war aber das Theme. Ich wollte kein fremdes Theme einbinden, dessen Funktion ich nur halb verstehe und dessen Funktionalitäten ich eigentlich nur teilweise brauche. Ausserdem wollte ich mich etwas intensiver mit CSS beschäfitgen - das hab ich abe dann relativ schnell zu den Akten gelegt. Am Ende habe ich die Seite deshalb von Grund auf selbst gebaut - nicht ganz ohne Hilfe (aka Copy&Paste) - aber ich habe recht konkrete Vorstellungen davon, was jede Zeile des Codes macht.

Beim Theme habe ich mich von einem Posting von Pedro Lopez leiten lassen. Der Artikel benutzt Bootstrap als CSS-Framework und Feather für die Icons. Bootstrap wurde mir aber schnell zu umständlich, vielleicht hätte ich auch mehr Doku lesen sollen. Ich konnte ich mich aber nicht so richtig damit anfreunden und hab die Seite dann noch mal neu gebaut, diesmal mit Tailwind als CSS-Framwork. Dabei hat mir der Artikel von Wim Deblauwe sehr geholfen. Mit den Feather-Icons bin ich noch nicht ganz glücklich, für den Moment ist es aber erst mal geblieben.

Eine weitere hilfreiche Informationsquelle war ein Artikel von zwbetz, der erklärt, wie man einen Hugo-Blog from scratch aufbaut. Die Gestaltung des Banners hab ich mir bei daily-dev-tips.com abgeschaut. Wie man in Tailwind einen brauchbaren Navbar herstellt, hat mir Chris vom Youtube-Kanal Better Dev erklärt.

Das Projekt liegt aber nun seit einem halben Jahr auf der Festplatte und musste jetzt auch mal in Produktion gehen. Es wird am Ende ohnehin ein “Work in Progress” bleiben, und es ist jetzt schon besser als die alte Seite. Hier ist aber noch eine List der Dinge, die auf jeden Fall noch angepasst werden müssen.

• Auf der Titelseite hätte ich gerne den jeweils aktuellsten Artikel stehen.
• Im Markdown der alten Artikel sind noch Fehler. Youtube-Links hatte ich im hexo mit {%raw%} eingebunden. In Hugo hab ich dafür einen Shortcode gebaut.
• Mir gefällt das Design der Tags und Categories noch nicht, aber eine richtige Idee hab ich auch noch nicht.
• Es fehlen noch statische Seiten wie Impressum oder gpg-Code etc.
• Das Farblayout basiert auf den Tailwind-Standardfarben. Es ist zwar für einen ersten Entwurf ganz okax, aber da will ich noch mal ran.
• Die Einbindung der Feather-Icons benötigt Java Script. Die will ich gerne durch Hero-Icon ersetzen. Dafür muss ich aber etwas in Hugo programmieren.
• Das Menü ist nicht mobile-tauglich. Hier werde ich wohl nicht um ein bisschen Java Script rumkommen.
• Der Youtube-Shortcode zum Einbinden von Videos hat noch Fehler beim responsive-Verhalten.

Und noch so Kleinkram halt.

Ausgeliefert wird das Blog weiterhin mit Hilfe eines NGINX-Webservers und eines Letsencrypt-Zertifikats.

Auch bei der Wartung der Seite selbst gibt es Änderungen. Bisher hatte ich die Dateien in einem Unterverzeichnis meines /home/-Verzeichnisses. Mittlerweile ist sind sie in ein GitLab-Projekt umgezogen. Dort werden alle Änderungen zusammengeführt. Gebaut wird es dann, indem die Änderungen auf die Produktionsumgebung gepullt werden und dort von Hugo gebaut und in das Prod-Verzeichnis kopiert wird.

Wegen Tailwind gibt es leider beim Build weiterhin Abhängigkeiten zu node.js. Mal schauen, ob bzw. wie ich die noch auflöse.