用 AI 搭建个人品牌网站：技术选型到上线全记录

为什么要自己建站

有人问我：2026 年了，为什么不用 Notion、语雀或者现成的博客平台？

三个原因：

第一，个人网站是你的数字名片。 当别人搜你的名字，第一个出现的结果决定了他们对你的第一印象。掘金主页、知乎专栏都是别人的平台，只有 huangyibin.com 是真正属于我的。

第二，建站本身就是学习。 我正在从 QA/PMO 总监转型 AI 产品架构师，需要提升前端工程能力。与其刷教程，不如做一个真实项目。

第三，我想验证 AI 辅助开发的效率。 一个人 + Claude Code，能多快搭出一个生产级的网站？这个过程本身就是一篇文章的素材。

技术选型：每个选择都有理由

Next.js 15 — 不是因为流行，是因为适合

我需要一个框架满足这些条件：

• 支持 MDX（用 Markdown 写文章，偶尔嵌入 React 组件）

• 有好的 SEO 支持（个人品牌网站的 SEO 非常重要）

• Server Components 减少客户端 JS 体积

• 部署简单（Vercel 一键部署）

Next.js 15 的 App Router 完美满足这些需求。特别是 Server Components——博客页面不需要客户端交互，用 Server Components 可以把 JS 体积降到最低。

我也考虑过 Astro，它在纯静态站点场景确实更轻量。但考虑到后续可能加互动功能（评论、点赞、数据看板），Next.js 的扩展性更好。

Tailwind CSS v4 — 原子化 CSS 的正确打开方式

Tailwind v4 相比 v3 有几个重要变化：

• 配置文件从 tailwind.config.js 变成了 CSS 中的 @theme 指令

• 性能提升明显，构建速度快了很多

• 新的颜色系统更灵活

选 Tailwind 而非 CSS Modules 或 styled-components，是因为我发现在 AI 辅助开发中，Tailwind 的效率最高——AI 生成的 Tailwind 代码几乎不需要修改，因为类名本身就是"声明式的样式说明"。

MDX — 文章和代码的最佳结合

// 这就是内容加载的核心逻辑，简洁到只有几十行
export function getPostBySlug(slug: string): Post | null {
  const filePath = path.join(contentDir, `${slug}.mdx`);
  if (!fs.existsSync(filePath)) return null;

  const raw = fs.readFileSync(filePath, "utf-8");
  const { data, content } = matter(raw);
  return {
    ...data as PostFrontmatter,
    slug,
    content,
    readingTime: readingTime(content).text,
  };
}

用 gray-matter 解析 frontmatter，用 reading-time 计算阅读时间，用 next-mdx-remote 渲染 MDX。整个内容系统不到 50 行代码。

Drizzle ORM + Neon — 为未来留空间

现在博客内容是纯文件系统的，不需要数据库。但我选择了 Drizzle + Neon 的组合，是为了后续加浏览量统计、评论系统等功能。

Drizzle 的优势在于 TypeScript 原生——schema 就是类型定义，查询自带类型推导。在 AI 辅助开发中，这种端到端的类型安全让 Claude 生成的代码几乎不需要类型调整。

Claude Code 辅助开发的真实工作流

这是我觉得最值得分享的部分。不是"AI 有多厉害"的宣传，而是真实的工作流记录。

阶段一：项目初始化（约 30 分钟）

我给 Claude Code 的第一个指令是：

帮我用 Next.js 15 App Router + Tailwind CSS v4 + TypeScript 创建一个个人博客项目。需要支持 MDX 文章、暗色主题、响应式设计。

Claude Code 生成了项目骨架，包括目录结构、基础配置、package.json 等。这一步几乎不需要人工干预——项目初始化是 AI 最擅长的标准化工作。

阶段二：核心功能开发（约 3 小时）

这个阶段包括：

• 文章列表页和详情页

• MDX 渲染管道

• 标签系统

• 响应式导航

我的工作模式是：先写需求文档，再让 AI 生成代码。

比如，对于文章列表页，我会先在 .42cog 体系中写清楚：

需求：文章列表页
- 按时间倒序排列
- 显示标题、日期、描述、标签、阅读时间
- 支持按标签筛选
- 响应式：桌面三列，平板两列，手机单列
约束：
- 不使用客户端 JS（纯 Server Component）
- 加载时间 < 1s

