Von der Idee zum fertigen Blog in 11 Tagen

Etwas Wichtiges vorweg geschickt: die schnelle Umsetzung ist dank meines verehrten Kollegen Maurice Renck möglich gewesen. Seine umfassenden Erfahrungen in Content Creation und Blogging waren unerlässlich, um zügig ein solches Setup aufzubauen. Solltet ihr also Unterstützung brauchen, meldet euch bei ihm oder mir - dann rocken wir auch euer Blog.

Kirby

Der Tech Stack dieses Blogs basiert auf Kirby. Bei meiner Arbeit in der konzentrik stehen wir oft mit Kunden vor der Entscheidung Wordpress oder Kirby. Erschreckenderweise gewinnt oft Wordpress, doch wir missionieren weiter. Es spricht viel für Wordpress und in den meisten Situationen noch mehr für Kirby. Im konzentrik Blog wurde darüber bereits berichtet - schaut hier: Kirby vs Wordpress und EoTo - ein Beispiel aus der Praxis.

Pro Tipp: bei einem Setup mit Kirby gibt es einen besonders wichtigen Sicherheitsaspekt - richtet unbedingt ein “Public Folder” Setup ein:

Im Kern geht es darum nur die index.php und .htaccess Datei von außen zugreifbar zu machen und so die Angriffsfläche zu minimieren.
Die Einstellungen dazu findet ihr in der Dokumentation.

Tailwind

Um zu einem schnellen Ergebnis im Frontend zu gelangen, kann ich euch nur ans Herz legen eine UI Vorlage zu nutzen. In meinem Fall habe ich nach Tailwind HTML Design geschaut und ein passendes Design gekauft. Wenn ihr ebenfalls so vorgehen wollt, hier ein kleiner Tipp:

Kopiert euch die Quelldateien in einen /src Ordner, nehmt die package.json aus dem Template mit den Skripten zum Tailwind-Build.
So könnt ihr aus der Tailwind Quelle eine eigene minified main.css erstellen und mit euren eigenen CSS Anpassungen bestücken - z.B. Google Fonts lokal ausliefern wegen DSGVO.

Zu Tailwind im Allgemeinen noch ein Einschub: grundsätzlich stehe ich gespalten zu Tailwind. Bei solch kleinen Projekten, wie dieser Blog, funktioniert der Ansatz bestens. Bei größeren Webseiten finde ich semantisch benannte und klare Klassennamen für wiederverwendbares und wartbares CSS besser.

Hosting

Das Blog ist bei All-Inkl in Deutschland gehostet. Damit bin ich bezüglich DSGVO auf der sicheren Seite. Des Weiteren ist die Verwaltung schnell und einfach. SSL Zertifikate, Umleitung von http auf https oder eigenes Mail Postfach sind mit wenigen Klicks eingerichtet. Das spart Zeit, funktioniert verlässlich und ist günstig.

Deployment

Den Code verwalte ich in GitHub. Ich checke alles außer den Content ein. So kann ich lokal an Plugins, Blueprints, Styling und Übersetzungen des Rahmengerüsts arbeiten. Ist alles zu meiner Zufriedenheit, commite ich auf einen separaten Origin. Auf All-Inkl wird dieser Origin ausgecheckt und mein neuer Code steht binnen Sekunden bereit. Ich muss nur sicherstellen, dass sämtliche Änderungen Non-Breaking sind.

Weil ich alleine am Blog arbeite und weiß was ich tue, ist das für dieses Setup akzeptabel. Würden ich mit einem Team dran arbeiten, wäre ein anderer Ansatz notwendig. Meine Gedanken dazu schreibe ich in einen separaten Artikel.

Automatisierung

Die Automatisierung hinter dem Deployment ist dank des einfachen Setups überschaubar. Der Push auf den separaten Origin führt zu einem Deployment auf dem All Inkl Server - ähnlich wie bei Heroku. Es bedarf keines Semantic Versioning oder Tagging. Und trotzdem ist alles voll automatisch. So lobe ich mir das.

Content Creation

Die Artikel erstelle ich im komfortablen Admin-Backend von Kirby. Der Artikel und die Bilder (z.B. das Hero Image) werden als Markdown bzw. Datei abgelegt und im Template verknüpft. Mit Hilfe des Veröffentlichkeitsdatum kann ich festlegen, wann der Artikel sichtbar wird.

Die Anbindung an Social Media Kanäle erfolgt Richtung Mastodon automatisch via IndieConnector Plugin. Für den Sync von Mastodon zu Bluesky nutze ich ein eigenes Tool, das ich gerade mit meinem Kollegen Maurice entwickele: CrossPoster. Wir werden es bald als SaaS verfügbar machen. Hier könnt ihr euch beim Newsletter anmelden, wenn ihr Interesse habt.

Performance

Generell ist anzumerken, dass Kirby ohne Datenbank arbeitet, weswegen die Seite keinen natürlichen Flaschenhals hat - zumindest habe ich das schon oft erlebt, dass eine falsch konfigurierte Datenbank eine Seite enorm ausbremst

Sobald eine Seite angefragt wird, speichert ein Cache Plugin die statischen Datei, sodass ab dem zweiten Aufruf nur noch das fertige HTML, CSS und JS ausgeliefert werden muss.

Backup & Recovery

Das Setup besteht aus zwei Komponenten. Dem Rahmen, der im Repository abgelegt ist und damit jederzeit wiederhergestellt werden kann. Und den Inhalten, die als Dateien im Ordner /content im System liegen. Als einfache Lösung gibt es für diesen Ordner einen rsync cronjob - ich mag es einfach!

Fazit

Geprägt durch die Vorlieben aus meinem Alltag bei konzentrik ist Kirby im Einsatz. Damit ist ein lokales Anpassen und Entwickeln sehr einfach. Der schlanke Tech Stack erlaubt gute Automatisierung, womit ich mich auf das Erstellen von Inhalten konzentrieren kann. Dank der Nutzung eines UI Templates ist die Hauptarbeit das Zerschneiden der HTML Vorlagen in Kirby Templates und Snippets. Dies hat es mir ermöglicht in so kurzer Zeit das Blog zu verwirklichen.

Als Wermutstropfen bei der Automatisierung bleibt das manuelle veröffentlichen auf LinkedIn und Medium - hier werde ich den CrossPoster in Zukunft anpassen, sodass es reicht einen Artikel bei Kirby zu veröffentlichen und damit einerseits Mastodon, Bluesky und LinkedIn zu bespielen und anderseits eine Kopie des Artikel bei Medium zu schalten.

Falls euch ein Einblick mit anderem Blickwinkel interessiert, schaut euch den Artikel Eine Kirby Seite in zwei Wochen bei meinem Kollegen an.