Astro 静态博客迁移第一阶段说明

第一阶段的目标不是做内容系统,而是先把现有首页稳定迁进 Astro,保证视觉、交互和响应式表现都不丢。这样后面再加文章详情、归档和 Markdown 路由时,整个项目会轻松很多。

范围先收紧

这一阶段只做 Astro 迁移,不碰下面这些内容:

  • 不做后台
  • 不接 Markdown 内容系统
  • 不加标签页和归档逻辑
  • 不重做首页视觉
  • 不引入额外前端框架

范围收紧以后,项目推进会更稳定,验证成本也更低。

迁移时坚持的几个原则

首页原有的 DOM 结构、类名、样式数值和交互节奏都尽量保持不变,迁移重点放在文件组织和构建链路上。

  • src/pages/index.astro 承接首页结构
  • src/layouts/BaseLayout.astro 放公共的 HTML shell 和字体配置
  • src/styles/style.css 保留原始样式和动画定义
  • src/scripts/home.js 继续承接首页交互逻辑

这样做的好处是后续要改视觉时,大家能明确知道哪些是内容层,哪些是表现层。

构建模式为什么选静态输出

这次项目固定使用 Astro 的 static output,原因很简单:

  • 部署到 Cloudflare Pages 和 Vercel 都更直接
  • 项目结构更适合博客和展示型页面
  • 前端页面不需要额外的运行时服务
  • 后面接 Markdown 内容源也足够自然

第一阶段结束后的状态

当迁移完成后,项目至少应该满足下面这几件事:

  • npm run dev 可以本地启动
  • npm run build 可以稳定输出 dist
  • 桌面端和移动端效果与迁移前一致
  • 风筝动画、树和人物的交互仍然正常

也正因为第一阶段把地基铺稳了,这一轮才可以继续往上做真实文章、归档页和文章详情页。