用 Claude Code 搭建个人网站的完整记录

为什么要搭建个人网站

在这个 AI 时代，拥有一个个人网站不仅是展示作品的窗口，更是一种 数字身份 的体现。

我一直想要一个属于自己的空间，可以记录学习过程、分享探索心得、展示做过的项目。市面上有很多博客平台，但它们都不够「自己」——我想要的是一个完全可控的、有自己审美的地方。

设计灵感

这个网站的设计灵感来自 Kami 设计系统，核心理念是：

• 暖色调：用羊皮纸色 #F5F4ED 替代冷白，让阅读更舒适
• 水墨蓝：#1B365D 作为唯一的彩色点缀，克制而有品位
• 衬线字体：使用思源宋体，传递传统与现代的融合感
• 大量留白：内容区最大宽度 680px，给文字呼吸的空间

技术选型

const techStack = {
  framework: "Next.js 15",
  styling: "Tailwind CSS 4",
  language: "TypeScript",
  blog: "MDX",
  animation: "Framer Motion",
  deployment: "Vercel",
};

选择 Next.js 是因为它的 静态生成 能力 —— 博客文章在构建时就已经生成好了 HTML，访问速度极快。

搭建过程

整个过程大约花了一个下午，大部分时间都在和 Claude Code 一起工作：

1. 初始化项目，配置 Tailwind
2. 设计色彩系统和字体方案
3. 搭建页面布局（首页、博客、项目、关于）
4. 添加 MDX 博客支持
5. 加入 Framer Motion 动效
6. 部署到 Vercel，绑定域名

总结

用 AI 辅助开发的体验非常好。它不是替代你思考，而是帮你把想法更快地变成现实。最重要的还是你自己对「好」的判断 —— 知道自己想要什么，AI 才能帮你做出来。