一、准备工作：获取所有必需的免费工具与资源

本节所有工具无需付费，无需翻墙，国内可正常访问。

• 代码编辑器：直接访问 https://code.visualstudio.com/Download 选择对应系统（Windows/Mac/Linux）安装默认版即可
• Git版本控制+代码托管：
  • 下载Git：https://git-scm.com/downloads 选对应系统安装，一路默认Next到底
  • 注册Gitee账号：https://gitee.com/signup 邮箱、手机二选一验证，完成实名认证
• 静态网站模板：从Gitee Pages官方精选库找入门模板，比如纯HTML+CSS+JS的个人名片模板，直接访问 https://gitee.com/gitee-pages/awesome-gitee-pages 下滑到「个人名片/简历」分类，点击 「gitee-pages/resume-card」 进入模板仓库

二、配置本地开发环境与Git连接

2.1 验证Git与VS Code安装

打开电脑终端（Windows用快捷键Win+R输入cmd回车，Mac/Linux用Terminal），依次输入以下2条命令，看到版本号即成功：

``` git --version code --version ```

2.2 绑定Git与Gitee账号

终端继续输入，替换引号内的内容为你的真实Gitee昵称和邮箱：

``` git config --global user.name "你的Gitee昵称" git config --global user.email "你的Gitee注册邮箱" ```

生成SSH密钥（免密上传代码）：

``` ssh-keygen -t ed25519 -C "你的Gitee注册邮箱" ```

终端连续按3次回车（密钥默认存C:\Users\你的用户名\.ssh，Mac/Linux存~/.ssh），看到类似「The key's randomart image is:」就成功了。

复制SSH公钥：Windows用记事本打开C:\Users\你的用户名\.ssh\id_ed25519.pub，全选复制；Mac/Linux用命令cat ~/.ssh/id_ed25519.pub，全选复制。

绑定到Gitee：打开Gitee网页 右上角头像→设置→SSH公钥，粘贴公钥到「公钥」框，「标题」随便写（比如「我的笔记本」），点击确定，输入Gitee密码验证。

2.3 克隆模板到本地

回到刚才的resume-card模板仓库，点击 绿色「克隆/下载」→复制「SSH」链接。

终端进入你想存网站的文件夹（比如Windows存D盘的Website文件夹：先输入d:回车，再输入mkdir Website回车，最后cd Website回车），然后输入：

``` git clone 刚才复制的SSH链接 ```

克隆完成后，VS Code按Ctrl+Shift+P（Mac Cmd+Shift+P），输入「Open Folder」，选择刚才克隆的「resume-card」文件夹，打开本地开发环境。

三、修改网站内容：纯可视化操作（新手友好）

3.1 预览原始网站

VS Code左侧找到 index.html 双击打开，按Ctrl+Shift+X（Mac Cmd+Shift+X）打开扩展商店，搜索「Live Server」，点击第一个（作者Ritwick Dey）的「安装」。

安装完成后，右键点击VS Code中间的index.html代码区域，选择 「Open with Live Server」，浏览器会自动打开原始网站。

3.2 修改核心信息

所有修改都在index.html里完成，保存后Live Server会自动刷新浏览器，无需手动操作。

• 修改标题栏文字：找到第8行左右的，把中间的Resume Card改成你的名字+个人简历/名片
• 修改头像：把你自己的头像（建议正方形，尺寸200x200px，格式jpg/png）重命名为avatar.jpg，直接拖到VS Code左侧的「img」文件夹里，覆盖原文件即可
• 修改个人基本信息：找到第25-30行左右的标签，比如：

  • 张三

    改成你的名字

  • 前端开发工程师

    改成你的职业
  • 北京 改成你的城市
  • 社交链接修改：把所有href="..."引号内的链接改成你自己的（比如GitHub、B站、公众号二维码链接，没有的可以删掉对应标签）
• 修改技能/经历板块：直接在对应标签内替换文字即可，比如技能列表的
• JavaScript
改成
• Photoshop

四、部署到Gitee Pages：永久免费访问

4.1 创建自己的Gitee Pages仓库

打开Gitee网页 右上角「+」→新建仓库，按以下要求填写：

• 仓库名称：必须是「你的Gitee用户名.gitee.io」（比如你的昵称是zhangsan，就填zhangsan.gitee.io）
• 仓库介绍：随便写，比如「我的个人静态网站」
• 是否开源：选公开（Gitee Pages公开仓库才能免费部署）
• 初始化仓库：不要勾选任何选项

点击「创建」。

4.2 上传修改后的本地代码

回到VS Code，按Ctrl+`（Mac Cmd+`）打开内置终端，依次输入以下4条命令：

• 初始化本地仓库（第一次上传用）：git init
• 添加所有修改的文件：git add .（注意后面有个空格加小数点）
• 提交修改并加备注：git commit -m "第一次提交，修改了个人信息"
• 绑定本地仓库到刚创建的Gitee Pages仓库（替换引号内的SSH链接，从你刚创建的仓库页面复制「克隆/下载」的SSH）：git remote add origin "你的Gitee Pages仓库SSH链接"

最后输入强制推送命令（避免第一次推送冲突）：

``` git push -u origin master ```

终端显示「100%」「done」即上传成功。

4.3 开启Gitee Pages服务

回到你的Gitee Pages仓库页面，点击 顶部「服务」→Gitee Pages，按以下要求操作：

• 部署分支：默认选master
• 部署目录：留空（因为index.html在根目录）
• 勾选 强制HTTPS

点击「启动」，等待1-2分钟，刷新页面，看到「已开启」和访问链接（就是你的仓库名称），点击链接即可访问你的个人网站！

五、后续更新网站的方法

以后修改内容后，只需在VS Code内置终端依次输入3条命令：

• git add .
• git commit -m "修改了XXX内容"（备注要清晰）
• git push

推送成功后，回到Gitee Pages服务页面，点击「更新」按钮（如果没有自动更新），1分钟左右就能看到新内容。