This is my first log-entry.
Logbuch: 11ty + Pico CSS Setup
Heute Morgen habe ich beschlossen, das Blog-Projekt endlich vom Rumliegen zu retten und mit Eleventy und Pico CSS neu zu starten. Keine komplexe Build-Pipeline, keine überengineerte CSS-in-JS-Lösung – nur ein schlanker Static Site Generator mit einem minimalistischen CSS-Framework, das tatsächlich noch funktioniert, wenn JavaScript ausfällt. Nach ein paar Kaffee habe ich die npm init @11ty/eleventy@latest geworfen und mich in die Grundkonfiguration gestürzt.
Die initiale Setup war reibungslos – 11ty generiert Dir eine relativ saubere .eleventy.js mit sinnvollen Defaults. Ich habe einen Input-Ordner auf src/content gesetzt und das Output-Verzeichnis auf dist. Wichtig: Ich habe auch schon .gitignore angepasst, weil Du sonst plötzlich _site oder welcher Default auch immer in Git endet. Die Pfade sind schnell richtig gewesen, und die first run hat bereits funktioniert. Allerdings hab ich gemerkt, dass ich die Nunjucks-Syntax erst wieder aktivieren musste – 11ty ist mittlerweile auf Liquid als Default eingestellt.
Pico CSS habe ich dann über CDN eingebunden, nicht per npm-Paket. War eine bewusste Entscheidung: Das Framework ist klein genug (~10KB), dass das Overhead-Verhältnis nicht stimmt. Im _includes/base.njk Template ein einfaches Link-Tag im <head> und fertig. Das CSS war sofort da, keine Besonderheiten. Ich habe dann noch die CSS-Variablen für Farben und Spacing angeschaut – Pico nutzt Custom Properties, was mir entgegenkommt, wenn ich später Theme-Switching bauen möchte.
Die erste echte Hürde war die Struktur für Blogposts. Ich wollte nicht nur einzelne .md-Dateien, sondern auch eine automatische Sammlung über tags: blog. Das bedeutete, ich musste mich mit 11ty's collections API auseinandersetzen und verstehen, wie die _data-Dateien funktionieren. Hat keine Stunde gedauert, aber es war ein Moment, wo ich die Doku aufmachen musste. Jetzt kann ich Posts einfach frontstatter und sie landen automatisch in der Blog-Collection und der Sitemap.
Der Build läuft jetzt lokal in etwa 200ms, und das ist schnell genug zum Arbeiten. Ich habe auch Pagination für die Blog-Übersicht aufgesetzt (10 Posts pro Seite), damit die index nicht zur Wörstwurst wird. Die _includes sind organisiert: Ein layouts-Ordner mit base/post/page, ein partials-Ordner für Header und Footer. Pico übernimmt den visuellen Heavy Lifting, ich muss nur die Struktur bauen.
Für morgen: Ich will noch eleventy-img für die lokale Bildoptimierung einbinden und eine Search-Funktionalität über lunr.js testen. Das Deployment auf Netlify oder Vercel ist dann ein Einzeiler, aber erst möchte ich, dass die Seite inhaltlich läuft. Das Ganze fühlt sich jetzt an wie ein Setup, das ich anfassen kann – nicht zu viel Magic, nicht zu wenig Struktur.