# 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.
>
> 2026-06-10 — y7.hk

## 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

```astro
<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 — beschrieben im [i18n-Tutorial](/de/tutorials/i18n-for-static-sites/).