Meinen Blog habe ich von Nikola auf Hugo umgestellt. Nun gibt es neben dem hellen auch ein dunkles Erscheinungsbild. Es gibt eine Profil-Startseite und bessere Links zu meinen anderen Projekten.

Für meine Webseite habe ich den 2000ern eigenen PHP-Code geschrieben, eigenes HTML und eigenes CSS. Das war auch alles ganz cool, aber gefühlt ist mehr Arbeit in das Programmieren der Webseite als dem Inhalt geflossen. An sich ist das ja auch nicht weiter schlimm, war auch ein Lernprozess.

In den 2010ern habe ich studiert und hatte meine Webseite eine zeitlang auf Sphinx, dann auf Pelican und zuletzt auf Nikola. Alle sind Static Site Generators sind, sie erzeugen also aus leichtem Markup (reStructuredText, später Markdown) das HTML. Serverseitig muss gar nichts mehr erzeugt werden, die Webseite ist also schnell, ohne serverseitige Sicherheitsprobleme die Updates erfordern würden.

Sphinx ist eher für Dokumentation ausgerichtet, das passte für meine immer mehr zum Blog mutierende Webseite irgendwann nicht mehr. Pelican ist ein Blogsystem, das auf Sphinx aufbaut. Aber es wirkte auch irgendwann nicht mehr so ganz rund. Mit Nikola hatte ich dann endlich etwas, was wirklich komplett für einen Blog ausgelegt war.

Mit Nikola ist nichts verkehrt, allerdings wurden die Themes auch nicht weiterentwickelt. Und nachdem ich jetzt über das Ende von MkDocs zu VitePress und Zensical gekommen war, steckte ich tief in einem Rabbit Hole: Wenn ich jetzt für meine Dokumentation etwas neues nutze, sollte ich dann nicht auch einmal für meinen Blog schauen, was ich dann nehmen kann?

Damals im Austausch mit Natenom habe ich erfahren, dass er Hugo nutzt. Ich hatte mir das damals kurz angeschaut und war von den ganzen Themes ziemlich erschlagen. Und das Wechseln erschien mir ziemlich aufwändig, daher habe ich das nicht weiter verfolgt.

Nun war die Motivation aber doch da, ich wollte vor allem einen Dark Mode haben. Eine Suchfunktion wollte ich auch haben. Das sieht Nikola allerdings beides nicht so recht vor, das Theme steckte noch auf Bootstrap 4. Ich habe mit AI Coding dann beides erreichen können mit einer Migration auf Bootstrap 5 und dem Einbinden von Pagefind. Es wirkte aber echt wie Gebastel, sodass ich dann mit AI Coding das ganze zu Hugo portiert habe.

Bisheriger Stand

Bis vor kurzem sah die Startseite meines Blogs so aus:

Da ist die dickere Navigationsleiste, mein Profiltest, das Bild, die Links zu den anderen Profilen und die Kontaktmöglichkeiten.

Einzelne Artikel sahen so aus:

Das Jahresarchiv dann eine einfache Liste:

Bei den Tags hatte ich etwas selbst gebaut, weil mir das von Nikola nicht so gut gefallen hat. Das sah so aus:

Dark Mode mit Bootstrap 5

Der Zwischenstand mit dem Dark Mode sah dann so aus:

Also schon besser, aber irgendwie auch nicht mehr modern. Die Artikel waren auch weiterhin okay, aber irgendwie habe ich mich einfach sattgesehen daran.

Zudem waren einige Dinge nicht gut portiert, die Tags sahen furchtbar aus:

Neu mit Hugo

Bei Hugo habe ich das PaperMod Theme genommen, das hat mir spontan gefallen. Ich kann es aber auch noch ändern, das ist ja das schöne daran.

Interessant ist der Profile Mode, bei dem man als Startseite eben nicht mehr die neusten Artikel hat, sondern Foto, Namen, Vorstellung und weitere Links. Das hat mir gut gefallen, weil ich eine Zentrale für meine ganzen Projekte brauche. Also habe ich das jetzt so gemacht:

Klickt man oben oder unten auf »Blog«, geht es zu den letzten Artikeln. Artikel mit und ohne Vorschaubild kommen jetzt beide gut rüber.

Öffnet man einen der Artikel, kommt das Aufmacherbild auch ganz oben nochmal. Das wird etwas verändern, wie ich die Artikel schreibe. Insbesondere lohnt es sich jetzt auch ein Bild als Aufmacher zu nutzen, was im Artikel selbst gar nicht vorkommt.

Das Archiv sieht jetzt anders aus:

Und die Tags auch:

Nicht unbedingt besser, aber insgesamt stimmiger.

Auslagern der Studiumsunterlagen

Als ich noch studiert hatte, waren die Unterlagen vom Studium ziemlich zentral auf meiner Webseite. Inzwischen waren sie etwas in den Hintergrund gerückt. Nun habe ich die Umstellung genutzt, sie auszulagern. Sie sind jetzt auf einer eigenen Seite, die auf der Startseite verlinkt ist.

Vorher waren die hier im Blog mit einer Seite bedacht, die auf die anderen Seiten verlinkt hat:

Nun ist es auf einer eigenen Seite, die ich mit VitePress gemacht habe. Das hat auch eine eigene Startseite und macht jetzt wohl mehr her, als es wirklich ist. Aber es ist modern!

Und unter »Bachelor« und »Master« findet man dann wie gewohnt die Unterlagen:

Fazit

Ich bin jetzt ganz glücklich mit der neuen Plattform. Ich war so latent unzufrieden mit Nikola und bin jetzt ganz froh mit Hugo. Auch das neue Theme macht mir Freude. Und so habe ich wieder neue Freude Blogartikel zu schreiben. Auch wenn es erstmal ein Meta-Artikel ist.

Das Kompilieren der Seite geht jedenfalls schneller als mit Nikola. Hugo ist auch in Go und nicht in Python geschrieben. Es nutzt wirklich alle Kerne und entsprechend friert mein Laptop dann kurz ein. Das bin ich von der ganzen Python-Software gar nicht mehr gewohnt, freut mich aber als HPC Engineer.