GitHub Actions

对于CI/CD这些名词，大家应该都耳熟能详了。而且日常其实我们也不用去关心这些流程，有专门的运营或者团队来管理。但是想着自己借助工具搭建一个了解下，就先通过GitHub Action来搭建一个自动化的流程。 为了方便说明流程，具体项目内容以测试为主。

创建Vue项目

本地运行的效果为:

登录github项目

然后在对应的项目根目录里面创建一个.github/workflows的目录

紧接着创建一个ci.yml,也可以起别的名字比如autoDeploy.yml等 然后添加对应的action code如下：

        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\@v2
        with:
        persist-credentials: false

        - name: Install and Build
          run: |
              npm install
              npm run build

        - name: Deploy
          uses: JamesIves/github-pages-deploy-action@v4
          with:
            branch: gh-pages 
            folder: dist 
            clean: true`         

添加以后通过Commit changes...进行code merge

点击Propose changes 提交workflows

点击头部Actions可以看到我们新建立的workflows，因为是push行动会触发所以会自动运行这个流程

点击头部Settings/Pages菜单

配置Deploy对应的Branch 最后我们Deploy后的项目地址会显示在对应的位置如图4

最终部署后效果如下：

具体地址为：https://[gitHub用户名].github.io/[项目名称]

我的demo地址