如何使用GithubAction自动部署VuePress到GithubPages

提示

仓库名称必须严格按照 [你的GitHub用户名].github.io 格式来

否则会将网站部署到以仓库名称命名的子路径上

打开 repo 控制权限

依次进入仓库的 Settings=>Action=>General

打开以下两个权限：

Workflow Permissions:

• Read and write permissions

• Allow GitHub Actions to create and approve pull requests

编写Github WorkFlow配置文件

文件 .github/workflows/deploy-github-pages.yml

# Action 的名称
name: Deploy GitHub Pages

# 触发条件：在 push 到 main 分支后
on:
  push:
    branches:
      - main

# 任务
jobs:
  build-and-deploy:
    # 服务器环境：最新版 Ubuntu
    runs-on: ubuntu-latest
    steps:
      # 拉取代码
      - name: Checkout
        uses: actions/checkout@v3
        with:
          persist-credentials: false

      # 生成静态文件
      - name: Build
        run: npm install && npm run docs:build

      # 部署到 GitHub Pages
      - name: Deploy
        # 使用别人写好的一个 action
        uses: JamesIves/github-pages-deploy-action@releases/v4
        with:
          # 打包后的文件部署到哪个分支上
          BRANCH: gh-pages
          # 打包后的文件在哪里
          FOLDER: src/.vuepress/dist

配置完成后应该会自动开始构建，在actions里可以看到构建详情，失败会显示原因 以后每次push都会自动构建部署

配置GitHub Pages

相关信息

等待上一步action执行成功，再进行这一步

打开 Settings 中的 Pages 页面

Source 选择 Deploy From Branch

Branch 选择 gh-pages 然后save即可

Pages 的构建流程这时应该会自动启动，等待几分钟，Pages 页面顶部就会显示部署成功后的域名啦。

完🎉