用 Astro 做技术内容站：结构、内容模型与性能要点

技术内容站用 Astro 的核心收益是：静态优先、内容集合类型安全、页面按需加交互。先设计栏目与 frontmatter，再写组件；样式可用 Tailwind 加速多栏目落地。

为什么内容站适合 Astro

• 大多数页面是静态文章，不必默认上重型运行时
• MD/MDX 一等公民
• 岛屿架构：只有搜索框等少量交互才加载 JS
• 构建产物清晰，部署简单

推荐目录

src/
  content/           # 文章与资源
  content.config.ts  # 集合与 schema
  data/              # 导航、栏目元数据
  components/
  layouts/
  pages/
  styles/
public/              # robots、favicon、og

内容模型先于美化

为每篇文章固定字段，例如：

• title description slug
• pillar tags difficulty stack
• publishedAt updatedAt
• answer（一句话结论，利于摘要/GEO）
• ctaLabel ctaHref

评测再加：pros cons pricing bestFor。

Schema 用 Zod 约束后，错误在构建期暴露，比上线后才发现缺字段更好。

页面类型

样式策略

• Tailwind：栏目页、卡片、响应式快
• Typography (prose)：正文排版
• 少量全局 CSS：品牌 token、装饰、特殊模块

不要把整站做成无法复用的长 class 复制；重复三次就提组件。

SEO / GEO 清单

• site 配置正确
• canonical / OG
• sitemap + rss
• 每页独立 title/description
• 正文静态可抓取
• 搜索页 noindex
• 可选 llms.txt

性能要点

• 图片尽量少且有尺寸
• 字体策略克制
• 交互组件按需 client:
• 构建后检查页面重量

与姊妹站协作

若你同时运营经营站与技术站：

• 栏目分工写进 About
• 互链放在 Footer 与相关 CTA
• 视觉 token 区分，工程习惯可统一

下一步

• 部署到 VPS
• 域名 DNS
• 本站搭建日志