在 VS code 上远程管理 Github 仓库项目

Ruyingsuixing2026-04-192026-04-19

绑定本地仓库到你已有的 GitHub 远程仓库

先把本地和远程仓库建立连接，Ctrl+Shift+`调出 VS code 终端直接执行：

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

验证绑定成功：

1	git remote -v

终端输出下面这样，就代表绑定成功：

1 2	origin git@github.com:xxx/xxx.git (fetch) origin git@github.com:xxx/xxx.git (push)

报错 fatal: remote origin already exists：说明之前绑过别的，先执行 git remote remove origin 解除绑定，再重新执行上面绑定命令即可。

拉取远程旧 main 分支内容，做安全备份（如果你的仓库原来有 main 分支，可选）

远程 main 全是旧的 dist 文件，我们先把它拉到本地，备份成一个旧分支，绝对不覆盖本地源码，全程安全兜底。

1 2	git fetch origin git branch old-main origin/main

执行完，你本地就多了一个 old-main 备份分支，以前手动上传的所有文件全部永久保留，后续操作完全不会动它。

重置本地 main 分支为纯净源码分支

你的 .gitignore 已经写好了 dist，会自动忽略打包文件夹，不会把 dist 提交到 main 分支。

1
2
3

git checkout main
git add .
git commit -m "初始化 main 源码分支：项目完整开发源码"

推送全新源码 main 分支

如果 main 分支已经有冲突文件：

1	git push -f origin main

否则：

1	git push origin main

GitHub 远程 main 分支：已经全部是你的项目源码，dist 文件夹被 .gitignore 自动忽略，完全不会上传到 main ！

新建 gh-pages 分支，只存放静态文件

这一步专门创建部署分支，全程独立，和 main 分支完全隔离，只存放打包后的 dist 静态文件。

1 2	pnpm build cd dist && git init && git add . && git commit -m "init gh-pages" && git push -f git@github.com:ruying-suixing/tool.git HEAD:gh-pages && cd ..

GitHub 远程 gh-pages 分支：里面只有 dist 静态网页文件，无任何源码，专门用于 GitHub Pages 网站部署。

切回日常开发的 main 源码分支

你以后每次修改完代码，更新网页，只需要严格按这个顺序走，再也不用手动上传文件：

1. 开发修改源码（全程在 main 分支）

你改完源码后，更新到 GitHub 源码仓库：

1
2
3

git add .
git commit -m "填写本次源码更新内容说明"
git push origin main

2. 打包生成最新的 dist 文件

在 main 分支终端执行打包命令（根据你的项目，你的是 vite 项目）

1 2	npm run build # 或 pnpm build

执行完，本地 dist 文件夹就会更新为最新打包文件。

回到主项目根目录，执行这 2 条全局 git 配置，永久关闭这个烦人的换行符警告：

1 2	git config core.autocrlf true git config core.safecrlf false

3. 一键更新 gh-pages 部署网页

1
2
3

npm run build
# 或 pnpm build
cd dist && git init && git add . && git commit -m "update site" && git push -f git@github.com:你的用户名/你的仓库名.git HEAD:gh-pages && cd ..