阶进遐

主题

个人博客自建指南（3）：代码托管 —— Git 入门与码云实战 ​

前言 ​

第2篇我们用 Vite 搭好了项目骨架，在 localhost:5173 看到了页面。但代码还在本地 —— 硬盘坏了、换电脑了、或者想跟别人协作，都麻烦。

所以我们本篇做一件事：把代码托管到云端。

我们会用 Git 做版本管理，用码云（Gitee）做远程仓库。选码云而不是 GitHub，原因很简单：国内访问速度快，后续部署到 ECS 时从码云拉代码也更稳。

一、Git 安装与配置 ​

1.1 下载安装 ​

官网下载： https://git-scm.cn/install/windows
官网客户端默认托管在github, 国内网络问题可能无法下载，

可通过 清华源镜像/国内代理 下载，打开 终端 / powershell 窗口：

powershell
# 进入桌面目录
cd ~\Desktop
# 版本号可通过官网获取最新后替换，以2.55.0.2为例,使用清华源镜像下载
curl.exe -LO https://mirror.tuna.tsinghua.edu.cn/github-release/git-for-windows/git/Git%20for%20Windows%20v2.55.0.windows.2/Git-2.55.0.2-64-bit.exe  

# 国内代理下载 （备选，代理也可能偶尔波动失效）
curl.exe -LO https://gh.llkk.cc/https://github.com/git-for-windows/git/releases/download/v2.55.0.windows.2/Git-2.55.0.2-64-bit.exe  

# 下载后运行安装程序
.\Git-2.55.0.2-64-bit.exe

Windows x64版一路默认安装即可。

安装完成后，在 PowerShell 里验证：

powershell
git --version

能看到版本号就说明装好了。

下载完成后安装包在桌面上，验证完 git --version 后可手动删除。

1.2 基础配置 ​

告诉 Git 你是谁——提交代码时会带上这个信息：

powershell
git config --global user.name "你的昵称"
git config --global user.email "你的邮箱"

验证：

powershell
git config --global --list

1.3 安装 Git Graph 插件（强烈推荐） ​

在 VSCode 扩展商店 (Ctrl+Shift+x) 搜索 Git Graph 并安装。这个插件能以图形化的方式展示提交历史、分支、对比 diff，比命令行 git log --oneline --graph 直观得多。

装完后，打开 VSCode 左侧源代码管理图标 (Ctrl+Shift+g) ， 若项目已构建git仓库，就能看到图形化界面。

二、码云注册与仓库创建 ​

2.1 注册账号 ​

打开 https://gitee.com ，注册一个账号。已有账号的直接登录。

2.2 创建远程仓库 ​

登录后，点右上角“+” → 新建仓库：

字段填写内容
仓库名称jiejinx-blog（与本地项目同名）
路径自动生成，不用改
仓库介绍可选，如“个人博客前端项目”
是否开源选“私有”
初始化仓库不勾选任何初始化选项（我们本地已有项目）

点击“创建”。

三、本地项目关联远程仓库 ​

3.1 初始化本地仓库 ​

打开 终端/powershell 进入第2篇创建的项目目录：

powershell
cd F:\web\jiejinx-blog
git init

3.2 添加文件并提交 ​

powershell
git add .
git commit -m "first commit: Vite + Vue + TS 项目初始化"

3.3 关联远程仓库 ​

在码云仓库页面复制仓库地址（选择 HTTPS 格式链接，如 https://gitee.com/你的用户名/jiejinx-blog.git ）, 注意替换为你自己的码云仓库链接 ：

powershell
# 注意：将下面的仓库地址替换为你自己的码云仓库地址
# 如果粘错了，后续命令都会失败，需要运行 git remote remove origin 移除后，重新关联：
git remote add origin https://gitee.com/你的用户名/jiejinx-blog.git

3.4 推送到远程仓库 ​

powershell
git push -u origin master

首次推送会弹出码云登录窗口，输入 Gitee 账号密码即可。

3.5 免密推送（Windows 凭据管理器） ​

首次 git push 输入的账号密码，Windows 会自动存入凭据管理器，以后 push/ pull都不用再输。

验证凭据是否存上：

Win 键 → 搜"凭据管理器" → Windows 凭据 → 查找 git:https://gitee.com 条目

如果某天改了码云密码，来这里删掉旧凭据，下次 push会重新弹窗要一次。

💡 这样就实现了免密推送，比配置 SSH 省事得多。配合 Git Graph 的图形化界面，日常提交代码完全不用敲 Git 命令。

3.6 验证推送结果 ​

推送成功后，刷新码云仓库页面，应该能看到本地的代码文件。也可以在 VSCode 中打开 Git Graph，查看提交历史。

四、.gitignore 配置 ​

有些文件不需要提交到仓库（如 node_modules、构建产物），Vite 脚手架默认已经生成了 .gitignore 文件，内容大致如下：

node_modules
dist
.DS_Store
*.local

不需要修改，直接使用即可。如果后续有需要忽略的文件，可以手动追加。

五、日常开发流程 ​

以后写代码的循环就是：

powershell
# 1. 拉取最新代码（多人协作时需要）
git pull

# 2. 修改代码...

# 3. 查看变动
git status

# 4. 添加并提交
git add .
git commit -m "本次修改的描述"

# 5. 推送到远程
git push

在 VSCode 中，这些操作都可以通过源代码管理侧边栏完成：

  • 修改的文件会显示在列表中
  • 点击文件可查看 diff
  • 在输入框中写提交信息，按 Ctrl+Enter 提交
  • 点“同步”按钮推送

六、总结 ​

这篇我们完成了：

  • Git 安装与配置：版本管理的基础
  • Git Graph 插件：图形化查看提交历史
  • 码云仓库创建：代码有了安全的远程窝
  • 本地项目推送到远程：init → add → commit → push 完整流程
  • Windows 凭据管理器免密：一次登录，永久免密
  • 日常开发流程：pull → 修改 → add → commit → push 闭环

现在你的代码已经托管到云端，不怕丢了。