Zum Inhalt springen
astro-template
MITLoslegen
Astro 7 · Cloudflare Workers · pnpm-Monorepo

Astro-Monorepo,
fertig eingerichtet

Starter mit Landingpage und Blog auf Astro 7, Tailwind v4 und Svelte 5. Lint, E2E-Tests, Build-Audit, CSP und Deployment auf Cloudflare Workers sind konfiguriert. MIT-lizenziert.

Template auf GitHubStarter-Demo
Astro
7.3.2
Tailwind CSS
4.3.3
Svelte
5.57.0
Node.js
≥ 22.12
Stack
  • Astro 7
  • Vite 8 · Rolldown
  • Tailwind v4
  • Svelte 5
  • TypeScript 6
  • Zod v4
  • Biome 2
  • Playwright
  • axe-core
  • pnpm 11
  • Cloudflare Workers
  • MIT
01 — Überblick

Die Einrichtung, die sonst jedes Projekt neu macht.

Astro liefert statisches HTML und lädt JavaScript nur für Inseln, die ausdrücklich eingebunden sind. Das Template ergänzt die Werkzeugkette, die sonst in jedem Projekt neu entsteht: Lint und Format, Tests, Audits, Security-Header, Mehrsprachigkeit und Deployment. Neue Apps sind ein Ordner unter apps/ und teilen Tokens und Komponenten aus shared/.

github.com/casoon/astro-v7-template →
  1. 01Zwei Apps — starter mit Landingpage und Kontaktformular, blog mit MDX und RSS
  2. 02Geteilte Basis — Tokens, Komponenten, Layouts und Utilities in shared/
  3. 03Zentrale Versionen — ein pnpm-Catalog für alle Apps
  4. 04Folgt Astro 7 — das Template wird mit den Astro-7-Releases aktualisiert
02 — Loslegen

Klonen, installieren, starten.

  1. 1Klonen

    Repository holen

    Voraussetzung: Node.js ab 22.12.0 und pnpm ab 11.

    git clone https://github.com/casoon/astro-v7-template.git
  2. 2Installieren

    Abhängigkeiten laden

    Ein Install für alle Apps, die Versionen kommen aus dem Catalog.

    pnpm install
  3. 3Entwickeln

    Dev-Server starten

    Starter auf Port 4321, Blog auf Port 4322.

    pnpm dev · pnpm dev:blog
  4. 4Deployen

    Auf Cloudflare ausrollen

    Baut die App und führt wrangler deploy aus.

    pnpm deploy:starter
03 — Features

Eingerichtet, nicht nur installiert.

Tailwind v4

CSS-first-Konfiguration über das Vite-Plugin, OKLCH-Farben, Dark Mode nach Systemeinstellung mit Umschalter.

Svelte 5 Runes

Reaktive Inseln mit $state und $derived. Seiten ohne Insel kommen ohne Framework-JavaScript aus.

i18n (en/de)

Astro-i18n-Routing: Englisch ohne Präfix, Deutsch unter /de/, hreflang in der Sitemap.

Security

Astros eingebaute Content Security Policy mit SHA-256-Hashes, dazu checkOrigin gegen CSRF.

Astro Actions

Kontaktformular mit serverseitiger Verarbeitung und Zod-Validierung.

OG-Bilder

Zur Build-Zeit mit Satori und resvg erzeugt, pro Seite und Sprache.

Playwright + axe-core

15 Spec-Dateien für beide Apps: Navigation, SEO, i18n, Formular, Theme und Accessibility-Scans.

Code-Analyse

fallow findet ungenutzte Dateien, Exporte und Abhängigkeiten, Komplexitäts-Hotspots und Duplikate.

Blog-App

MDX mit Content Collections, Inhaltsverzeichnis mit Scrollspy, Lesefortschritt und RSS-Feed unter /rss.xml.

04 — Astro 7

Was Astro 7 im Template ändert.

KriteriumAstro 7Astro 6
BundlerVite 8 + RolldownVite 7 + Rollup
.astro-CompilerRust, lehnt offene Tags abGo
MarkdownSätteri, GFM und Heading-IDs eingebautremark/rehype mit Plugins
compressHTML (Default)'jsx'true
@astrojs/cloudflarev14, workerd in jeder Phasev13
src/fetch.tsreserviert für Advanced Routingfrei nutzbar

Stand: September 2026, laut README des Templates. Mit compressHTML: 'jsx' kann Leerraum zwischen Inline-Elementen wegfallen – dann hilft {" "}.

05 — Struktur

Ein Workspace, klar aufgeteilt.

