首先在 vscode 中准备静态网站项目并初始化 git 仓库，接着将其推送到 github 远程仓库；然后在 GitHub 仓库的 Settings 中启用 Pages 服务，选择部署分支（如 m ain）和根目录，保存后网站将自动发布。每次通过 VSCode 推送更新，GitHub Pages 会自动重建站点。关键步骤为：项目准备→关联仓库→推送代码→配置 Pages→自动更新。
通过 VSCode 将静态网站部署到 GitHub Pages 其实并不复杂，只需要几个关键步骤：准备项目、连接 GitHub 仓库、推送代码、启用 GitHub Pages 服务。下面一步步说明操作方法。
1. 准备静态网站项目
确保你的项目是一个标准的静态网站，包含 index.html 文件以及相关的 css、javaScript 和资源文件。项目结构建议如下：
在 VSCode 中打开这个项目文件夹。
2. 初始化 Git 仓库并连接 GitHub
如果你还没有关联 GitHub 仓库，先在 GitHub 上创建一个新的公共仓库（例如：your-username.github.io 或任意项目名）。
然后在 VSCode 中打开终端（Terminal > New Terminal），依次执行以下命令：
- git init —— 初始化 本地仓库
- git add . —— 添加所有文件到暂存区
- git commit -m “Initial commit” —— 提交更改
- git branch -M main —— 将默认分支命名为 main
- git remote add origin https://github.com/your-username/your-repo-name.git —— 关联远程仓库
- git push -u origin main —— 推送代码到 GitHub
3. 启用 GitHub Pages 服务
推送到 GitHub 后，进入你的 GitHub 仓库页面，点击 Settings 标签，向下滚动到“Pages”部分。
在“Source”选项中，选择 Deploy from a branch，然后选择分支（通常是 main）和根目录 / (root)。
点击保存，GitHub 会开始部署，几秒到几分钟后你会看到类似：
Your site is published at https://your-username.github.io/your-repo-name
4. 自动部署小技巧（可选）
为了更方便地更新网站，你可以使用 VSCode 的 Git 功能随时提交更改：
每次推送后，GitHub Pages 会自动重新构建并更新你的网站。
基本上就这些。只要代码推送到指定分支，GitHub Pages 就能运行你的静态网站。不复杂但容易忽略的是分支设置和页面源路径的选择。确保这两项配置正确，网站就能正常访问。
