Vibe Coding 用 GitHub：备份、回退与一键部署

你是不是也遇到过这些问题：

• 代码改崩了，回退不了，只能含泪重写
• 想部署上线，却不知道代码怎么传到服务器
• 在公司电脑写了一半，回家想继续写，代码却不在

这些问题，本质上都是代码没有做好云端管理和备份。

这期教程不讲 Vibe Coding 技巧，专门讲怎么在 Vibe Coding 的过程中使用 GitHub——从注册账号到代码备份，从版本回退到一键部署上线。即使你完全没用过 GitHub，也能跟着做完。

本教程涉及以下工具和平台：

建议提前收藏以上链接，后续步骤中会用到。

先快速区分两个最容易混淆的概念：

简单说：Git 负责本地备份，GitHub 负责云端中转。你可以把本地代码推到 GitHub，也可以从 GitHub 把代码拉到本地。

如果你只是想做本地备份，看我们上一期 Git 教程 就够了。本期重点讲怎么把备份搬到云端。

操作步骤：

1. 打开浏览器，访问 GitHub 官网
2. 点击右上角 Sign up
3. 用邮箱注册，填写用户名，设置密码
4. 验证邮箱，完成注册

注册过程非常简单。注册完成后登录，准备创建你的第一个仓库。

操作步骤：

1. 登录 GitHub 后，点击右上角 + 按钮
2. 选择 New repository
3. 填写 Repository name（用英文，不要空格，例如 focus-kanban）
4. Description 写简介（可选）
5. 选择 Private（私有，只有你能看到）或 Public（公开）

注意： 下面两个选项不要勾选：

• Add a README file
• Add .gitignore

因为本地已有完整项目，勾选这两个会生成额外文件，与本地文件冲突。

1. 点击 Create repository

放心，GitHub 的私有仓库现在免费而且无限，随便用。

在推送之前，确保本地已建立 Git 仓库。如果还没有，依次执行：

git init
git add .
git commit -m "初次提交"

然后，把 GitHub 页面上的推送命令复制到 VSCode 终端，依次执行：

第一行：绑定远程仓库

git remote add origin https://github.com/你的用户名/仓库名.git

origin 是 GitHub 地址的代号。

第二行：修改主分支名

git branch -M main

把主分支名改成 main（GitHub 现在的默认名）。

第三行：推送代码

git push -u origin main

-u 表示建立追踪关系，以后直接用 git push 就行。

看到推送成功的提示后，刷新 GitHub 页面，项目文件就会出现在网页上。本地一份，云端一份，双保险。

问题： 注册、建仓、绑地址、输命令，步骤太多记不住。

解决方案： VSCode 内置了图形化推送，点点鼠标就搞定。

操作步骤：

1. 打开 VSCode 的源代码管理面板
2. 点击推送到 GitHub 按钮
3. 第一次使用需要授权 VSCode 访问你的 GitHub 账号
4. 授权完成后，弹窗让你填写仓库名，选择 Private 或 Public
5. 点击确定

VSCode 会自动帮你完成三件事：

• 在 GitHub 上创建仓库
• 绑定 remote 地址
• 把代码 push 上去

推荐： Vibe Coding 时优先使用 VSCode，很多繁琐操作图形界面一点就搞定。

场景： 在公司电脑写了一半，回家想继续写。

在公司电脑（上传）：

写完代码后，在终端输入：

git push

云端就有最新版本了。

在家里电脑（首次拉取）：

打开 VSCode，在欢迎页点击克隆 Git 仓库，粘贴仓库地址，选择保存位置。或在终端执行：

git clone https://github.com/你的用户名/仓库名.git

日常同步：

开始工作前，拉取最新代码：

git pull

写完收工，推送新代码：

git push

两边代码永远保持同步，再也不需要拷 U 盘。

场景： 你做了个网页，想让所有人用浏览器就能访问。

Vercel 是一个免费的网站托管平台，专门部署前端项目，可以与 GitHub 直接关联。

操作步骤：

1. 打开 Vercel 官网，点击 Sign up with GitHub 授权登录
2. 登录后点击 Add New Project
3. 页面会列出你 GitHub 上的所有仓库，找到项目，点击 Import
4. Vercel 会自动检测项目类型（静态网站或 Node.js），一般不用改
5. 点击 Deploy 部署

等 30 秒左右，显示 Deployed，下面会给出一个链接。点击链接，你的网页已经上线了，全世界都能访问。

更厉害的是： 以后每次 git push 代码，Vercel 会自动检测到更新，自动重新构建、重新部署。Push 一次代码 = 自动上线一次，你什么都不用管。

分享代码：

只要把 GitHub 仓库设为 Public，直接把链接发出去就行：

• 对方想看代码：浏览器打开链接，直接看到所有文件
• 对方想拿去用：复制链接，一句 git clone 就能拉到本地

克隆别人的开源项目：

GitHub 上有大量优秀开源项目，看到好用的工具，想弄到自己电脑上：

1. 打开项目 GitHub 页面，点击绿色的 Code 按钮
2. 复制 HTTPS 地址
3. 在 VSCode 终端输入：

git clone 粘贴刚才复制的地址

回车，等一会儿，整个项目就下载到你电脑上了——包括所有代码和所有历史存档，完整拷贝。

看到好项目一键拉下来，直接用或在上面二次开发，很多时候比自己手搓要方便得多。

以上就是新手 Vibe Coding 时使用 GitHub 的完整流程。快速回顾一下：

核心 takeaway： 学会 GitHub，代码有备份、改崩能回退、多设备能同步、项目能上线——Vibe Coding 的底气就来自这里。