Astro für die eigene Website

Meine alte Website war von 2017. PHP, jQuery 1.7, ein paar SASS-Dateien. Sie hat funktioniert, aber sie war peinlich. Also habe ich sie neu gebaut.

Warum Astro

Ich wollte keinen Overhead. Kein React, kein Vue, keine Hydration für eine Seite, die aus Text und einem Foto besteht. Astro liefert statisches HTML und CSS — fertig.

Der Astro Dev-Server startet in unter einer Sekunde.

Die Seite ist ein paar hundert Kilobyte groß, lädt sofort, und ich muss mich nicht um eine Runtime kümmern. Für eine Portfolio-Seite genau richtig.

Projektstruktur

Astro organisiert den Code in Komponenten, Layouts und Pages. Jede Section der Startseite ist eine eigene .astro-Datei:

Jede Komponente enthält ihr eigenes HTML und scoped CSS.

Was mir daran gefällt: Ich kann die Hero-Section ändern, ohne versehentlich den Footer kaputt zu machen. Scoped Styles machen das möglich.

Fonts und DSGVO

Google Fonts extern einbinden ist in Deutschland ein Risiko. Also habe ich die .woff2-Dateien heruntergeladen und binde sie lokal per @font-face ein. Keine Requests an Google, kein Cookie-Banner nötig.

Fazit

Für eine statische Website mit Blog-Funktion ist Astro genau richtig. Wenig Magie, schneller Output, Markdown für Posts. Den Rest erledigt nginx im Docker-Container.