Github Page 自动化部署记录

github page 部署

针对一个已有的github仓库如何进行 github page 自动化部署。

生成 token

1. 打开 settings 页面，点击 Developer settings 选项
2. 点击 Personal access tokens 按钮， 选择 Token（classic）
3. 点击 Generate new token 按钮，选择 Generate new token（classic）
4. 输入 token 名称， 勾选 repo 权限， 点击 Generate token 按钮， 复制生成的 token 值。

设置项目的 secrect

1. 打开项目的 settings 页面，点击 Secrets and varialbes 选项
2. 点击 New repository secret 按钮。
3. 自定义一个 name 值， 输入刚才复制的 token 值，点击 Add secret 按钮。

自动化部署脚本

在 项目的根目录下创建一个 .github 文件夹，在 .github 文件夹下创建一个 workflows 文件夹，在 workflows 文件夹下创建一个 deploy.yml 文件。

目录格式如下：

- .github
  - workflows
    - deploy.yml

deploy.yml 文件内容如下：

name: Deploy
on:
  push:
    branches:
      - main # 部署分支 如果是 master 分支，则改为 master
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses:
          actions/checkout@v2

          # 安装 Node.js 和 pnpm
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 22 # 选择你的 Node.js 版本

      - name: Install pnpm # 安装 pnpm
        run: |
          corepack enable
          corepack prepare pnpm@latest --activate

      - name: Install dependencies
        run: pnpm install

      - name: Build project
        run: pnpm run build

      - name: Upload production-ready build files
        uses: actions/upload-artifact@v4
        with:
          name: production-files
          path: ./dist # 打包后的文件路径

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main' # 部署分支 如果是 master 分支，则改为 refs/heads/master

    steps:
      - name: Download artifact
        uses: actions/download-artifact@v4
        with:
          name: production-files
          path: ./dist

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.name }} # 输入生成的 secrect 的名字，如果名字为 GITHUB_TOKEN ，则为 secrets.GITHUB_TOKEN
          publish_dir: ./dist # 打包后的文件路径

这个时候提交到仓库，会生成一个 gh-pages 分支。

切换构建分支

1. 打开项目的 settings 页面，找到 Pages 选项， 打开 Github Pages 页面。
2. 找到 Build and deployment 下的 Branch 选项， 将 branch 切换成 gh-pages，根目录选择 /（root），点击 Save 按钮。