{
  "id": "build-an-astro-static-seo-site",
  "type": "prompts",
  "category": "prompts",
  "locale": "zh",
  "url": "/zh/prompts/build-an-astro-static-seo-site",
  "title": "构建 Astro 静态 SEO 站点的提示",
  "description": "用于搭建一个完全优化的 Astro 静态站点的复制粘贴提示，包含内容集合、站点地图、og-images 和 TypeScript。",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Astro",
    "TypeScript",
    "Tailwind"
  ],
  "tags": [
    "astro",
    "seo",
    "typescript",
    "tailwind"
  ],
  "difficulty": "medium",
  "updated": "2026-06-08",
  "markdown": "将此内容提供给您的代理，以搭建一个生产就绪的 Astro 静态站点，包含内容集合、Tailwind v4、SEO 元标签、站点地图和每页的 OG 图像——无需担心它发明不兼容的集成或跳过规范标签。\n\n## 主要提示\n\n```txt title=\"Main Prompt\"\nYou are scaffolding a new Astro static site. Use Astro 5, TypeScript strict mode,\nand Tailwind CSS v4 (via @tailwindcss/vite — NOT the legacy @astrojs/tailwind integration).\n\nRequirements:\n- Initialize with `bun create astro@latest` defaults, then layer in:\n  - A `src/content/blog/` collection with a Zod schema (title, description, pubDate, tags).\n  - A shared `<BaseLayout>` with `<head>` containing: canonical URL, og:title, og:description,\n    og:image (per-page), twitter:card, and the Astro `<ViewTransitions />` component.\n  - `@astrojs/sitemap` integration configured with `customPages` for any dynamic routes.\n  - A `public/robots.txt` that disallows `/api/` and allows everything else.\n  - A `/blog/[slug].astro` dynamic route that renders MDX blog posts.\n  - A `/tags/[tag].astro` route that filters posts by tag.\n  - Tailwind applied globally via `src/styles/global.css` imported in BaseLayout.\n- All components must be `.astro` — no React unless explicitly asked.\n- Export a typed `getStaticPaths` for every dynamic route.\n- Do NOT install `@astrojs/react`, `next`, or any SSR adapter — this is a static build.\n\nStop after listing all files you plan to create or modify. Wait for my approval before writing any code.\n```\n\n## 实现说明\n\n- Astro 5 的内容集合使用 `src/content.config.ts` 中的 `defineCollection`，而不是旧的 `src/content/config.ts` 路径——确认代理使用了正确的位置。\n- Tailwind v4 作为 Vite 插件提供；旧的 `astro.config.ts` 中的 `integrations: [tailwind()]` 模式已过时，并会导致运行时错误。\n- `getStaticPaths` 必须返回 `{ params, props }` 对象；代理有时会返回纯字符串。\n\n## 预期文件更改\n\n```txt\nastro.config.ts                          (new)\nsrc/content.config.ts                    (new)\nsrc/layouts/BaseLayout.astro             (new)\nsrc/pages/index.astro                    (new)\nsrc/pages/blog/[slug].astro              (new)\nsrc/pages/tags/[tag].astro              (new)\nsrc/styles/global.css                    (new)\npublic/robots.txt                        (new)\npackage.json                             (edited)\ntsconfig.json                            (edited)\n```\n\n## 验收标准\n\n- `bun run build` 退出代码为 0，且没有类型错误。\n- 每个博客文章页面在渲染的 HTML 中包含唯一的规范 URL 和 `og:image`。\n- 生成 `/sitemap-index.xml` 并包含所有博客文章 URL。\n- 存在 `/robots.txt` 并禁止 `/api/`。\n\n## 测试命令\n\n```bash\nbun run build\nbun run preview\ncurl -s http://localhost:4321/sitemap-index.xml | grep '<loc>'\ncurl -s http://localhost:4321/robots.txt\nbun run typecheck\n```\n\n## 常见的 AI 错误\n\n- 安装已弃用的 `@astrojs/tailwind` 而不是 `@tailwindcss/vite`。\n- 将 `content.config.ts` 放在 `src/content/config.ts`（旧的 Astro 4 路径）。\n- 忘记在 `getStaticPaths` 中调用 `getCollection('blog')`——返回空数组。\n- 在 `astro.config.ts` 中添加 `output: 'server'`，这会破坏静态导出。\n\n## 修复提示\n\n```txt title=\"Fix Prompt\"\nThe build failed. Check for these issues in order:\n1. Tailwind: remove `@astrojs/tailwind` from integrations and add `@tailwindcss/vite` to the\n   `vite.plugins` array in astro.config.ts.\n2. Content config: the file must be at `src/content.config.ts` (not `src/content/config.ts`).\n3. `getStaticPaths`: each entry must be `{ params: { slug }, props: { post } }`.\nFix only the broken items. Show me the corrected diff.\n```"
}