Die Hugoisierung von softmetz.de

4 minute read Published:

Wordpress ist Mainstream. Das macht es für mich inakzeptabel. Zeit für Neustart... ;-)

Wie ich gerade eben erst im Mai angekündigt hatte, soll es mit softmetz.de auch in Zukunft wie gehabt weitergehen. Und nach gerade einmal fünf Monaten - und etwa 15 Stunden Arbeit - ist es hier, das neue softmetz.de.

Wordpress Rant

Wordpress hat mir viele Jahre gute Dienste geleistet. Aber ich muss auch feststellen, dass ich mich nicht mehr so sehr in der Zielgruppe sehe. Als technik-affiner Mittdreissiger und Internet-Nutzer der erst^H^H^H^H zweiten Stunde späten 90er Jahre des letzten Jahrhunderts fühle ich mich mit all dem WYSIWYG -Geraffel nicht mehr wohl.

Beim Schreiben meiner Posts im Wordpress-Editor kam es mir immer so vor, als wären mein Hirn, Augen, Hände und der Cursor jeweils auf einer anderen Frequenz unterwegs. Einfache Modifikationen, die ich im vi ganz automatisch mache, waren dort meist mit dem Bewegen dieses Pfeils auf dem Bildschirm verbunden. Und wenn ich doch mal ein Foto einbinden wollte, musste ich hinterher meine Handgelenke massieren von soviel Mausgeschubse.

Markdown love

Und da sind wir auch schon beim Kernpunkt vom neuen softmetz.de. Dieses ist nämlich in Markdown verfasst und im vim geschrieben. Alle meine Sinne, Körperfunktionen und die Konsole stehen im perfekten Einklang zueinander. Der Feuerfuchs lädt jede meiner Änderungen brav beim :w-en neu. Zen…

Alternativ geht auch noch

:!elinks http://localhost:1313/post/$(basename % .md | tr '[:upper:]' '[:lower:]')/

Damit bleibe ich auf der Konsole und sehe die Seite im Text-Browser elinks.

I go, you go, hugo

Jetzt könnte ich natürlich einfach meine Ergüsse in Markdown niederbringen und dann irgendwo hin laden. Aber HTML ist ja per se nichts Schlechtes und es gibt einfach mehr Menschen, die HTML lesen können (bzw. einen Browser nutzen) als Markdown. Daher habe ich mir mit hugo das welt-schnellste-Framework-zum-Website-bauen installiert. Den Ausguss Output kannst du hier bewundern.

Apropos Output. hugo ist ein statischer Seiten-Generator, was also auf dem Server liegt sind Dateien. Diese wurden einmalig erzeugt und können nun in Windeseile von Drölfzigmilliarden Menschen gelesen werden, ohne dass eine Datenbank geweckt werden müsste.

Markdown zu HTML, HTML zu Markdown - Nach Hipster kommt After Dark

Oben schrieb ich, dass nicht so viele Menschen Markdown lesen können. Ist mir aber eigentlich auch egal, weil diese Menschen wohl auch nicht unbedingt zu meiner Leserschaft gehören. So du doch das hier liest, aber Markdown nicht lesen kannst, dann freue ich mich darüber, dass du die Bereitschaft zeigst es zu lernen, das tust du nämlich gerade. :-)

Das Theme, welches ich für die Seite verwende heisst After Dark und wurde von Josh Habdas für dessen Seite hackcabin.com erstellt und unter der WTFPL veröffentlicht.

Ziel dieses Themes, dass sehr sauberen HTML(!)-Code enthält und für das CSS das hack.css-Framework verwendet, ist es, das HTML als Markdown zu formatieren und in einer dunklen Terminal-Anmutung darzustellen. Aus Markdown wird also HTML, das wie Markdown angezeigt wird. Cool, nech?!

Nach dem Texten kommt die Struktur

hugo macht schon einige Vorgaben/Empfehlungen für die Strukturierung einer Seite, bleibt dabei aber doch recht abstrakt. Für das neue softmetz.de habe ich mich von den alten “Zeugs-Kategorien” getrennt und folgende Struktur erdacht:

  • JETZT UND SPÄTER: Meine Blogs ab Hugo (du liest den allererten gerade)
  • IMMER UND EWIG: Manchmal ist ein Blog zu volatil, Inhalte für die folgenden Generationen lege ich hier ab, aktuell noch leer
  • FRÜHER UND DAVOR: Ich habe 703 Artikel aus dem alten Wordpress exportiert. Diese findest du hier. Kommentare habe ich nicht mitgenommen.
  • WHOAMI: Meine neue Selbstdarstellung - Quasi ein neuer Mensch
  • SYS64738: Der Link zurück. Wer mit dem Label ohne Internetsuche etwas anfangen kann, weiss wie man am entsprechenden Gerät durch die Eingabe von 8 Zeichen die Betätigung eines Kippschalters oder das Ziehen des Netzkabels ersetzen kann. :-)

Wordpress-Upcycling

Wie bereits angemerkt, schlummerten im Wordpress 703 Artikel. Diese habe ich mit ein paar Kniffen exportiert.

Im ersten Schritt habe ich das Plugin Wordpress-to-hugo-exporter installiert und ausgeführt. Heraus kam dabei ein ZIP mit 704 Markdown-Dateien, das wp-content/uploads-Verzeichnis und einer rudimentären hugo-Konfigurationsdatei.

Die Dateien habe ich an einen neuen Platz innerhalb des Quellcodes von softmetz.de kopiert. Das wp-content-Verzeichnis wanderte nach static. Leider sind alle Medienverweise in den exportierten Markdown-Dateien absolute URLs auf die Wordpress-Installation. Im Test funktioniert dann alles prächtig, die Bilder sind noch da. Aber wehe man löscht dann das Wordpress um es durch den Hugo-Output zu ersetzen?!?!

Daher habe ich noch etwas mit sed gespielt, blöderweise aber das Kommando verloren. Es war was mit find, inline replacement und irgendwelchen Pfaden.

Feinschliff

Last but not least habe ich noch etwas Feinschliff betrieben und mich tiefer in hugo, After Dark und hack.css eingearbeitet. Es gibt für mich noch viel zu lernen, aber das hier ist das neue softmetz.de und das hier ist mein erster Blog.

Mögen weitere folgen…