背景

最近打算在git上发布一个学习笔记文档，文档使用 vuepress 搭建，然后发布到git的pages上。考虑到每次发布都需要手动deploy一把，有点繁琐，于是乎打算使用git的 Actions 功能将这个手动的过程自动化。

开始

初始化vupress项目

关于vuepress项目的初始化，官网已经给出了非常详细的操作步骤，可以移步至官网查看。

部署

第一步: 配置pages

关于pages的配置方法，vuepress官网也给出了详尽的描述：GitPages。

第二步: 设置Deploy Key 以及 Secrets

后面发布时，需要将构建后的代码推送到代码仓库，所以需要Git的秘钥。

首先通过以下命令生成私钥跟公钥：

ssh-keygen -t rsa -C '邮箱地址'

生成后，打开Git项目的设置，选择 Deploy keys新建deploy key，将公钥的内容填入：

之后再选择 Secrets 选项，新建私钥，将私钥内容填入：

第三步: 新建Action

选择 Actions， 新建一个workflow。在Actions界面，Git会提供一些模板供我们使用，这里我们选择默认的即可

新建完成后，会默认在我们的项目下生成一个 .github/workflows/blank.yml 文件，用于配置脚本, 我们将其稍作修改：

# ci脚本的名称
name: VUE3-STUDY DOCS CI
# 触发的时机
on:
  # 在push阶段触发
  push:
    # 对应的分支
    branches: [ main ]
  # 在PR阶段触发
  pull_request:
    # 对应的分支
    branches: [ main ]
# 执行的任务
jobs:
  # 任务名称
  build:
    # 执行的环境，默认是在最新版本的Ubuntu系统
    runs-on: ubuntu-latest
    # 执行的步骤
    steps:
      # checkout代码
      # 其中actions是github官方账号，checkout是改账号下提供的库，可以直接拿来使用，对应的版本是v2
      # setup-node同上
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        # 设置node的版本
        with:
          node-version: '14'
        # 执行步骤的名称
      - name: Compiling start
        # 执行的具体脚本
        run: echo Compiling start!
        # 如果在执行的时候报错，提示需要用户名跟邮箱，那么需要单独设置下邮箱跟用户名
      - run: git config --global user.email "your email address"
      - run: git config --global user.name "your user name"
        # 执行安装跟打包命令
      - run: npm install && npm run docs:build
      - name: Deploy
        # 这个是第三方提供的库，可以推送打包后的内容到指定分支
        uses: peaceiris/actions-gh-pages@v3
        with:
          # 这边需要设置第二步获取到的deploy key，否则会提示没有权限推送代码
          deploy_key: ${{ secrets.VUE3STUDY }}
          # 推送到该仓库中，地址格式为github名称/仓库名
          external_repository: xxx/xxx
          # 推送的分支
          publish_branch: gh-pages
          # 推送的内容
          publish_dir: docs/.vuepress/dist

配置完成后，将内容push上去，action就会自动执行了：

等待执行完毕后，即可查看页面~

写在最后

本文是关于git actions的一次简单尝试，有兴趣的同学可以去参考git aciton官方文档去做进一步研究~

文中所述文档已部署，欢迎戳~

Git地址, 欢迎⭐️交流~