需求

用 VuePress 写了一个 Vue 3 快速入门指南，想部署到 Github Pages，每次需要先yarn docs:build，再将打包好的内容放到gh_pages分支上，非常麻烦，因此，需要一种自动部署的技术。

使用方法

创建 action

在你的仓库中根目录创建一个.github/workflow/[your action name].yml，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@v2
        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/v3
        with:
          # 这里的 ACCESS_TOKEN 名字需要和下文中的相对应
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          # 打包后的文件部署到哪个分支上
          BRANCH: gh-pages
          # 打包后的文件在哪里
          FOLDER: docs/.vuepress/dist

生成 token

去官方文档先生成一个 Github 密钥，生成完成之后复制一下

去自己的仓库中

点击 settings
点击左侧 Secrets
点击右侧按钮 new repository secret
创建的名字和 .yml 中的 secret.xxx 要对应，值就写刚刚生成的 Github 密钥

使用 actions

刚刚在创建一个 action 的时候，指定了在 push 到 main 分支的时候触发 action ，做出这些操作，你就可以在 Github 仓库的 Actions 选项中看到你的 actions 记录

if ？

如果 actions 运行失败，会向你的 Github 绑定的 QQ 邮箱中发送一封失败邮件，你也可以在仓库的 actions 看到你的 action 失败的原因

部署 Github Pages

点击仓库的 Settings
点击左侧的 Pages
选择部署的分支
点击 save
成功，点击上方链接就可以看到 Github Pages 啦

接下来，你就可以愉快的与 Github Pages 和 VuePress 愉快的玩耍啦~

使用 GitHub Actions 将 VuePress 自动部署到 Github Pages

需求