vannsl.io | Blog

Zwischen Wickeln und Entwickeln - Wie mein Blog mit Eleventy entstand

Vorwort

13 Jahre und 3 Monate habe am Stück als Softwareentwicklerin gearbeitet. Lückenlos, nicht einmal ein Monat Pause. Und dann? Plötzlich stand Mutterschutz und Elternzeit an. Na gut, so plötzlich war es nach einer ganzen Schwangerschaft auch nicht. Aber vorbereitet auf mehrere Monate "nicht arbeiten" war ich dennoch nicht. Und ja, alle Eltern lachen nun laut auf bei den Worten "Elternzeit" und "nicht arbeiten". Ich dachte ja vorher ein 40-Stunden-Job sei Vollzeit. Hachja.

Die Zeit in der Elternzeit ist begrenzt, und das Leben ist fremdgesteuert. Wann man selbst isst, schläft, oder duscht – alles richtet sich nach dem Baby. Wenn sich dann plötzlich Zeitfenster auftun, in denen das Baby unerwartet lange schläft oder jemand anderes es übernimmt, steht man erst einmal da und fragt sich: "Und jetzt?" Haushalt? Meh. Ein 800-seitiges Fantasy-Epos anfangen? Zu viel Commitment. Was mir am meisten fehlte? Zocken und Arbeiten. Also fing ich wieder damit an. Nur 7,5 Wochen nach der Geburt beendete ich daher vorzeitig meine Pause vom Working Draft Podcast, und kehrte wieder zurück, während das Baby bei Papa war. Dennoch blieb mir doch noch recht viel Zeit, in der das Baby bei mir tagsüber in der Trage schlief. Denn tagsüber wird ausschließlich geschlafen, wenn es in der Trage fest an mich gezurrt ist und ich am besten noch dazu auf einem Gymnastikball bounce. Also teilte ich diese Zeit 50/50 zwischen Spielkonsolen und Laptop auf. Immer mit Kopfhörern, versteht sich. Aber was mache ich nun eigentlich am Laptop? Ich wollte doch schon immer mal einen Tech Blog aufsetzen! Die Frage war nur: Warum hatte ich das vor der Geburt nie geschafft?

Das "richtige" Tool

Im Frontend-Ökosystem gibt es zahlreiche Frameworks, die sich für Blogs eignen. Ich wollte mir Zeit nehmen, verschiedene Tools zu testen, Vor- und Nachteile abzuwägen und die beste Wahl zu treffen. Auf meiner mentalen Liste standen:

VitePress und Nuxt Content, weil ich üblicherweise mit Vue arbeite. Solid, Astro und Qwik, weil ich auf Konferenzen viel über die Tools hörte. Doch sind das die richtigen Auswahlkriterien? Naja, es kommt darauf an. Für Firmen mag es relevant sein, wie viele Entwickler:innen sich für ein Framework interessieren, um genügend gute Leute für Projekte zu finden. Wobei, wie in Revision 656 (Link folgt, sobald die Episode released ist) des Working Draft besprochen, finden wir, dass Entwickler:innen schon irgendwie mit allen Frameworks klarkommen sollten. Davon abgesehen, werde ich alleine an diesem Projekt arbeiten. Um einen Lerneffekt zu erzielen, könnte man etwas wählen, das man noch nicht kennt. Das finde ich normalerweise einen sehr validen Grund. Nur, was das aufgrund meiner begrenzten Zeit nicht für mich relevant. Ein anderes Kriterium, könnte sein, dass das Framework möglichst lange noch existiert und es ein großes Core-Team und eine nette Community hat. Na, wer erinnert sich noch an AngularJS? Von Google? Und hat Facebook/Meta nicht Jest angefangen? Ich behaupte mal, da kann man sich nicht allzu sehr darauf verlassen. Meine Portfolio Webseite vannsl.io schrieb ich vor einigen Jahren mit Sapper. Das ist der Vorgänger des Meta-Frameworks SvelteKit von Svelte. Aber soll ich euch etwas sagen? Es läuft immernoch mit Sapper. Ich habe mich nie darum bemüht, es neu zu schreiben. Weil ich keinen richtigen Grund dafür habe. Für mich gab es also nur noch ein entscheidendes Kriterium: Mein Baby schläft jetzt – also muss es schnell gehen. Keine langen Lernkurven, keine komplexe Setup-Phase.

Wie Tobias Struckmeier treffend sagte:

"Imho usually the software chosen doesn't matter a lot to my experience. It's the dedication and love put in and in case of a blog anyway the content that makes the gold."

