使用 Claude Code + Next.js + Velite + Vercel 搭建个人网站

1. 使用 Claude Code 设计网站

提取设计系统

使用 Claude Code 的 extract-design-system Skill，参考你喜欢的网站，把喜欢的大致需求说出来，让 Claude Code 帮你规划实现。

例如：

• "我要ak这种风格的导航栏"
• "需要页面切换动画"
• "作品卡片要有 hover 效果"

Claude Code 会根据你的描述，结合 Skill 提取的设计系统，帮你创建合适的页面结构和组件。

从 React Bits 挑选效果

网站基础功能实现后，去 https://reactbits.dev/ 挑选喜欢的动效：

• 选择一个 Dither 背景动画
• 添加脉冲发光按钮效果
• 实现滚动 reveal 动画

只需要告诉 Claude Code 你想要的效果，它会帮你实现并调优。

---

2. 接入 Velite 内容管理

找到官方文档

参考 https://zread.ai/zce/velite/2-quick-start 这样的文档，了解 Velite 的接入方式。

Claude Code 接入流程

把文档发给 Claude Code，让它理解并且它自己计划和接入，大致包括：

1. 安装 Velite：npm install velite -D
2. 创建配置文件 velite.config.ts
3. 修改数据层：从 gray-matter 迁移到 Velite
4. 测试构建：确保本地正常

迁移要点

Velite 会扫描 content/posts/ 和 content/projects/ 目录，将 Markdown 文件转换为类型安全的数据：

// velite.config.ts
export default defineConfig({
  collections: {
    posts: {
      name: 'Post',
      pattern: 'posts/**/*.md',
      schema: s.object({
        title: s.string(),
        slug: s.slug('posts'),
        date: s.isodate(),
        excerpt: s.excerpt(),
        content: s.markdown()
      })
    }
  }
})

创作流程

# 启动开发服务器（Velite 自动监听内容变化）
npm run dev:all

# 添加新文章
# 1. 在 content/posts/ 新建 .md 文件
# 2. 浏览器自动刷新看到效果
# 3. 确认无误后 git push

---

3. 部署 Vercel

连接 GitHub

1. 在 Vercel 创建账号（可用 GitHub 登录）
2. 点击 "New Project" → "Import Git Repository"
3. 选择你的仓库，点击 Deploy

关键配置

因为 .velite/ 在 .gitignore 中，构建时需要自动生成：

// package.json
{
  "scripts": {
    "build": "velite build && next build"
  }
}

Vercel 会自动：

1. 克隆代码
2. 安装依赖
3. 运行 velite build 生成内容
4. 运行 next build 构建网站
5. 部署上线

后续更新

git add .
git commit -m "Update content"
git push

Push 后 Vercel 会自动重新构建部署。

---

4. 总结

这套方案让人机协作变得自然：

1. 设计阶段：描述需求 → Claude Code 实现
2. 完善阶段：挑选效果 → Claude Code 添加
3. 内容管理：Velite 自动处理 Markdown
4. 部署：Push 到 GitHub → Vercel 自动部署

完整流程记录在项目的 README.md