Astro 与 React Bits 的静态博客实践

这篇文章记录本站的搭建过程。目标很简单：静态、快速、有一些恰到好处的动画。

为什么是 Astro

Astro 默认输出零 JavaScript 的静态页面，只有标记为 island 的组件才会在客户端激活。对于博客这种内容为主的站点，这是非常合适的默认值。

React Bits 组件

React Bits 提供了一批高质量动画组件。本站使用了 OptionWheel、ScrollExpand、AnimatedList 和 LineSidebar。它们通过 shadcn 风格的 registry 直接复制源码进入项目，按需引入依赖。

npx shadcn@latest add https://reactbits.dev/r/OptionWheel-TS-TW.json

常驻布局与动画

左右两侧的常驻面板使用固定定位，主页滚动时从各自方向滑入；文章页则把左侧导航切换为目录。动画全部使用 CSS 与少量 React 状态完成，避免引入额外的动画库。

内容组织

文章数据放在 src/lib/posts.ts，包含标题、日期、分类、标签、字数、封面和正文 HTML。后续可以平滑迁移到 Astro Content Collections 或 Markdown。