Also ließ ich den Gedanken an eine große Evaluierung fallen. Ich brauchte eine Domain und ein Hosting, aber alles musste so schnell und pragmatisch wie möglich gehen.

Domain und Hosting

In Revision 648: Personal Web Sites spricht Matthias Ott mit meinen Working Draft Cohosts Schepp und Peter über das Erstellen persönlicher Webseiten und das Konzept des Indie Webs. Die Idee: Inhalte selbst hosten, statt auf Plattformen wie Medium oder dev.to zu posten. Klingt gut, aber Selbsthosting? Dafür fehlte mir schlicht die Zeit.

Eine neue Domain kaufen? vanessaotto.de hatte ich zwar bei Strato, aber in einem Tarif, der nur für E-Mails taugt. Meine anderen Domains liegen bei Hover. Auf Strato sah ich, dass vanessaotto.com auch noch frei wäre. Verlockend. Die Idee, jetzt noch Domains zu transferieren oder Tarife zu ändern, ließ ich schnell fallen. Pragmatismus siegt: Der Blog läuft jetzt auf blog.vannsl.io, einer Subdomain meiner bereits auf Netlify gehosteten Portfolio-Seite. Setup-Zeit dank Netlify DNS? Weniger als fünf Minuten.

Die Tool-Entscheidung

Meine Hauptanforderungen:

  1. Blogartikel als Markdown-Dateien verwalten.
  2. Jederzeit daran arbeiten können, ohne mich lange reinfinden zu müssen.

Erst probierte ich VitePress aus. Ich dachte, das sollte mir leicht fallen. Ich ging ein paar Schritte durch den Getting Started Guide. Schon beim Setup merkte ich: Ich müsste mich mit Themes, Actions und Features beschäftigen. Dafür bräuchte ich zumindest einen Nachmittag mit vollem Fokus Zeit. Das Baby wackelte aber bereits in der Trage – also keine Zeit für langes Einarbeiten. Noch nicht einmal in vermeintlich einfache Tools.

Da erinnerte ich mich an Eleventy. Ich hatte es immer wieder von Leuten gehört, die normalerweise keine Framework-Hypes mitmachen. Zum Beispiel laufen Stefan Baumgartners Blog und die Working Draft Webseite darauf. Und den Gedanken etwas zu nutzen, das ich nicht mit einem Hype verband, fand ich erstaunlich verlockend. Perfekt.

Ein YouTube-Tutorial zeigte mir: Ich brauche nur HTML, JSON und Markdown. Die Routen generiert Eleventy automatisch. Exakt das, was ich suchte. Und von Schepp erfuhr ich, dass es möglich sei, Vue später mit in das Projekt hinzuzufügen.

Zur Inspiration ging ich auf die Webseite 11tybundle.dev. Diese beinhaltet einen guten Überblick über aktuelle Releases von Plugins, Blogartikeln, und Webseiten, die Eleventy im Einsatz haben. Und für meine Situation perfekt: Es beinhaltet eine Liste an 27 Starter-Projekten, davon 10, die explizit für Blogs gedacht sind. Ich fand ich schnell ein Starter-Template, das mir gefiel.

Ich habe schon Gerüchte über den 100%-Lighthouse-Score von Websites gehört, die mit Eleventy erstellt wurden. In diesem Artikel möchte ich allerdings nicht über Google-Lighthouse-Scores sprechen und verschlucke daher all meine Meinungen, mein Wissen und meine Gedanken zu diesem Thema. Ein 100%-Score sollte bei so einer einfachen Website, die im Grunde nur HTML und CSS lädt – vielleicht noch eine Schriftart und ein oder zwei lazy geladene Bilder –, eigentlich der Standard sein. Trotzdem ist es schön, nach dem Ausführen von Google Lighthouse das Konfetti zu sehen.

100% Lighthouse Score in all categories

Die Abstriche

Normalerweise hätte ich:

Stattdessen:

Das Layout ist simpel, und der einzige CSS-Breakpoint sitzt in der Welcome-Box der Startseite. Das Profilbild wird mobil über der Headline und auf Desktop rechts davon angezeigt. Das einzige andere selbst geschriebene CSS Feature ist die kurze Transition des Links in dieser Welcome-Box. Dazu inspirierte mich die Gestaltung der Links von Hans Christian Reinl.

Und jetzt? Jetzt schreibe ich. Zwischen Wickeltisch und Code. An dieser Stelle sei noch Stefan Temme gedankt, der für den Titel dieses Artikels gesorgt hat.

  1. Diese und noch viele weitere nützliche Tools findet ihr bei der Webseite Tiny Helpers von Stefan Judis. ↩︎ ↩︎ ↩︎