上次《GitHub Action初探》只是简单的说明了下大概，这次是演示如何使用 GitHub Actions 自动发布一个 Vue 应用到 GitHub Pages。

代码我已经托管到GitHub上了，文末会放出。

准备

先在GitHub上建一个仓库吧，例如我这里建的名称是github-actions-demo，然后再建立一个以gh-pages的分支，我们会把自动打包的文件，放在这个分支上。

然后，建立一个Vue的项目，我这里用的是脚手架搭的。

然后，需要生成一个令牌，后期要用。GitHub现在的链接是这个：https://github.com/settings/tokens，不过不保证后期地址会变。

Note 最好见名识意，然后 repo 务必要勾选上，生成完代码后，复制出来，以后就不会再显示了。

然后到Settings中去把刚才的密钥填进去，名字配置为ACCESS_TOKEN和下面的代码中要对应。

开始

在根目录，建立一个.github/workflows的文件夹，然后新建一个以.yml的文件，我这里随便起的名字：build-deploy.yml

代码这里我补充了注释，基本上都能看明白，并且也把Vue/React单独标识出来：

# name字段是 workflow 的名称
name: GitHub Actions Build and Deploy Demo
# on字段指定触发 workflow 的条件，通常是某些事件
# 这里的触发条件是push代码到master的时候触发
on:
  push:
    branches:
      - master
# workflow 文件的主体是jobs字段，表示要执行的一项或多项任务
jobs:
  main:
    # runs-on字段指定运行所需要的虚拟机环境。它是必填字段。目前可用的虚拟机如下：ubuntu-latest，windows-latest，macOS-latest
    runs-on: ubuntu-latest
    # steps字段指定每个 Job 的运行步骤，可以包含一个或多个步骤
    steps:
      # 获取源码，使用的 action 是actions/checkout
    - name: Checkout
      uses: actions/checkout@v2
      with:
        persist-credentials: false
        
    # react项目为npm run-script build，vue项目改为npm run build
    - name: Install and Build
      #构建脚本
      run: |
        npm install
        npm run build
     
    # 构建和部署，使用的 action 是JamesIves/github-pages-deploy-action
    # react项目的FOLDER为build，vue项目改为dist
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        # GitHub 密钥
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        # 发布分支
        BRANCH: gh-pages
        # 构建成果所在目录
        FOLDER: dist

构建

每次 push 代码后，都会自动执行，http://blog.wangdaodao.com/github-actions-demo

结尾

失败是成功之母，多次尝试就没啥问题，你看我都失败了多少次：

放出来demo地址，欢迎 Fork，后期会写一个 action 自动发布 NPM 包的教程，这样以来，每次发布都省事了……

另外，国内网络对于GitHub访问是有点慢的，所以，这里也可用把打包好的文件，推送到coding上。

github-actions-demo

Owner：wangdaodao

Updated：2022-08-21 16:26

Watch：0

Star：0

Fork：1