BeginnerAstro45 Min.10. Juni 2026

Shippe deine erste Astro-Site

In 45 Minuten von null zur deployed Static Site — Content Collections, Islands und das mentale Modell, mit dem Astro klick macht.

Warum Astro

Astro shippt standardmäßig null JavaScript. Dein Content rendert auf dem Server zu plain HTML, und interaktive Islands hydratisieren nur dort, wo du es willst. Für eine content-lastige persönliche Site — Blog, Research, Galerien — ist das genau der Tausch, den du willst.

Der 45-Minuten-Weg

  1. npm create astro@latest — Blog-Template wählen, TypeScript strict.
  2. Content Collection in src/content.config.ts mit Zod-Schema definieren.
  3. Schreibe deinen ersten .mdx-Post — Frontmatter wird zur Build-Zeit validiert.
  4. [slug].astro-Seite mit getStaticPaths() + render() hinzufügen.
  5. Deploy: astro build erzeugt ein komplett statisches dist/, das du überall hosten kannst.

Islands: der Teil, den alle übersehen

<Hero client:load />        <!-- hydratisiert sofort -->
<Chart client:visible />    <!-- hydratisiert beim Reinscrollen -->
<Comments client:idle />    <!-- hydratisiert, wenn der Browser idle ist -->

Nimm client:visible für alles unterhalb der Fold. Dein Lighthouse-Score wird es dir danken.

Wie weiter

i18n mit [locale]-Routen dazubauen — das ist eine eigene Lektion.

Tutorials