P PasteCode
Prompt

Invite pour construire un site SEO statique avec Astro

Invite à copier-coller pour échafauder un site statique Astro entièrement optimisé avec des collections de contenu, un sitemap, des images OG et TypeScript.

CursorClaude CodeCodexWindsurf AstroTypeScriptTailwind
.md .json Difficulté: Moyen Mis à jour 8 juin 2026

Donnez ceci à votre agent pour échafauder un site statique Astro prêt pour la production avec des collections de contenu, Tailwind v4, des méta SEO, un sitemap et des images OG par page — sans qu’il invente des intégrations incompatibles ou oublie les balises canoniques.

Invite principale

Main Prompt
You are scaffolding a new Astro static site. Use Astro 5, TypeScript strict mode,
and Tailwind CSS v4 (via @tailwindcss/vite — NOT the legacy @astrojs/tailwind integration).
Requirements:
- Initialize with `bun create astro@latest` defaults, then layer in:
- A `src/content/blog/` collection with a Zod schema (title, description, pubDate, tags).
- A shared `<BaseLayout>` with `<head>` containing: canonical URL, og:title, og:description,
og:image (per-page), twitter:card, and the Astro `<ViewTransitions />` component.
- `@astrojs/sitemap` integration configured with `customPages` for any dynamic routes.
- A `public/robots.txt` that disallows `/api/` and allows everything else.
- A `/blog/[slug].astro` dynamic route that renders MDX blog posts.
- A `/tags/[tag].astro` route that filters posts by tag.
- Tailwind applied globally via `src/styles/global.css` imported in BaseLayout.
- All components must be `.astro` — no React unless explicitly asked.
- Export a typed `getStaticPaths` for every dynamic route.
- Do NOT install `@astrojs/react`, `next`, or any SSR adapter — this is a static build.
Stop after listing all files you plan to create or modify. Wait for my approval before writing any code.

Notes d’implémentation

  • Les collections de contenu d’Astro 5 utilisent defineCollection dans src/content.config.ts, et non l’ancien chemin src/content/config.ts — confirmez que l’agent utilise le bon emplacement.
  • Tailwind v4 est livré comme un plugin Vite ; l’ancien motif integrations: [tailwind()] dans astro.config.ts est obsolète et provoquera une erreur d’exécution.
  • getStaticPaths doit retourner des objets { params, props } ; l’agent retourne parfois des chaînes nues.

Modifications de fichiers attendues

astro.config.ts (new)
src/content.config.ts (new)
src/layouts/BaseLayout.astro (new)
src/pages/index.astro (new)
src/pages/blog/[slug].astro (new)
src/pages/tags/[tag].astro (new)
src/styles/global.css (new)
public/robots.txt (new)
package.json (edited)
tsconfig.json (edited)

Critères d’acceptation

  • bun run build se termine avec le code 0 sans erreur de type.
  • Chaque page d’article de blog inclut une URL canonique unique et og:image dans le HTML rendu.
  • /sitemap-index.xml est généré et contient toutes les URLs des articles de blog.
  • /robots.txt existe et interdit /api/.

Commandes de test

Terminal window
bun run build
bun run preview
curl -s http://localhost:4321/sitemap-index.xml | grep '<loc>'
curl -s http://localhost:4321/robots.txt
bun run typecheck

Erreurs courantes de l’IA

  • Installer l’extension obsolète @astrojs/tailwind au lieu de @tailwindcss/vite.
  • Placer content.config.ts dans src/content/config.ts (ancien chemin d’Astro 4).
  • Oublier d’appeler getCollection('blog') dans getStaticPaths — retourner un tableau vide.
  • Ajouter output: 'server' dans astro.config.ts, ce qui casse l’export statique.

Invite de correction

Fix Prompt
The build failed. Check for these issues in order:
1. Tailwind: remove `@astrojs/tailwind` from integrations and add `@tailwindcss/vite` to the
`vite.plugins` array in astro.config.ts.
2. Content config: the file must be at `src/content.config.ts` (not `src/content/config.ts`).
3. `getStaticPaths`: each entry must be `{ params: { slug }, props: { post } }`.
Fix only the broken items. Show me the corrected diff.