Astro als flexibler Static-Site-Builder

Das hängt natürlich stark davon ab, was auf der Webseite alles so passieren soll. Unsere Seite wird viele statische Inhalte haben, die nur gelegentlich aktualisiert werden. Die einzige Ausnahme: unser Blog.

Ein Blog schreit natürlich förmlich nach einem CMS. WordPress ist uns für diesen Fall viel zu behäbig. Kirby kam noch in die engere Auswahl, weil es so flexibel und schnell ist. Entschieden haben wir uns dann allerdings ganz anders.

Wir haben uns gegen ein CMS entschieden, sondern für einen Static Site Builder. Ziel ist es, unsere statischen Seiten direkt mit HTML zu bauen, weil sich die Layouts zu sehr voneinander unterscheiden, als dass wir das vereinheitlichen könnten. Der dynamische Teil unserer Seite, das Blog, soll hingegen automatisch generiert werden.

Fürs Blog arbeiten wir mit Markdown-Dateien, die mit Metadaten angereichert sind. Alle Beiträge haben dasselbe Layout und werden schließlich in einer Übersicht angezeigt und verlinkt.

Bei Static-Site-Generatoren hat man die Qual der Wahl. Wir haben bereits mit Gatsby gearbeitet, die Möglichkeit statische Seiten zu generieren und Teile davon dynamisch austauschen zu können, gefällt uns. Für unser Unterfangen wirkte Gatsby etwas zu komplex und wir würden uns auf React beschränken müssen.

Besonders angesagt ist 11ty. Darauf fiel unsere Wahl zunächst. Nach wenigen Stunden Arbeit, störte uns die unübersichtliche Dokumentation und der Zeitaufwand, um einfach Dinge umzusetzen, wie das Anzeigen von Bildern. Wir brachen das Experiment schnell wieder ab und entschieden uns für Astro, was wir schon länger im Blick hatten.

Astro ist ein schneller und flexibler statischer Site-Builder, der moderne Webtechnologien wie React und GraphQL verwendet. Es ist hochgradig anpassbar und ermöglicht eine einfache Integration mit anderen Tools und Services. Wir können, müssen aber nicht, React verwenden, könnten uns für Vue entscheiden, oder (wie in unserem Fall) gar keines dieser Frameworks verwenden.

Ein neues Projekt ist schnell angelegt. Astro verfügt über einen integrierten Entwicklungsserver, der es uns erleichtert, unsere Änderungen in Echtzeit zu sehen, während wir entwickeln. Es braucht also nicht noch einen Webserver, um lokal entwickeln zu können.

Eine der besten Eigenschaften von Astro ist seine auf Komponenten basierende Architektur. Die macht es uns leicht, wiederverwendbare Komponenten wie Navigation, Header und Footer zu erstellen, die wir auf unserer gesamten Website nutzen können.

Astro erstellt unsere Seiten sowohl aus einfachen HTML-Templates oder eben aus unseren Markdown-Dateien fürs Blog. Am Ende bekommen wir statisches HTML geliefert, zusammen mit CSS und ein wenig Javascript, wo es gebraucht wird. Das macht uns das Hosting sehr einfach, denn jeder Hoster kann statisches HTML ausliefern.

Als Resultat haben wir eine sehr schnelle Webseite, die derzeit komplett statisch ist, die wir bei Bedarf um dynamische Bereiche erweitern können - z.B. sobald sich unser Kunde künftig anmelden kann, um den neuen Service zu nutzen.
Anders als bei 11ty ist die Dokumentation sehr übersichtlich. Im Web und bei YouTube findet ihr schnell Tutorials und Beispiele. Allerdings ist der Einsatz mit einem kleinen Risiko verbunden, denn Astro ist noch jung - es könnte also sein, dass Astro keinen so großen Anklang findet und wohlmöglich nicht weiterentwickelt wird.

Derzeit sieht es nicht danach aus. Unser Setup ermöglicht es uns im Zweifel mit überschaubarem Aufwand den Site-Builder zu wechseln, wenn das nötig sein sollte.

Bisher sind wir sehr zufrieden mit Astro und würden euch empfehlen, es beim nächsten Web-Projekt auf jeden Fall in Erwägung zu ziehen. Vielleicht benutzt ihr ja auch noch ganz andere Tools und Builder, dann immer her damit in die Kommentare!

Sobald unsere neue Webseite online ist, werden wir euch natürlich bescheid geben. Bis dahin!

Foto von NASA auf Unsplash