从零搭建 AI 协作开发环境：Claude Code + GitHub + Vercel

前言

2025 年，AI 编程工具迎来了一次爆发。从 GitHub Copilot 到 Cursor，再到 Anthropic 推出的 Claude Code，开发者第一次可以真正意义上”让 AI 帮你写代码、跑命令、管项目”。

但这套工具链搭起来并不容易——尤其是对于零基础的新手来说，Claude Code 是什么、GitHub 怎么用、Vercel 怎么连，每一个概念都是新的。

这篇文章的目标很简单：带你从零开始，把 Claude Code + GitHub + Vercel 这套 AI 协作开发环境跑通。搭好之后，你只需要用自然语言告诉 Claude Code 你想做什么，它就能帮你写代码、提交到 GitHub、自动部署到 Vercel。

先搞清楚四个概念

在动手之前，先用最直白的话解释一下这四个工具各自是干什么的。

工具	一句话解释	生活类比
Git	代码的版本管理工具，每次修改都有记录	游戏的存档系统
GitHub	云端的代码仓库，存代码的地方	云盘，但专门存代码
Vercel	自动部署平台，代码推上去就能变成网站	自动售货机，投币（推代码）就出货（网站）
Claude Code	AI 编程助手，用命令行跟你协作写代码	一个坐在你旁边的程序员队友

它们之间的关系是这样的：

你用自然语言描述需求
       ↓
Claude Code 帮你写代码、改文件
       ↓
git push 推送到 GitHub
       ↓
Vercel 检测到更新，自动构建部署
       ↓
你的网站上线了

整个过程你只需要做两件事：描述需求 和 确认结果。中间的脏活累活全是 Claude Code 和自动化流程帮你干。

环境搭建

第一步：注册 GitHub 并创建仓库

去 github.com 注册一个账号（免费），然后创建一个新仓库。

比如我们要做一个博客项目，就叫 my-blog：

# 在 GitHub 网页上点 "New Repository"
# 仓库名：my-blog
# 勾选 "Add a README file"
# 点 "Create repository"

⚠️ 仓库名建议用英文小写 + 短横线，比如 my-blog、portfolio-site，不要用中文或空格。

第二步：安装 Git 并配置身份

Windows 用户：去 git-scm.com 下载安装，一路默认即可。

macOS 用户：打开终端输入：

xcode-select --install

安装完成后，配置你的身份信息：

git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

这里的邮箱建议和 GitHub 注册邮箱保持一致，后面推送代码时会用到。

验证安装是否成功：

git --version
# 输出类似：git version 2.43.0

第三步：把 GitHub 仓库克隆到本地

# 克隆仓库到你电脑上
git clone https://github.com/你的用户名/my-blog.git
cd my-blog

现在你的电脑上就有了一个和 GitHub 同步的文件夹，后面所有的代码改动都会在这里进行。

第四步：安装 Node.js

Claude Code 和 Vercel 都依赖 Node.js 环境。去 nodejs.org 下载 LTS 版本安装。

node --version
# 输出类似：v20.11.0

npm --version
# 输出类似：10.2.0

第五步：安装 Claude Code

Claude Code 是 Anthropic 推出的命令行 AI 编程工具，通过 npm 安装：

npm install -g @anthropic-ai/claude-code

安装完成后，首次运行需要登录认证：

claude
# 首次启动会引导你登录 Anthropic 账号
# 按提示在浏览器中完成授权即可

⚠️ Claude Code 需要 Anthropic API 账号或订阅（Claude Pro/Max）。如果还没有，先去 console.anthropic.com 注册。

国内用户：使用 cc-switch 接入国产大模型

由于网络环境限制，国内用户直接访问 Anthropic API 可能会遇到连接超时或认证失败的问题。社区开发了一个实用工具 cc-switch，可以帮你快速切换 Claude Code 的配置，接入国内的大模型服务（如通义千问、DeepSeek、Moonshot 等），无需科学上网即可使用。

安装 cc-switch：

npm install -g cc-switch

基本用法：

# 查看当前配置
cc-switch list

# 切换到国内模型（以 DeepSeek 为例）
cc-switch use deepseek

# 手动配置自定义 API 端点
cc-switch config --api-url https://api.deepseek.com/v1 --api-key sk-你的密钥

cc-switch 本质上是一个配置管理工具，它帮你修改 Claude Code 的环境变量（ANTHROPIC_BASE_URL、ANTHROPIC_API_KEY 等），让请求指向你指定的 API 地址。这样即使无法直连 Anthropic，也能用国产大模型获得类似的 Agent 体验。

模型	API 地址	特点
DeepSeek	https://api.deepseek.com/v1	性价比高，代码能力强
通义千问	https://dashscope.aliyuncs.com/compatible-mode/v1	阿里出品，中文理解好
Moonshot (Kimi)	https://api.moonshot.cn/v1	长上下文支持好

⚠️ 使用国产大模型时，Claude Code 的部分高级特性（如某些工具调用格式）可能不完全兼容。建议先用 DeepSeek 或通义千问测试基础功能，确认稳定后再用于正式项目。

第六步：连接 Vercel

去 vercel.com 注册账号，建议直接用 GitHub 账号登录，省去绑定步骤。

然后在项目根目录安装 Vercel CLI：

npm install -g vercel

登录 Vercel：

vercel login
# 选择通过 GitHub 登录，浏览器会弹出授权页面

第一次协作实战

环境搭好了，现在来走一遍完整流程。我们用 Claude Code 创建一个简单的网页项目，然后推送到 GitHub，让 Vercel 自动部署。

