开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

GitHub Pages

创建GitHub仓库

创建GitHub仓库 github.com/new

master 分支存储项目源代码
gh-pages 分支存储打包后的静态文件

gh-pages 分支，是 GitHub Pages 服务的固定分支，必须是这个分支名才可以通过 HTTP 的方式访问到这个分支的静态文件资源。

将 git 忽略文件中的 dist 注释或删除，否则dist目录无法上传至远程仓库。

1.如果你要部署在 https://<用户名>.github.io/ 上，你可以省略 base 配置，使其默认为 '/'。

2.如果你要部署在 https://<用户名>.github.io/<仓库名>/ 上，例如你的仓库地址为 github.com/<用户名>/<仓库名>，那么请设置 base 为 '/<仓库名>/'。

我这里是第二种，所以需要将 base 设置为仓库名

然后执行 pnpm build打包，打包好后使用 pnpm preview 预览一下，没问题就提交代码到 master 分支

然后使用git subtree push --prefix dist origin gh-pages 将dist目录推送到远程的gh-pages分支，若远程没有 gh-pagse 分支则会新建 gh-pagse分支然后再推送。

然后再设置里可以看到站点地址 https://[用户名].github.io/[仓库名]/

点击或者直接输入地址查看

GitHub Actions

上面的方式需要我们每次手动打包，然后将打包后dist目录提交到gh-pages分支。

通过配置 GitHub Actions 可以在每次提交代码到 master 分支时自动更新 gh-pages 。

创建GitHub Token

创建一个有 repo 和 workflow 权限的 GitHub Token

注意：新生成的 Token 只会显示一次，保存起来，后面要用到。如有遗失，可以重新生成

此处为语雀加密文本卡片，点击链接查看：www.yuque.com/southerly/w…

添加 Actions secret

将上述创建的 Token 添加到 GitHub 仓库中的 Secrets 里，并将这个新增的 secret 命名为 VITE_DEPLOY_TEST

仓库 -> Settings -> Secrets -> Actions -> New repository secret

注意：输入的 Nmae VITE_DEPLOY_TEST 在后续 Actions 配置文件中要用到，两个地方保持一致！

创建完成

修改 package.json

打开 package.json 文件，新增 homepage 字段，表示该应用发布后的根目录

"homepage":"https://[username].github.io/vite-vue-template-page",

创建 Actions 配置文件

（1）在项目根目录下创建 .github 目录。

（2）在 .github 目录下创建 workflows 目录。

（3）在 workflows 目录下创建 deploy.yml 文件。

name: VITE DEPLOY TEST

on:
  push:
    # master 分支有 push 时触发
    branches: [master]

jobs:
  deploy:
    # 指定虚拟机环境
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x, 16.x]

    steps:
      - name: Checkout
        # 拉取 GitHub 仓库代码
        uses: actions/checkout@v3

      - name: Use Node.js ${{ matrix.node-version }}
        # 设定 Node.js 环境
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install
        # 安装依赖
        run: npm install

      - name: Build
        # 打包
        run: npm run build

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          # 部署打包目录
          folder: dist
          # 密钥名
          token: ${{ secrets.VITE_DEPLOY_TEST }}
          # 分支
          branch: gh-pages