Tobias Schulz
Blowfish raus, Eigenbau rein: meine Seite läuft jetzt auf einem eigenen Hugo-Theme.
Es gibt Projekte, die man sich selbst eine Weile verbietet, weil man genau weiß, wie tief das Kaninchenloch ist. Ein eigenes Blog-Theme war für mich so eines.
Jahrelang lief meine Seite auf Blowfish, einem wirklich guten Theme für Hugo. Schlank, schnell, gepflegt - eigentlich alles, was man braucht.
Nur: Mit der Zeit hatte ich hier ein Layout überschrieben, dort eine Farbe zurechtgebogen, da noch ein Partial ersetzt. Irgendwann war meine Seite weniger “Blowfish” und mehr “Blowfish, den ich mit Klebeband umgebaut habe”. Und jedes Theme-Update wurde zur kleinen Mutprobe: Bricht diesmal eine meiner Anpassungen?
Forken oder selbst bauen? #
Damit lagen zwei Wege auf dem Tisch. Entweder Blowfish forken und meinen Umbau offiziell machen - oder das Theme von Grund auf selbst schreiben, genau nach meinen Vorstellungen.
Ein Fork hätte bedeutet: Ich erbe eine fremde, sehr umfangreiche Codebasis, von der ich gerade einmal die Hälfte nutze, und pflege sie fortan allein weiter. Der ganze Ballast bliebe, das Update-Problem auch - nur ohne den Upstream, der es sonst für mich löst.
Also habe ich mich für den anderen Weg entschieden: ein eigenes Theme, von der ersten Zeile an meins. Klein gehalten, nur das, was meine Seite wirklich braucht, und eine Optik, die eben nicht jeder Hugo-User hat. Es heißt schlicht tbsch und ist während der Entwicklung isoliert neben Blowfish gelaufen, sodass die Live-Seite die ganze Zeit unangetastet blieb. Erst zum Schluss habe ich umgeschaltet.
Die neue Optik #
Das Herzstück ist eine eigene Farbidentität: ein Verlauf von Orange über Pink nach Violett, den ich Solarflare getauft habe. Den siehst du im Titelbild oben - er zieht sich als Akzent durch die ganze Seite. Dazu eine ruhige Sans-serif (Inter), ein editorial angelegtes Layout, ein schwebender Pill-Header und ein Lesefortschrittsbalken.
Und ja: Dark Mode. Standardmäßig folgt die Seite jetzt einfach deinem System - steht der Rechner auf dunkel, ist die Seite dunkel. Den manuellen Schalter gibt es trotzdem, und das berüchtigte kurze Aufblitzen in Weiß beim Laden ist ebenfalls Geschichte.
Was darunter besser wurde #
Ein Redesign nur fürs Auge wäre mir zu wenig gewesen. Der eigentliche Gewinn steckt unter der Haube:
- Datenschutz ohne Sternchen. Alle Schriften und Bibliotheken liegen jetzt lokal, nichts wird mehr von fremden CDNs nachgeladen - keine Google Fonts, und Google Analytics ist gleich ganz rausgeflogen. Inter und JetBrains Mono kommen als lokale woff2-Dateien.
- Bilder, die sich selbst sortieren. Hugo rechnet jedes Bild automatisch in die passenden Größen und nach WebP um. Kein manuelles Konvertieren mehr, und wo früher gern mal 20 MB durch die Leitung gingen, wiegt ein Vorschaubild jetzt nur noch rund 20 KB.
- IndieWeb statt Datenkrake. Die Seite trägt jetzt microformats2-Markup und sammelt Reaktionen per Webmention ein - Likes, Reposts und Antworten aus dem Fediverse und von Threads landen direkt unter dem Beitrag, dazu Atom- und JSON-Feeds. Brauchen tue ich das alles ehrlich gesagt nicht - ich hatte schlicht Spaß daran, es einzubauen.
Die wenigen externen Einbettungen - etwa das Vorschaubild einer GitHub-Projektkarte - laufen über den Consent-Manager Klaro und werden erst nach deiner Zustimmung geladen. Bis dahin verlässt kein Byte deinen Browser in deren Richtung.
Klingt nach viel Arbeit für ein Hobby-Blog? War es auch 😁. Den Löwenanteil habe ich übrigens zusammen mit Claude gebaut, und ich muss zugeben: Ich arbeite mittlerweile richtig gern mit dem Ding. Und trotzdem ist es am Ende eben meine Arbeit, an meinem Code - genau das war der Punkt.
Ein eigenes Theme heißt auch: Ab jetzt ist jeder schiefe Pixel meiner. Es gibt keinen Upstream mehr, der meine Bugs fixt, während ich schlafe. Aber damit kann ich gut leben.
Ein paar Ecken werde ich in den nächsten Wochen noch nachschleifen - so ein Relaunch ist nie wirklich “fertig”, sondern bestenfalls “live”.
Anregungen? Wünsche? Fehler? Schreib mir 😎.
Das Titel-/Hintergrundbild stammt von mir - der Solarflare-Verlauf, der dem neuen Theme seinen Namen gibt.
