Eleventy

Eleventy (11ty) ist schon seit einigen Jahren mein Tool der Wahl, wenn es um die Erstellung von Webseiten geht. Dabei eignet sich Eleventy sowohl für eine einfache statische Seite, einen Blog wie diesen oder auch die Seite zu meinem Podcast Ready for Review. Das schöne ist, dass man hier recht schnell gute Ergebnisse erzielen kann und daher zeige ich in diesem Tutorial, die Grundlagen um einen Blog zu erstellen.

Einer der Gründe, weshalb ich ein großer Fan von Eleventy bin, ist die Möglichkeit, Templates mit beliebigen Daten anzureichern und daraus Seiten zu generieren. Früher habe ich Seiten normalerweise mit Wordpress erstellt, da ich es kannte und damit meine Probleme lösen konnte. Als ich dann anfing, einen Podcast zu veröffentlichen, brachte mich Christian (@derschepp) auf die Idee, mit einem static-site generator meine Webseite zu veröffentlichen, da es hier ja möglich sei aus externen Daten, wie einem RSS-Feed, die Webseite zu erzeugen.

In meinem Eleventy-Tutorial habe ich gezeigt, wie man mit Eleventy einen Blog aufsetzt und wie CSS in die Seiten kommt. Hier geht es einen Schritt weiter: Tailwind CSS im selben Build.

Der verbreitete Weg ist, beides nebeneinander laufen zu lassen. Die Tailwind-CLI beobachtet das Stylesheet, Eleventy beobachtet die Templates, und in der package.json hängen zwei Skripte an npm-run-all oder concurrently. Das funktioniert zuverlässig, bedeutet aber zwei Prozesse, die dasselbe Ausgabeverzeichnis befüllen, und Eleventy weiß nichts vom fertigen Stylesheet.

Ich lasse stattdessen Eleventy das CSS selbst bauen. Ein Hook erzeugt das Stylesheet, bevor das erste Template gerendert wird, und legt den fertigen Pfad als globale Daten ab. Ein Befehl, ein Prozess, und das Layout kennt den Dateinamen.