Neues Blechkleid für das Blog (das Update 2 tage später)

Mein Blog läuft mit Hugo, einem Generator für statische Websites und das schon seit Sommer 2015. Hugo selbst ist noch etwas älter und Software entwickelt sich weiter. Die erste verfügbare Version 0.7 ist vom Juli 2013. Das ist eine ganze Ecke für ein Stück Software und die aktuelle Version ist die 0.144 (wird es jemals eine 1.0 geben? Keine Ahnung, aber Hugo ist mit der 0.irgendwas deutlich weiter, leistungsfähiger, besser dokumentiert und schneller als viele kommerzielle Webtools 😎).

Warum ich Euch damit langweile? Weil neue Versionen von Software auch manchmal neue Dinge mitbringen und alte Zöpfe abschneiden müssen. Das war einer der Gründe, warum ich schon länger kein Update mehr gemacht hatte. Das von mir verwendete “Theme” (ein austauschbares Paket mit den Schablonen, den layout-technischen Definitionen, der Typographie), also das “Blechkleid” meines Blogs nutzte einige ältere Funktionen, die in den neueren Versionen nicht mehr unterstützt werden bzw. auf die neuen Funktionen umgebaut werden müssten.

Da ich (als ich noch Vollzeitentwickler und dann Teilzeitentwickler war 😉) schon immer lieber mit Backend-Sachen und den Datenbanken und Datenmodellen arbeitete als, blieben meine Frontend-Basteleien und Veränderungen am Thema (hugo-icarus, wen es interessiert) immer “educated guesswork” bzw. Herumdilettieren an CSS (falls jemand Golf zu wenig demütigend ist, CSS ist eine gute Alternative 😆). Langer Einleitung kurzer Sinn. Nach einem unvorsichtigen Update meinte Hugo beim Erstellend der Seite “Junge, das gibt’s nicht mehr, nimm das neue Zeug”. Und die Suche war schon immer eine Krücke und im RSS-Feed war auch ein Fehler, das Layout war für große Bildschirme zu schmal und Ach und Jammer und Wehklagen.

Weg mit dem alten Zeug

Wie die geneigte Leserin unschwer erkennt, war der Herr Autor nicht mehr so zufrieden mit dem Erscheinungsbild und etwas minimalistischer sollte es auch sein. Da Blogs gerade wieder eine Renaissance erleben, wollte ich auch eine gefälligere Typographie und ein optimiertes Layout. Nach langer Suche lief es wie meistens: ich habe ein schönes Thema bei einem früheren Kollegen entdeckt, der auch im Fediverse unterwegs ist. 🤗 An dieser Stelle ein “hat tip” an den Alexander und sein Blog, das mit dem Thema cocoa läuft.

Kann ja nicht so schwer sein, das schnell zu übernehmen. Ja, ich weiß – der Kerl ist seit 40 Jahren in der IT und glaubt, dass dort Dinge schnell gehen – ich hätte es besser wissen sollen. Das liegt nicht daran, dass cocoa nicht gut wäre. Ein schönes, minimalistisches Thema, allerdings waren ein paar größere Schweissarbeiten nötig, da ich einige zusätzliche Anforderungen hatte:

• Keine Fonts von “Mr. G” laden oder sowas, alles schön lokal
• Ich wollte eine Volltextsuche (was bei statischen Blogs nicht ganz trivial ist)
• Die Typograpie gefiel mir nicht so (ich bein Freund von Serifen für Fließtext)
• Ich wollte das Bannerbild zu Beginn des Blogposts nicht aufgeben
• Die Größenanpassung für große Monitor sollte etwas weiter möglich sein
• Meine selbstgebaute Kommentarfunktion musste auch mit cocoa laufen

Webmaster Nächte sind lang…

Es reicht ja nicht, dass ich den Arbeitstag über an der Tastatur sitze (ok, da muss ich mit Windows arbeiten, so gesehen ist alles nach Feierabend Erholung 😉), nach dem Abendessen wurde dann seit Montag der Umbau geplant, recherchiert und gebaut. Die Funken flogen, Dinge wurden mit dem Winkelschleifer passend gekürzt (wusstet Ihr, das “Winkelschleifer” auf italienisch “smerigliatrice angolare” heißt? Falls Ihr mal einen in 🇮🇹 kaufen müsst…).

Die Typographie habe ich angepasst. Als Fließtext-Font wird der sehr schöne und gut über einen weiten Größtenbereich skaliende Font “Merriweather” genutzt und die Überschriften sind in “Open Sans” gesetzt. Die im ursprünglichen Thema verengte Laufweite (warum???) habe ich entfernt bzw. für die H2 etwa weiter gesetzt (0.05rem).

Als Volltextsuche verwendet ich jetzt pagefind.js (https://pagefind.app), das klappt wunderbar und die Indexgenerierung dauert nur ein paar Sekunden. Die maximale Breite des Inhalts liegt jetzt bei 960 Pixel, die Darstellung ist aber auch auf einem Smartphone noch brauchbar.

Meine Kommentarfunktion läuft auch wieder und kann pro Seite bzw, Post im Frontmatter über einen Schlüssel nosearch deaktiviert werden. Das Bannerbild wird jetzt auch genutzt und sogar automatisch erkannt, wenn es in dem Ordner mit dem Post eine Datei banner.jpg gibt.

Vorteil für Chico, unseren Maltipoo war, dass er die letzten Tage um halb zwei Uhr morgens nochmals eine Runde ums Haus drehen durfte. 😄 Das hat ihm gefallen und half mir, mich nochmal 20 Minuten lang zu bewegen nach einer langen Nacht am Rechner.

Was noch fehlt? Definieren wir es als “fertig”. 😎

Was vorgestern noch fehlte, war die Ausgabe der für den jeweiligen Post gewählten Lizenz und der Link bei den CC-Lizenzen. Das ist jetzt drin. 👍

ich habe jetzt auch gelernt, was CSS custom properties (vulgo: Variablen) sind und habe das CSS aufgeräumt, so dass jetzt alle Farbdefinitionen am Anfang nur einmal gemacht werden und dann die Variablen eingesetzt werden (kein Ändern von drei Dutzend Farbwerten irgendwo, yay). Dabei habe ich auch gleich das CSS erweitert, so dass jetzt auch das jeweils vom Gerät eingestellte Anzeigeschema beachtet wird. Wer also in Zukunft mit seinem “dark mode” vorbeikommt, wird nicht mehr geblendet. 👍

Die Farbe sind auch etwas schöner, noch immer nicht perfekt, aber mit der Unterstützung des dark modes zumindest so, dass Leserinnen und Leser keinen Schock erleiden. 😉

Die Meta-Tags für OpenGraph wurden auch ergänzt und auch die Bildinformation ist jetzt im Header drin. Bei einem Link sollte das Preview-Bild jetzt ausgelesen werden. Wir werden sehen… 👍

Wo hat sich noch nichts geändert? 😉
Was mir immer noch fehlt, ist Verständnis, wie der ganze Flexbox-Krempel in CSS genau funktioniert, das war die letzten Tage die Methode Versuche und Irrtum, aber ich hoffe, ich habe alle wieder wieder richtig angeschweisst, um beim Bild zu bleiben und es sind auch keine Teile übrig geblieben. Viel Spaß also mit dem neuen Layout. Von dem alle die Besucherinnen und Besucher, die per RSS-Reader hier vorbeischauen, sowieso nichts haben werden. 🤣.

Lizenz für diesen Post CC-BY-SA 4.0

Alle Blogposts auflisten