用 Bun + React 搭建个人网站

为什么选这个技术栈

选工具的标准很简单：尽量少的东西，尽量快的反馈。

• Bun 同时扮演了运行时和打包器的角色，一条命令跑起来，零配置。
• React 19 + shadcn/ui 让我不用从零写按钮和卡片，把精力留给内容本身。
• Tailwind CSS v4 用 CSS 变量定义主题，暗色模式几乎是免费的。

内容流水线的设计

网站是纯静态部署（GitHub Pages），所有文章是 MDX 文件：

src/content/<category>/<slug>.<lang>.mdx

构建脚本 scripts/build-content.ts 逐篇处理：

1. 用 gray-matter 解析 frontmatter（标题、日期、标签、摘要）。
2. 用 @mdx-js/mdx 的 evaluateSync 把 Markdown + JSX 编译成 React 元素。
3. 用 react-dom/server 的 renderToStaticMarkup 输出静态 HTML 字符串。
4. 用 rehype-slug 给标题生成锚点 id，再收集成目录（TOC）。
5. 用 rehype-highlight 做代码语法高亮。
6. 最后把所有文章写进 src/generated/content.ts，前端直接 import。

这样内容既能被 React 渲染，又被预编译成纯 HTML，SEO 和加载速度都有保障。

代码高亮

function computeReadingTime(text: string): number {
  const words = text.replace(/\s+/g, " ").trim().split(" ").length;
  return Math.max(1, Math.round(words / 200));
}

踩过的几个坑

• @types/gray-matter 在 npm 上不存在，gray-matter 自带类型。
• npx 跑 shadcn CLI 会因缺 @ts-morph/common 崩溃，改用本地 bun x shadcn 就好了。
• shadcn 的 Tooltip 组件需要在外层包一个 TooltipProvider。

小结

这套方案的好处是：内容用 Markdown 写，界面用 React 画，构建一次搞定，部署全是静态文件。 改一篇文章，跑一次 bun run build:content，再部署，完事。