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- 桌面端和移动端效果与迁移前一致
- 风筝动画、树和人物的交互仍然正常
也正因为第一阶段把地基铺稳了,这一轮才可以继续往上做真实文章、归档页和文章详情页。