Projektstrukturtree
astro-v7-template/
├── apps/
│   ├── starter/          # Landingpage, Kontaktformular, i18n
│   └── blog/             # MDX-Blog, RSS, i18n
├── shared/               # Tokens, Komponenten, Layouts, SEO
├── integrations/         # eigene Integrationen
├── e2e/
│   ├── starter/          # Playwright-Tests
│   └── blog/
├── .github/workflows/    # CI-Pipeline
├── biome.json
├── playwright.config.ts
└── pnpm-workspace.yaml   # Workspace + Catalog
pnpm-workspace.yamlCatalog
# pnpm-workspace.yaml
catalog:
  astro: ^7.3.2
  "@astrojs/cloudflare": ^14.3.1
  "@astrojs/svelte": ^9.0.1
  tailwindcss: ^4.3.3
  svelte: ^5.57.0
  typescript: ^6.0.3
  zod: ^4.5.4
  "@biomejs/biome": ^2.5.12
  "@casoon/astro-post-audit": ^0.6.0
  "@casoon/astro-structured-data": ^2.0.1
06 — Ökosystem

Sechs CASOON-Pakete, schon verdrahtet.

@casoon/astro-post-audit

Build-Audit

Prüft nach jedem Build SEO, Links, HTML und Accessibility-Regeln. Nur echte Fehler brechen den Build ab.

0.6.0
@casoon/astro-site-files

Site-Dateien

Erzeugt robots.txt, sitemap.xml mit hreflang, llms.txt, security.txt und humans.txt.

0.5.0
@casoon/astro-structured-data

JSON-LD

Typisierte Schema-Komponenten; mit generateMeta entstehen Open-Graph- und Twitter-Tags.

2.0.1
@casoon/astro-speed-measure

Build-Metriken

Misst die Build-Zeit von Integrationen, Vite-Plugins und Seiten.

0.4.0
@casoon/astro-webvitals

Web Vitals

Misst LCP, CLS und INP im Browser. In Produktion melden 10 % der Sessions an einen typisierten Endpunkt.

0.4.8
@casoon/nosecrets

Secret Scanning

Pre-commit-Hook und Workspace-Scan gegen API-Keys und Tokens im Repository.

0.3.7
07 — Grenzen

Was man vorher wissen sollte.

Ein Template nimmt Entscheidungen vorweg. Diese hier sind bewusst so getroffen.

Cloudflare als Standard

Andere Plattformen brauchen drei Änderungen pro App: Adapter tauschen, Sharp als Bilddienst aktivieren, wrangler.toml löschen.

TypeScript bleibt bei 6

astro check braucht eine API, die TypeScript 7 noch nicht bereitstellt. Die Version ist deshalb auf ^6.0.3 festgelegt.

Web Vitals ohne Speicher

Der Endpunkt prüft die Messwerte und antwortet mit 204. Wohin die Daten gehen, entscheidet das Projekt.

Englisch als Standardsprache

Englisch liegt ohne Präfix im Root, Deutsch unter /de/. Wer es umgekehrt braucht, passt die i18n-Konfiguration an.

08 — Passt für
  • Marketing-Websites
  • Blogs und Content-Seiten
  • Landingpages
  • Agentur-Starter
  • Multi-App-Monorepos
  • Cloudflare-Projekte
09 — FAQ

Häufige Fragen.

Warum ein Monorepo statt eines einzelnen Projekts?

Mehrere Apps – etwa Website, Blog und Landingpages – teilen Design-Tokens, Komponenten und Werkzeuge und bleiben trotzdem einzeln deploybar. Eine neue App ist ein Ordner unter apps/, der aus shared/ importiert.

Muss ich Cloudflare verwenden?

Nein. Das Template ist für Cloudflare Workers vorkonfiguriert. Für Node.js, Vercel oder Netlify wird der Adapter getauscht, Sharp als Bilddienst aktiviert und die wrangler.toml entfernt.

Was ändert sich durch Astro 7?

Vite 8 mit Rolldown als Bundler, ein Rust-Compiler für .astro-Dateien, der nicht geschlossene HTML-Tags ablehnt, und Sätteri als Markdown-Prozessor mit eingebautem GFM. compressHTML steht auf jsx, dadurch kann Leerraum zwischen Inline-Elementen wegfallen.

Wie bleibt mein Projekt aktuell?

Das Template ist ein Startpunkt, kein Paket: Nach dem Klonen gehört der Code dem Projekt. Die Versionen stehen zentral im pnpm-Catalog, und eine Renovate-Konfiguration liegt bei.

Ist das Template für Coding-Agenten vorbereitet?

Ja. CLAUDE.md enthält die Projektregeln, .claude/mcp.json eine MCP-Konfiguration und der Ordner .ai/ Prompts und Wissensdateien. Astro 7 bringt außerdem astro dev --background für Agenten und CI.

Unter welcher Lizenz steht das Template?

MIT. Es darf kommerziell genutzt, verändert und weitergegeben werden.

10 — Aus dem Ökosystem

Passt dazu.

astro-post-audit

Build-Zeit-Audit für Astro: SEO, Links und Accessibility

astro-structured-data

Typisierte Schema.org-Komponenten für Astro

astro-site-files

Alle Site-Dateien für Astro aus einer Konfiguration

Starten mit fertiger Werkzeugkette.

Astro 7, Tailwind v4, Svelte 5, Tests und Audits – MIT-lizenziert, bereit für Cloudflare Workers.

Template auf GitHubStarter-Demo ansehen