1. 让 Claude Code 帮你写代码

在项目目录下启动 Claude Code：

cd my-blog
claude

进入对话界面后，直接用自然语言描述你的需求：

你：帮我创建一个简单的个人主页，包含一个标题、一段自我介绍、
    和一个项目展示区域。用 HTML + CSS，风格简洁现代。

Claude Code 会帮你生成文件、写入代码。你可以继续对话调整：

你：标题改成深蓝色，卡片加个圆角和阴影效果。

你：再加一个底部 footer，显示 "© 2026 My Blog"。

这就是 Claude Code 的核心用法——你描述需求，它写代码。不需要你手动编辑任何文件。

2. 推送到 GitHub

代码写好后，让 Claude Code 帮你提交：

你：把所有改动提交到 Git，提交信息写 "feat: 初始化个人主页"。

Claude Code 会执行：

git add .
git commit -m "feat: 初始化个人主页"

然后推送到 GitHub：

你：推送到 GitHub。

git push origin main

3. Vercel 自动部署

去 Vercel 控制台，点 **”Add New” → “Project”**，导入你刚才创建的 my-blog 仓库。

Vercel 会自动识别项目类型，大部分情况下默认配置就能用。对于纯 HTML 项目，几乎不需要额外配置，直接点 Deploy。

几秒后，Vercel 会给你一个在线访问地址：

✅ Congratulations! Your project has been deployed.
https://my-blog.vercel.app

从此以后，每次你让 Claude Code 改完代码并 git push，Vercel 就会自动重新部署。你甚至不需要打开 Vercel 的网页。

项目指令文件：让 Claude Code 更懂你的项目

Claude Code 有一个很强大的特性——项目指令文件。在项目根目录创建一个 CLAUDE.md，写入项目的背景信息和规范，Claude Code 每次启动时都会读取它。

# CLAUDE.md

## 项目信息
这是一个基于 Hexo 的个人博客项目，部署在 Vercel 上。

## 代码规范
- 文章使用 Markdown 格式，存放在 source/_posts/ 目录
- 每篇文章必须包含 YAML frontmatter（title、date、categories、tags）
- 代码块必须标注语言类型

## 工作流
- 修改完成后用 git push 推送到 main 分支
- Vercel 会自动构建部署
- 提交信息格式：type: description（如 feat: 新文章、fix: 修复排版）

有了这个文件，Claude Code 就知道你的项目是什么、该怎么写代码、该怎么提交。相当于给 AI 队友写了一份”入职手册”。

工具对比：Claude Code vs 其他 AI 编程工具

市面上有不少 AI 编程工具，简单对比一下各自的定位：

工具	形态	擅长场景	价格
Claude Code	命令行 Agent	全栈开发、项目管理、自动化操作	Claude Pro $20/月 或 API 按量
Cursor	代码编辑器	日常写代码、补全、重构	Pro $20/月
GitHub Copilot	IDE 插件	代码补全、行级建议	$10/月
QoderWork	桌面助手	文件处理、多工具协作、日常办公	积分制

Claude Code 最大的优势在于它是一个 Agent——不只是补全代码，而是能理解整个项目上下文、执行命令、操作 Git、管理文件。你可以把它理解为一个”能动手干活的 AI 程序员”，而不只是一个”打字快的代码助手”。

当然，这些工具并不冲突。很多人会同时用 Cursor 写日常代码、用 Claude Code 做复杂任务和项目管理。

常见问题与踩坑记录

❌ Claude Code 安装报错 EACCES permission denied

Windows 用户需要用管理员权限运行终端，macOS/Linux 用户不要加 sudo，改用修复 npm 全局目录权限的方式：

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc
npm install -g @anthropic-ai/claude-code

❌ cc-switch 切换后 Claude Code 无响应或报错

通常是 API Key 无效或端点地址不对。用 cc-switch list 检查当前配置，确认 API Key 没有过期、端点地址拼写正确。部分国产模型的 API 路径需要带 /v1 后缀。

❌ git push 要求输入密码，但输入 GitHub 密码不对

GitHub 已经不支持密码认证了，需要用 Personal Access Token：

# 去 GitHub → Settings → Developer settings → Personal access tokens → Generate new token
# 勾选 repo 权限，生成后复制 token
# push 时密码栏粘贴这个 token

❌ Vercel 部署后页面空白

通常是构建命令或输出目录配置不对。检查 vercel.json 中的 buildCommand 和 outputDirectory 是否和你的项目匹配。

❌ Claude Code 不认识我的项目结构

第一次使用时，建议先让它”读一下项目”：

你：帮我分析一下这个项目的目录结构和主要技术栈。

或者确保项目根目录有 CLAUDE.md 指令文件，Claude Code 会自动读取。

❌ Vercel 没有自动触发部署

检查 Vercel 项目 Settings → Git，确认仓库已正确连接，Production Branch 设为 main。

这套工作流的核心思路

回顾一下，整套环境的核心逻辑其实就三句话：

GitHub 存代码，Vercel 跑网站，Claude Code 帮你干活。

你不需要记住复杂的命令，不需要手动构建部署，甚至不需要精通编程。你只需要清楚地描述”我想要什么”，剩下的交给 AI 和自动化。

这也是 2026 年开发方式的一个趋势——**从”人写代码”到”人描述需求，AI 写代码，自动化流程上线”**。

---

下一篇我们会深入讲解如何用 Claude Code 实现项目的自动化管理，包括批量操作、定时任务、多项目协作等进阶玩法。