Session 4 课前准备
Claude Design + Code 建站实战

这节课在 第二课（Claude Code）基础上新增两个工具：GitHub（存代码）+ Vercel（自动部署上线）。 如果第二课的环境还正常跑着，今天约需 5 分钟：注册 GitHub + 注册 Vercel。

S2 已经准备好了，不用重复

如果以上任何一条不满足，回到 S2 学员页按课前准备补上。

S4 新增：GitHub + Vercel

工具用途费用
GitHub 账号 存放网站代码；Vercel 监听它自动部署 免费
Vercel 账号 网站部署平台，push 一下自动上线 免费

第 1 步注册 GitHub 账号 + 配置认证

1a. 注册账号

  1. 打开 github.com
  2. 点右上角 Sign up，填邮箱 → 密码 → 用户名
  3. 验证邮箱，完成注册
  4. 记下你的用户名（后面要用）
💡 Git（已装）是本地版本控制工具；GitHub 是存代码的云端平台。两者不同，都需要。

1b. 配置 GitHub 认证（一次性）

注册完账号后，打开 Claude Code（任意目录），输入：

帮我安装 GitHub CLI 并登录 GitHub

Claude Code 会自动运行 winget install --id GitHub.cli（Windows）或 brew install gh（Mac）， 然后执行 gh auth login——按提示选 HTTPS → Login with a web browser，浏览器弹出页面点授权。

✅ 完成后终端显示 Logged in to github.com，之后所有 git push 自动带认证。
🙋 没用过 Git / GitHub 怎么办？
不用担心——这节课里所有 Git 操作都通过 Claude Code 完成，不需要记任何命令。例如：

第 2 步注册 Vercel 账号

  1. 打开 vercel.com
  2. 点 Sign Up，推荐用 GitHub 账号登录（课堂上 Vercel 要连接你的 GitHub repo）
  3. 授权后完成注册
💡 Hobby（免费）套餐完全够用：无限静态网站、自定义域名、自动 HTTPS、全球 CDN。

验证（10 秒）

claude --version   # 确认正常

上课前检查清单

✅ 四项全 OK，上课见！

💬 遇到问题发到微信群，上课前有人帮你看。

Session 4 · Claude Design + Code 建站实战
Austin Xu · 北美华人 Claude AI 课程 · elitecoach101.com