使用 GitHub Pages 快速部署静态网页

Ⅰ使用 GitHub Pages 快速部署静态网页

概要

GitHub Pages 是 GitHub 提供的免费静态网页托管服务，支持直接从 GitHub 仓库中部署 HTML、CSS、JavaScript 等前端文件，适用于个人博客、项目展示页面等。

一、新建仓库

1. 登录 GitHub，点击右上角 “+” → “New repository”
2. 仓库名格式：<用户名>.github.io（例如：yourusername.github.io）【必须符合这种格式】
3. 设为 Public（Private 仓库需要付费才能使用 Pages）
4. 点击 “Create repository”

二、上传网页文件

注意：

• yourusername 替换成自己的名称
• 推送代码到远程仓库：git push <远程仓库名> <本地分支名>:<远程分支名>

方法一：

1. 克隆仓库到本地：

   git clone https://github.com/yourusername/yourusername.github.io.git
   cd yourusername.github.io
   

2. 添加你的网页文件（HTML、CSS、JS等）
   • 至少需要一个 index.html 作为首页
3. 提交更改：

   git add .
   git commit -m "描述信息"
   git push origin main:master
   

方法二：

三、启用 GitHub Pages

一般前面操作对了就可以直接访问 https://yourusername.github.io 查看你的网站。

1. 在仓库页面，点击 “Settings” → “Pages”
2. 在 “Source” 部分，选择分支（通常为 main 或 master）
3. 点击 “Save”
4. 等待几分钟，访问 https://yourusername.github.io 查看你的网站

Ⅱ利用GitHub Pages快速部署前端框架静态网页

GitHub Pages 来部署前端框架（Vue 3 + Vite）项目

---

1、配置 GitHub Pages 部署

1. 安装 gh-pages 包：
   这个包用于将构建好的项目推送到 GitHub 仓库的 gh-pages 分支。

   npm install --save-dev gh-pages
   

2. 修改 vite.config.js 配置：
   在 vite.config.js 中配置 base 路径，以便正确处理部署时的路径：

   export default defineConfig({
     base: '/my-vue-project/', // 这里的 'my-vue-project' 为你的 GitHub 仓库名称
     plugins: [vue()]
   });
   

3. 修改 package.json 配置：
   在 package.json 中添加 homepage 字段和部署脚本：

   "scripts": {
     "deploy": "gh-pages -d dist"
   }
   

   将 <your-username> 替换为你的 GitHub 用户名。

当运行 npm run deploy 其实就是运行 gh-pages -d dist。

2、将项目推送到 GitHub

1. 在 GitHub 创建一个新的仓库（例如 my-vue-project）。
2. 初始化 Git 仓库并推送本地代码到 GitHub：

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/<your-username>/my-vue-project.git
   git branch -M main
   git push -u origin main
   

3、部署到 GitHub Pages

1. 运行以下命令进行部署：

   npm run build
   npm run deploy
   

2. 这会将 dist 文件夹推送到仓库的 gh-pages 分支。

4、访问部署页面

完成部署后，访问以下 URL 来查看你的项目：

https://<your-username>.github.io/my-vue-project/

5、修改代码后的更新部署顺序

简单来说，每次修改代码后的完整流程是：

npm run build        # 构建最新静态文件

git add .            # 添加修改到 Git
git commit -m "msg"  # 提交修改
git push origin main # 推送代码到 main 分支

npm run deploy       # 部署到 gh-pages 分支

---

❤觉得有用的可以留个关注❤