有了这样的上下文，Claude 生成的代码质量会显著提高。我把这个模式叫做"上下文即代码"——好的上下文文档，就是最好的"提示词"。

阶段三：样式打磨（约 2 小时）

这是我手动介入最多的阶段。AI 生成的布局和功能没问题，但视觉品味需要人来把控。

具体来说：

• 字体选择：中文用系统字体，英文和代码用 JetBrains Mono

• 间距调整：AI 倾向于用均匀间距，但好的排版需要有节奏感

• 颜色微调：暗色主题的背景色、文字色、强调色的搭配

• 动画细节：hover 效果、页面过渡

这些"最后 20%"的打磨，占了总时间的 40%。但正是这些细节决定了网站看起来是"专业的"还是"像模板的"。

阶段四：部署和优化（约 1 小时）

Vercel 部署几乎是零配置的。连上 GitHub 仓库，自动构建部署。

优化方面主要做了：

• 图片优化：使用 Next.js 的 Image 组件

• 字体优化：使用 next/font 避免 FOIT

• MDX 编译缓存：避免每次构建都重新编译所有文章

关键决策和踩坑记录

决策一：文件系统 vs CMS

我选择了文件系统而非 headless CMS（如 Contentful、Sanity）。原因：

• 文章就在代码仓库里，version control 天然具备

• 不依赖外部服务，不会因为第三方宕机而无法发布

• 本地开发体验更好——改完文章直接 hot reload

• MDX 文件就是 Git 仓库中的文件，协作和备份都很方便

决策二：Tailwind v4 vs v3

Tailwind v4 在写这篇文章时还比较新，文档和社区资源没有 v3 丰富。但我还是选了 v4，因为：

• v4 的新配置方式更符合直觉

• AI（Claude）对 v4 的支持已经足够好

• 从 v3 迁移到 v4 的成本不低，不如直接用新版

踩坑：v4 的一些 utility class 名称变了，Claude 偶尔会生成 v3 的语法。解决方法是在上下文文档中明确标注"使用 Tailwind CSS v4 语法"。

决策三：自建组件 vs 组件库

我没有用 shadcn/ui 或其他组件库，而是自建了所有组件。原因：

• 博客的组件很简单（按钮、卡片、导航），不需要重量级组件库

• 自建组件让我对每个细节有完全控制

• 这也是一个学习前端工程的机会

踩坑：MDX 渲染的 hydration 问题

在使用 next-mdx-remote 时，遇到了服务端和客户端渲染不一致导致的 hydration 错误。具体表现是：文章中的代码块在首次加载时会闪烁。

原因是语法高亮组件在服务端和客户端生成了不同的 HTML 结构。

解决方案：确保语法高亮在服务端完成，客户端只做 hydrate 而不重新渲染。

效率数据

整个网站从零到上线，总共花了大约 7 小时。如果没有 Claude Code，我估计需要 3-4 天。

这个效率提升不是因为 AI 写了所有代码。更准确的描述是：

几个观察：

1. AI 在标准化工作中提效最大（项目初始化 4x），在创意工作中提效最小（样式打磨 1.5x）

2. 效率提升不是线性的。 如果你不给 AI 好的上下文，效率可能反而下降——你会花更多时间修改 AI 生成的代码

3. 真正的瓶颈是决策，不是编码。 选 v4 还是 v3？用组件库还是自建？这些决策花的时间比写代码多

给想建站的朋友的建议

如果你只是想快速上线： 用现成的博客平台（掘金、知乎、Notion），不需要自建站。

如果你想顺便学技术： 自建站是一个极好的学习项目。推荐 Next.js + Tailwind + MDX 的组合，生态成熟，AI 辅助开发效率高。

如果你想打造个人品牌： 自建站 + 多平台分发是最佳策略。文章首发在自己网站（SEO），同步到掘金/知乎（流量），精选发微信公众号（私域）。

不管选哪种方式，最重要的不是技术栈，而是持续写作。一个用 WordPress 搭的、每周更新的博客，比一个用 Next.js 15 搭的、半年没更新的博客有价值得多。

技术只是工具，内容才是核心。