Huch? Ja, wenn ihr das hier lest, hat sich schon wieder was am Blog geändert. Es hat ein ganz neues Design, ist wahnsinnig schnell und hat irre wenig Schnickschnack.
Was ist neu 🔗
Die erste Änderung ist euch oben schon begegnet. Viele meiner Beiträge haben jetzt ein Inhaltsverzeichnis. So ist die Navigation innerhalb eines längeren Beitrags leichter, und ihr könnt im Inhaltsverzeichnis schon erfassen, worum es im Groben geht und wie die Überschriften gegliedert sind.
Auch ist jede Überschrift mit einem kleinen Link-Symbol 🔗 versehen. Klickt ihr diesen Link an, oder öffnet dessen Kontextmenü, könnt ihr euch einen Link kopieren, der genau auf diesen Abschnitt innerhalb des Beitrags verweist.
Die Navigation oben verweist nun unter anderem auf eine Artikel-Unterseite, auf der ich die längeren Artikel sammele, die sich als dauerhafte Anleitungen o. ä. erweisen. Es könnte sein, dass einige Blogbeiträge in Zukunft in diesen Bereich umziehen. Das macht aber nichts, weil die Links trotzdem ihre Gültigkeit behalten werden.
In Bereich Podcasts findet ihr zurzeit die neuesten Folgen des Podcasts „Wir sabbeln“, den ich zusammen mit meiner Herzdame veröffentliche. In Zukunft werde ich dort auch Links zu Folgen in anderen Podcasts hinzufügen, in denen ich zu hören bin.
Die Kommentarfunktion wurde abgeschafft. Darüber kam ohnehin nicht mehr viel. Wenn kommentiert wurde, dann meistens als Antworten auf die Tweets zum Beitrag oder auf Facebook unter der dortigen Ankündigung des jeweiligen Beitrags. Sowohl meine Twitter- und Mastodon-Accounts als auch die Facebook-Seite gibt es weiterhin.
Wer mit mir Kontakt aufnehmen möchte, hat hierzu unter „Kontakt“ in der Navigation per Formular die Möglichkeit. Dort empfiehlt es sich natürlich, eine richtige E-Mail-Adresse anzugeben, damit ich auch antworten kann. Ich verspreche euch auch hoch und heilig, dass ihr nicht automatisch zu irgendwelchen Newslettern angemeldet werdet und auch sonst kein Schindluder mit den gemachten Angaben getrieben wird. So etwas mag ich selbst nicht und würde es euch niemals antun.
Eine Funktion, die beim Umzug zu Ghost wegfiel, habe ich auf vielfache Anfrage wieder eingebaut. Manchen Leuten gefallen meine Beiträge anscheinend so gut, dass sie sich dafür erkenntlich zeigen möchten. Nun … Das rührt mich total! Unten auf der Startseite und vielen Beiträgen gibt es jetzt wieder die Möglichkeit dazu, mir per PayPal einen Kaffee in der Größe eurer Wahl zu spendieren.
Apropos unten unter jedem Beitrag: Da gibt es jetzt einen Verweis auf mehrere andere Beiträge des Blogs. Diese werden beim neuen Erstellen der Seiten jeweils per Zufallsgenerator zusammengestellt, haben im Zweifelsfall also nicht das geringste mit dem aktuellen Beitrag zu tun. Aber sie sind vielleicht die eine oder andere Leseanregung.
Das schöne Design der Seiten stammt von Jens Grochtdreis. Lieber Jens, Dir einen ganz herzlichen Dank für die tolle Zusammenarbeit! Das hat wirklich sehr viel Spaß gemacht. Auch Sven Wolfermann und Heydon Pickering haben zum Gelingen dieses Projekts ihr Wissen und auch Code beigesteuert. Euch beiden ebenfalls ganz herzlichen Dank dafür!
Mein größter Dank gilt allerdings meiner Frau Petra, die die Seiten vorab auf Herz und Nieren getestet hat. Petra ist früher ebenfalls Webentwicklerin gewesen und kennt sich nach wie vor blendend aus. Sie hat nicht nur entdeckt, dass das Layout auf Handys zunächst ziemlich "explodiert" ist. Heydon hat daraufhin dem heiligen Albatros noch etwas Benehmen beibringen müssen.
Von Petra stammt auch der maßgebliche Einfluss auf die Schriftgrößen der Texte und Überschriften. Sie konzentrierte sich vor allem auf das Lesen auf mobilen Geräten, weil Statistiken von ihren und meinen Blogs zeigen, dass Artikel inzwischen am häufigsten auf Handys oder Tablets konsumiert werden. Die Anregung, ein Inhaltsverzeichnis zu erstellen, entsprang ebenfalls ihren Rückmeldungen, nachdem die Überschriften Links bekommen hatten.
Viele werden sich jetzt fragen, warum das ganze? Warum schon wieder neu? War da nicht erst was im Juni 2020? Das stimmt! In den folgenden Abschnitten beschreibe ich die Gründe und den Weg zu dem, was das Blog jetzt ist. Da dies etwas länger und auch etwas technischer wird, besteht jetzt die Möglichkeit, weiterzulesen oder hier abzubrechen und in anderen Beiträgen zu stöbern.
Die Gründe 🔗
Nachdem ich ja im vergangenen Juni zu Ghost gewechselt war, ließ sich das auch zunächst ganz OK an. Aber die Probleme stellten sich bald ein, vor allem im Admin-Bereich. Allein die Oberfläche zur Veröffentlichung hat diverse Bugs, die es mir im Grunde nur im Firefox mit NVDA möglich machten, überhaupt Beiträge zu veröffentlichen.
Am gravierendsten war ein Bug in der Komponente, die die Veröffentlichungseinstellungen und den Schalter zum Veröffentlichen enthielt. Diesen behob ich zwar, dieser Bugfix schaffte es jedoch bis heute nicht mal in die Komponente, geschweige denn in die Ghost-Plattform. Mehrere Versuche, die Ghost-Entwickler dazu zu bringen, sich den Fix zu holen und selbst zu integrieren, scheiterten.
Und auch ansonsten haben sie in den letzten Monaten viele Features eingebaut, die ich einfach nicht brauche und die trotzdem auch in Bereichen, die ich benutzen wollte, immer wieder zu Problemen geführt haben. Auch der Editor selbst ist nicht ohne seine Macken. Und obwohl ich zumeist über Ulysses schreibe, brauchte ich ihn doch ab und zu.
Außerdem sind bei Ghost Updates zum verwendeten Theme, also dem, was die visuelle Präsentation macht, ein echter Alptraum. Man muss nämlich von Hand aussortieren, was in einem neuen Update des Themes, das man verwendet, neu ist. Verschiedene Funktionen wie Kommentare, Mitglieder und andere Dinge erfordern nämlich manuelle Änderungen in den Thame-Dateien, die verloren gingen, wenn man diese einfach mit neuen Versionen überschreiben würde, ohne diese Änderungen wieder zu tätigen. Beim dritten Theme-Update hatte ich schlicht und einfach keine Lust mehr. Für diejenigen, die WordPress nutzen: Child-Themes Kent Ghost nicht. Genauso wenig wie Widgets und andere Einstreuungen, die man in WordPress tätigen kann.
Der Weg 🔗
Zurück zu WordPress wollte ich nicht. Obwohl es mir über 12 Jahre als Blogging-Plattform gute Dienste leistete, sind die Gründe für meinen Weggang bis heute weiterhin vorhanden. WordPress kann für meine Belange zu viel, ist sehr behäbig und nervt mit dem sich ständig weiter ausbreitenden Gutenberg ohne Ende. Ich habe mein Engagement dort inzwischen aufgegeben, weil die Barrierefreiheit und der Wunsch nach „coolem“ Design, sprich viel Herummausen, in ständigem Konflikt sind.
Und da besann ich mich auf etwas, das mich noch nie im Stich gelassen hat: die Kommandozeile. Es gibt wohl kaum etwas, das so zuverlässig funktioniert wie eine rein text-basierte Benutzerschnittstelle. Seit ich Computer benutze, hat diese Art der Interaktion noch nie versagt. Meine Texte schreibe ich schon in einem Editor, der Text viel näher ist als irgend welchem grafischen Layout-Krempel. Also ist es durchaus nicht weit von dorthin dazu, diese Texte abzuspeichern und auf eine Art zu veröffentlichen, die immer funktioniert.
Ich wollte aber dort nicht aufhören. Auch sollten die Seiten für euch sehr schnell aufgebaut werden und natürlich zugänglich sein. Die Konvertierung in das fürs Web übliche Format sollte also von der Kommandozeile aus angestoßen werden und zu einem schönen Ergebnis führen.
Die Lösung 🔗
Bei meiner Recherche zu WordPress-Alternativen war ich durchaus schon auf andere Software außer Ghost gestoßen. Unter anderem haben sich in den letzten Jahren neue Ansätze in der Webentwicklung verbreitet, die von diesen großen monolithischen serverseitigen Plattformen wie WordPress, Drupal usw. Weg gehen. Stattdessen wird auf eine Kombination aus JavaScript, Programmierschnittstellen und Markup gesetzt, der sogenannte Jamstack. Jam steht hierbei für JavaScript, APIs und Markup. Man baut den Inhalt also mithilfe von JavaScript zusammen, holt sich dafür evtl. Weitere benötigte Daten über entsprechende Programmierschnittstellen und baut das alles zu semantischem Markup ohne viel Drumherum zusammen, das dann meistens sogar als statische Seite ausgeliefert werden kann.
Dies macht bestimmte Webseiten sehr viel schneller als früher, da statische Seiten einfach schneller laden, kein JavaScript im Browser läuft, das noch große Änderungen vornehmen muss usw. Und auch der Server muss nicht erst bei der eingehenden Anfrage alles mühsam zusammen bauen.
Ein sehr prominenter Begriff aus diesem Bereich der Webentwicklung ist ein statischer Seitengenerator (SSG). Dies ist eine Software, die auf einem Server läuft. Sie baut mithilfe einer Kombination aus Vorlagen, JavaScript und Textdateien, genauer, Markdown statische Seiten zusammen. Diese werden dann von einem Webserver ausgeliefert.
Der wohl bisher prominenteste Vertreter dieser Gattung heißt Jekyll und ist vor allem bei Nutzern der GitHub Pages bekannt, weil diese Funktion der Versionsverwaltung genau darauf abgestimmt ist. Ein weiterer Vertreter, den man häufiger antrifft, heißt Hugo. Letzterer war auch in meiner engeren Wahl, als es darum ging, welchen SSG ich denn für mein Blog verwenden sollte. Aber einige Eigenheiten, die sich beim Testen schnell offenbarten, passten nicht zu den Ideen und Strukturen in meinem Kopf, sodass ich davon wieder Abstand nahm.
Mein Aufbau 🔗
Ich landete nach einigen Experimenten und Gesprächen schlussendlich bei Eleventy. Eleventy ist sehr flexibel, was die Struktur und die Konfigurierbarkeit angeht. Ich kann im Grunde jeder Datei sagen, wo sie hingehört, egal in welchem Ordner sie liegt, was weder bei Jekyll noch bei Hugo der Fall ist. Ich kann auch mithilfe der Vorlagensprache Nunjucks die Vorlagen so flexibel gestalten, dass ich abhängig davon, welche Features ein Beitrag hat, bestimmte Bereiche an- und abschalten kann. Das wird einmal programmiert und muss danach nicht wieder angefasst werden.
Eleventy verwendet selbst ebenfalls sehr viele Module von außerhalb, die ihrerseits ebenfalls erweiterbar sind. So wird jeder Beitrag nicht nur aus Markdown in HTML konvertiert und mit entsprechenden Vorlagen versehen, sondern alle im Beitrag enthaltenen Überschriften bekommen einen Anker und entsprechenden Link verpasst. Findet der Konverter auch noch an einer Stelle das Token für ein Inhaltsverzeichnis, wird dieses hierarchisch aus den verlinkten Überschriften generiert. Eleventy selbst weiß nur, dass es fürs Konvertieren Markdown und diese zwei Plug-ins in Reihe aufrufen soll, bekommt beim Aufruf des Inhalt-Tokens dann bereits das fertige HTML geliefert und baut dies ins Layout ein.
Eleventy hat noch einen weiteren großen Pluspunkt: Alles, was man programmiert und konfiguriert, basiert auf JavaScript. Das ist für mich die vertrauteste Sprache. Jeder SSG „denkt“ gewissermaßen in der Sprache, in der er programmiert wurde. Bei Jekyll ist dies Ruby On Rails, bei Hugo ist es die Sprache GoLang. Beide sind mir nicht wirklich vertraut. JavaScript hingegen schon.
Weiterhin wird das CSS für die visuelle Gestaltung per Sass erstellt. Sass ist eine Erweiterungssprache für Cascading Stylesheets (CSS) und erleichtert durch sehr modulares und strukturiertes Programmieren das Erstellen von mächtigen Stylesheets für Webseiten. Der Terminus Technicus ist CSS-Preprozessor.
Dies und einige andere Aufgaben, die zur Erstellung der gesamten Seite gehören, werden von Gulp erledigt. Gulp ist ein sehr nettes Tool, mit dem man Aufgaben in Reihe schalten oder auch parallel ausführen kann.
Das Ergebnis sind dann statische HTML-Seiten ohne JavaScript, voll gepackt mit dem fertigen CSS. Das einzige, das in separaten Dateien geladen wird, sind Grafiken. Alles andere wird mit dem Quelltext in einem Rutsch übertragen. Und damit das auch möglichst effizient geschieht, sind sowohl das CSS als auch das HTML auf das nötigste reduziert. In einem letzten Schritt wird nämlich unter anderem aus dem HTML-Quelltext jedes unnötige Quäntchen an Leerzeichen, Zeilenumbrüchen, Kommentaren usw. entfernt. Der Browser bekommt also nur das, was er unbedingt zur korrekten Darstellung benötigt.
Die Verwaltung 🔗
Das ganze muss natürlich irgendwo gespeichert werden. Und da man doch ab und zu etwas ändern will, bietet sich eine Dateiversionsverwaltung an. Wegen der besten Barrierefreiheit und weiten Verbreitung bin ich hier beim Branchen-Primus GitHub geblieben. Im Grunde alle Projekte, die mit meinem Blog zusammenhängen, haben Repositories bei GitHub. Und da viele es tun, nutze ich als Dienst fürs Erstellen und Ausliefern der Seiten den Dienst Netlify.
Netlify ist so ein Dienst, der ein echtes Träumchen ist. Er verzahnt sich so gut mit GitHub, dass, sobald ich Änderungen vornehme, er seinen Motor anwirft und mithilfe von Eleventy die Seite einmal neu erstellt. Ist alles in Ordnung, wird diese neue Version dann vollautomatisch auf den Webserver kopiert, von dem aus ihr ihn bekommt, wenn ihr meine Seite aufruft. Geht jedoch etwas schief, bekomme ich darüber eine Mitteilung, kann ggf. Korrigieren, und sobald die Korrektur ebenfalls in GitHub gelandet ist, geht ein neuer Versuch, die Seite zu aktualisieren, über die Bühne.
Netlify bietet noch mehr Funktionen, wie z. B. Das Ausprobieren von Funktionen. Ich kann in GitHub für eine neue Funktion einen extra Zweig meines Codes erstellen, auf diesem entwickeln und ab irgendeinem Punkt bestimmen, dass mir davon unter einer speziellen Domain eine Vorschau generiert wird. So kann ich testen, ob das, was ich mir so gedacht habe, eben nicht nur lokal auf meinem Rechner funktioniert, sondern auch live im großen Internet. Für die GitHub-Affinen: Ich erstelle mir einen Branch, und sobald ich einen Pull Request gegen meinen eigenen Haupt-Branch mache, erzeugt Netlify daraus eine Deploy-Preview. Sobald ich weitere Änderungen einchecke, wird die Vorschau aktualisiert. Sehr praktisch!
Fazit 🔗
Das Ganze ist, wie ich finde, eine sehr feine Sache. Ihr bekommt meine Inhalte jetzt noch schneller geliefert, und ich muss mich nicht mit Theme-Updates oder veränderten Gegebenheiten bei meiner Publishing-Plattform herumschlagen. Bei einem richtig eingestellten System muss ich lediglich die fertige neue Markdown-Datei für einen Beitrag per Commit ins Repository des Blogs Einpflegen. Der Rest passiert automatisch.
Auf kritische Sicherheits-Updates der von mir verwendeten Komponenten werde ich automatisch aufmerksam gemacht und kann die verwendeten Software-Komponenten entsprechend aktualisieren. Aber das betrifft euch ja nicht, ihr bekommt nur das Endprodukt ohne kritischen ausführbaren Code geliefert.
Mit diesem Set-up hoffe ich, euch in Zukunft wieder regelmäßiger mit Beiträgen beliefern zu können, die uns allen Spaß machen, mir beim Schreiben und euch hoffentlich beim Lesen.
Wenn ihr Fragen habt oder eine Meinung loswerden wollt, wisst ihr ja, wo das Kontaktformular ist.
Und jetzt wünsche ich euch weiterhin viel Spaß auf meinem Blog!