09 MÄRZ 2022 / CODE

Entwicklung dieser Webseite v.2022

In regelmässigen Abständen versuche ich meine persönliche Webseite neu zu gestalten. Dabei habe ich so viel Freiheit wie sonst kaum wo und kann meine Werkzeuge, Bibliotheken, Technologien und Inhalte von A-Z selbst wählen. Für meine 2022-Version meiner Webseite entschied ich mich dazu, gleich mehrere neue Tools zu verwenden.

CMS oder SSG?

Die erste Frage, die ich mir stellte war der Aufbau der Webseite. Klar war für mich, dass ich auf meiner persönlichen Webseite einen kleinen Blog betreiben möchte. Somit war die Art, wie ich Inhalte hochladen kann von grosser Bedeutung. In meiner Arbeit als Webdesigner und -entwickler habe ich verschiedenste CMS (Content Management Systems) kennengelernt und auch zahlreiche statische Webseiten realisiert. Wichtig war für mich einerseits, dass ich Blogposts einfach hinzufügen kann, ohne diese in hunderten Dokumenten verlinken zu müssen. Wichitg war mir aber auch eine möglichst weitgehende Freiheit. Allzu oft bin ich bei CMS wie WordPress bspw. an "Grenzen" gestossen und musst auf eigene Themes, Plugins ausweichen. Dies nicht weil die CMS nicht gut gewesen wären, sondern einfach weil ich irgend welche Sonderwünsche einbauen wollte/musste. Sobald ich bei einem CMS HTML schrieb bereute ich es im Nachhinein meist, die Webseite nicht von Anfang an von Hand entwickelt zu haben. Schlussendlich schwankte ich bei meiner Webseite also zwischen den zwei Entwicklugnsmöglichkeiten: CMS mit eigenem Theme oder statische Webseite. Bei den CMS hatte (und habe ich immernoch) Ghost auf der "To Try"-Liste, ein CMS, das mich schon sehr lange sehr interessiert und sehr ansprechend wirkt. In meinem Blog-Template sieht man auch deutlich, dass die klassischen Ghost-Layouts mich inspirierten. Für Ghost sprach die einfache Oberfläche und die umfangreichen Funktionen, dagegen sprach das Hosting: Wie bei jedem CMS ist das Pflegen des Backends doch relativ zeitaufwändig. Für eine statische Webseite sprach somit einerseits die absolute Freiheit, meine Tools selbst zu wählen und mich an keine spezifische Templating-Sprache halten zu müssen, sowie der geringe Unterhaltsaufwand, wenn die Webseite mal stand. So fiel die Wahl schnell auf einen static Site Generator. Dieser gab mir sowohl Entwicklugnsfreiheit, beste Performance, höhere Sicherheit (und keine Unterhaltsarbeiten) sowie günstige Hosting-Optionen.

Eleventy ❤️

Die nächste Frage war somit: Wie weiter? Static Site Generatoren gibt es tausende. Von Gatsby über Next.js, Jekyll, Nuxt bis zu eleventy. Lange liebäugelte ich mit Next.js oder Nuxt (da ich mehr Erfahrung mit VueJS als mit React habe), kam dann aber immer wieder auf einen relativ neuen Player: Eleventy. Eleventys Motto ist "Eleventy, a simpler static site generator." und so war es auch. Was mit einem kurzen Ausprobieren startete wurde schnell zu einem simplen, effizienten Workflow. Eleventy war einfach aufzusetzen und lässt mir jegliche Freiheit. Ich bin begeistert von Eleventy und habe mich immer wieder gefragt, wo Eleventy während meiner Arbeit als Webentwickler war.

Tailwind CSS

So viele Entwickler:innen sprechen in höchsten Tönen von Tailwind, ich musste es einfach probieren. Auf eine abschliessende Einschätzung konnte ich mich aber selbst mit Abschluss dieser Webseite noch nicht festlegen.
Das Aufsetzen der Tailwind Umgebung in Eleventy war nicht sehr kompliziert. Relativ schnell vermisste ich aber Components als Grundbausteine, so implementierte ich relativ rasch schon DaisyUI. Damit habe ich wohl den ursprünglichen Sinn und Zweck von Tailwind schon etwas untergraben.
Was mir an Tailwind positiv auffiel war die einfache Art, responsiv zu designen. Auch sehr ansprechend fand ich die Einfachheit, wie mit Farben umgegangen wird. Neben einem Dark-Theme habe ich analog zu DaisyUI gleich mehrere Themes als Spielerei mit in die Webseite gepackt.
Dennoch hatte ich oft das Gefühl: Mit reinem CSS wäre ich schneller. Das wird wohl daran gelegen haben, dass ich die Tailwind-Klassen einfach noch nicht kannte. Das Entwicklungstempo nahm sodann auch stetig zu, doch immer wieder musste ich mich ganz bewusst gegen das Schreiben von eigenen CSS-Klassen oder gar inline-CSS entscheiden und in den Tailwind-Docs nach den entpsrechenden Klassen suchen.
Ob ich Tailwind auch bei meinen nächsten Projekten brauchen werde, habe ich noch nicht entschieden. Es gibt einige Argumente dafür, aber auch einige Situationen, wo ich mich frage: Brauche ich dafür wirkich Tailwind?