github--actions作为一个爱折腾的前端，最近想尝试搞一下CICD，发现github的actions很有意思，

作为一个爱折腾的前端，最近想尝试搞一下CICD，发现github的actions很有意思，于是看了一下阮老师的日志，感觉还是很轻松，并且很有意思。

申请秘钥 && 创建环境变量

在账户设置里找到开发者设置，选择个人令牌，创建一个token，复制后到仓库的设置中选择secrets创建一个token，创建一个环境变量，将token复制到values(注意环境变量的名字要与脚本中一致)。

创建项目 && 生成工作流

我是用的umi的脚手架创建的，...省去创建步骤，生成后再package.json中添加

"homepage": "https://[username].github.io/[project]",

表示该应用发布后的根目录

重点来了，既然要持续集成，就肯定会有一系列的脚本操作，

在这个仓库的.github/workflows目录，生成一个 workflow 文件, .yml的文件 workflow 文件的配置字段非常多，包括name、on、steps等，详见官方文档

下面是一个完整的 workflow 文件的范例

name: GitHub Actions Build and Deploy Demo
on:     // 触发的事件
  push:         
    branches:
      - master  // 分支名称
jobs:           // 任务
  build-and-deploy:
    runs-on: ubuntu-latest  // 运行环境
    steps:                  // 步骤
    - name: Checkout        
      uses: actions/checkout@master

    - name: Build and Deploy
      uses: JamesIves/github-pages-deploy-action@master     // 这里直接用了别人写好的actions
      env:                                                  // 环境变量
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: dist    // 注意不同脚手架打包的文件夹名称是不同的
        BUILD_SCRIPT: yarn && yarn run build                // 这里就是我们熟悉的node命令了

当推送代码到指定分支时就会触发这个工作流，可以在仓库的actions查看日志

成功之后再看分支会发现多了一个gh-pages分支，里面的内容就是dist文件夹的内容

成功后就可以访问GitHub Page了，大概10-15分支后会展示文件的内容，在这之前都是404...

喜欢的点个赞吧