搭建个人网站的技术选型

为什么重建

旧版网站用 Next.js 搭建,存在几个问题:

  1. 太重了 — 一个个人主页不需要完整的 React 运行环境
  2. 构建慢 — 每次部署 CI 要跑好几分钟
  3. 过度工程 — SSR 对于一个静态博客来说完全多余

为什么选 Astro

零 JS 输出是最大亮点。首页、关于页、联系页都是纯静态 HTML,没有一行 JavaScript。博客部分只在需要交互的地方按需加载。

技术栈最终确定:

  • Astro 5 — 静态站点生成
  • MDX — 博客内容管理
  • OKLCH 色彩 — 感知均匀的色彩空间
  • View Transitions API — 原生页面过渡动画

部署方案

静态文件直接部署到 Nginx,加上 Cloudflare CDN。构建时间从 3 分钟降到了 15 秒。

整个站点的 JS bundle 不到 5KB(gzip 后),PageSpeed Insights 四页全绿。


后续计划加入更多互动元素——比如一个会跟着鼠标转眼睛的图图 🐶