搭建个人博客的技术选型思考

为什么不是 Next.js

Next.js 是优秀的全栈框架，但对于一个内容为主的个人博客来说太重了：

• 博客不需要 SSR、API 路由、Server Actions
• Next.js 的运行时和 hydration 开销对静态内容是浪费
• 部署静态站点时 Next.js 的产物体积远大于纯 HTML

Astro 默认零 JavaScript 输出，只在需要交互的地方按需水合，更契合博客场景。

为什么是 Tailwind v4

Tailwind v4 的最大变化是 @theme 指令：主题色板直接在 CSS 中声明， 不再需要 tailwind.config.js。

@theme {
  --color-mint-400: #4ade80;
}

声明后自动生成 bg-mint-400、text-mint-400 等工具类，而且未使用的色阶会被 Tree-shaking 剔除，产物体积几乎不受影响。

动画方案：GSAP + Lenis

GSAP 的 ScrollTrigger 配合 Lenis 平滑滚动，可以实现丝滑的滚动揭示动画。 关键是让两者共用同一个 rAF 循环，避免双循环叠加产生加速感。

樱花飘落特效用 Canvas 实现，pointer-events: none 保证不干扰交互， 花瓣数量按屏宽自适应，低端设备也能流畅运行。

搜索方案：Pagefind

之前考虑过 Algolia 和 Lunr，最终选了 Pagefind：

• Algolia 需要注册账号、配置爬虫，对个人博客来说太重
• Lunr 需要在构建时生成一份完整的 JSON 索引，首屏就要加载全部数据
• Pagefind 把索引切成小分片，按需加载，首屏几乎零开销

总结

技术选型的核心原则：够用就好。博客的核心是内容，技术应该服务于阅读体验， 而不是炫技。选择 Astro + Tailwind v4 + GSAP + Pagefind 这套组合， 是因为它们各自解决了具体问题，又不会互相干扰。