Astro mit Claude Code: Content Collections & Static Sites 2026
Astro ist das Framework für Content-lastige Websites — Blogs, Dokumentationen, Marketing-Seiten. Zero JavaScript by Default, Island Architecture für interaktive Inseln, Content Collections mit vollständiger Typisierung. Claude Code kennt Astro in- und auswendig.
Warum Astro? Das Island Architecture Prinzip
Astro Performance: Lighthouse Score 100 out-of-the-box. JavaScript wird NUR für interaktive Komponenten geladen (
client:load, client:visible). Eine normale Blog-Seite sendet 0 KB JavaScript an den Browser — Next.js sendet 100-300 KB.SetupNeues Astro-Projekt mit Claude Code
# Prompt: "Erstelle ein Astro-Blog mit Content Collections und Tailwind"
npm create astro@latest my-blog -- --template blog
cd my-blog
# Integrationen hinzufügen:
npx astro add tailwind # Tailwind CSS
npx astro add react # React für interaktive Islands
npx astro add mdx # MDX-Support für Content
npx astro add sitemap # Auto-Sitemap
npx astro add compress # Brotli/Gzip
# Projektstruktur:
src/
content/
blog/ # Markdown/MDX-Dateien
post-1.md
post-2.mdx
config.ts # Collection-Schema
pages/
blog/
[slug].astro # Dynamische Route
index.astro # Blog-Übersicht
layouts/
BlogPost.astro
components/
Search.tsx # React Island
Content Collections: Typisierte Inhalte
CollectionsSchema-definierte Content Collections
// src/content/config.ts
// Prompt: "Definiere Content Collections für Blog und Autoren"
import { defineCollection, z, reference } from 'astro:content';
const authorsCollection = defineCollection({
type: 'data', // JSON/YAML (kein Markdown)
schema: z.object({
name: z.string(),
avatar: z.string().url(),
bio: z.string().max(200),
twitter: z.string().optional(),
}),
});
const blogCollection = defineCollection({
type: 'content', // Markdown/MDX
schema: ({ image }) => z.object({
title: z.string().max(60),
description: z.string().max(160),
pubDate: z.coerce.date(),
updatedDate: z.coerce.date().optional(),
author: reference('authors'), // Relation zu authors!
tags: z.array(z.string()),
cover: image(), // Astro Image Optimization
draft: z.boolean().default(false),
}),
});
export const collections = {
blog: blogCollection,
authors: authorsCollection,
};
// src/content/blog/mein-post.md
---
title: "Mein erster Post"
description: "Eine kurze Einführung in Astro"
pubDate: "2026-05-05"
author: daniel-bratschke # Referenz auf src/content/authors/daniel-bratschke.json
tags: ["astro", "webdev"]
cover: "./cover.jpg"
---
# Astro ist fantastisch
Hier kommt der Markdown-Inhalt...
# TypeScript-Fehler im Frontmatter? Claude Code findet sie sofort!
# Falscher Typ, fehlende Felder → Kompilierungsfehler
Dynamische Routen mit getStaticPaths
// src/pages/blog/[slug].astro
// Prompt: "Erstelle eine Blog-Post-Seite mit SEO und Prev/Next Navigation"
---
import { getCollection, getEntry } from 'astro:content';
import BlogLayout from '../../layouts/BlogLayout.astro';
export async function getStaticPaths() {
const posts = await getCollection('blog', ({ data }) => {
return !data.draft; // Drafts filtern
});
return posts.map((post, index) => ({
params: { slug: post.slug },
props: {
post,
prev: posts[index - 1] ?? null,
next: posts[index + 1] ?? null,
},
}));
}
const { post, prev, next } = Astro.props;
const { Content, headings } = await post.render();
const author = await getEntry(post.data.author); // Typisiert!
---
<BlogLayout {post} {author}>
<Content /> {/* MDX-Inhalt rendern */}
<nav>
{prev && <a href={`/blog/${prev.slug}`}>← {prev.data.title}</a>}
{next && <a href={`/blog/${next.slug}`}>{next.data.title} →</a>}
</nav>
</BlogLayout>
Island Architecture: React in Astro
IslandsInteraktive Komponenten selektiv hydratisieren
// SearchBar.tsx — React-Komponente als Astro Island
import { useState, useEffect } from 'react';
export default function SearchBar({ posts }: { posts: PostMeta[] }) {
const [query, setQuery] = useState('');
const filtered = posts.filter(p =>
p.title.toLowerCase().includes(query.toLowerCase())
);
return (
<div>
<input value={query} onChange={e => setQuery(e.target.value)} />
{filtered.map(post => <div key={post.slug}>{post.title}</div>)}
</div>
);
}
{/* In .astro-Datei: Island mit Hydration-Strategie */}
<!-- client:load → sofort hydratisieren (für Above-the-Fold) -->
<SearchBar posts={posts} client:load />
<!-- client:visible → nur wenn in Viewport (Lazy Loading) -->
<Comments client:visible />
<!-- client:idle → wenn Browser idle (Low Priority) -->
<Newsletter client:idle />
<!-- client:media → nur bei bestimmter Screen-Width -->
<MobileMenu client:media="(max-width: 768px)" />
<!-- kein client:* = reines HTML, 0 KB JavaScript -->
<StaticCard />
Island Performance:
client:visible ist die Standardwahl für nicht-kritische interaktive Komponenten — sie werden erst geladen wenn der User scrollt. Das spart Initial-Load-Zeit erheblich. Claude Code wählt die richtige Hydration-Strategie automatisch basierend auf dem Kontext.View Transitions: Native Page Transitions
{/* Layout.astro — View Transitions aktivieren */}
---
import { ViewTransitions } from 'astro:transitions';
---
<html>
<head>
<ViewTransitions /> {/* Browser-native Page Transitions */}
</head>
<body>
<slot />
</body>
</html>
<!-- Spezifische Transition für ein Element: -->
<img
src={post.cover}
transition:name={`cover-${post.slug}`} {/* Shared Element Transition */}
/>
<!-- Animation anpassen: -->
<main transition:animate="slide"> {/* slide, fade, none */}
<slot />
</main>
Deployment: Vercel, Netlify, Cloudflare Pages
DeployStatic + SSR Deployment
# astro.config.mjs — für Vercel SSR:
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';
export default defineConfig({
output: 'hybrid', // Static + SSR gemischt
adapter: vercel(),
site: 'https://mein-blog.de',
image: {
service: { entrypoint: 'astro/assets/services/sharp' }
},
});
# Seite als SSR markieren (default ist static):
// src/pages/api/search.ts — Dynamic API Route
export const prerender = false; // Diese Route ist SSR
export async function GET({ url }: { url: URL }) {
const query = url.searchParams.get('q');
return Response.json(await searchPosts(query));
}
Astro-Modul im Kurs
Im Claude Code Mastery Kurs: vollständiges Astro-Modul mit Content Collections, Island Architecture, MDX, View Transitions, Starlight-Dokumentation und Deployment auf Vercel/Cloudflare — inkl. Performance-Optimierung und SEO.
14 Tage kostenlos testen →