Notes | Notes

;# GithubActions

GithubActions是github提供的一个持续集成的方式

创建personal access tokens

Setting(个人设置) -> Developer settings -> Personal access tokens

创建之后保存下来

创建ci.yml

在本地的项目中创建.github/workflows/ci.yml的配置文件，并写入以下内容

yaml

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
        env:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages
          FOLDER: dist
          BUILD_SCRIPT: npm install && npm run build
# https://github.com/marketplace/actions/deploy-to-github-pages

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
        env:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages
          FOLDER: dist
          BUILD_SCRIPT: npm install && npm run build
# https://github.com/marketplace/actions/deploy-to-github-pages

on: 表示触发的条件上面的on部分表示，当往master分支push的时候触发
jobs: 工作流程

配置ACCESS_TOKEN
Settings(项目配置) -> Secrets -> New Secrets
NAME = ACCESS_TOKEN
VALUE = [personal access token] (上面创建过)

修改package.json

在package.json中新增homepage属性

json

{
//  ...
  "homepage": "https://[用户名].github.io/[仓库名称]",
//  ...
}

{
//  ...
  "homepage": "https://[用户名].github.io/[仓库名称]",
//  ...
}

修改静态文件路径

在本地项目中，修改webpack配置，如果使用的是vue-cli，创建vue.config.js,加入以下配置

module.exports = {
    outputDir: 'dist',
    publicPath: process.env.NODE_ENV === 'production' ? '/[github的仓库名称]/' : '/'
}

module.exports = {
    outputDir: 'dist',
    publicPath: process.env.NODE_ENV === 'production' ? '/[github的仓库名称]/' : '/'
}

主要目的是确保输出的打包目录名称为dist和静态文件的加载路径

然后将修改提交推送到仓库中

启动Action

在github仓库中，进入Actions，然后选择创建的Actions,就可以看到Actions工作的过程

等待Actions工作完毕之后，就可以在分支列表中看到新的分支gh-pages

开启GithubPages

Settings -> Github Pages

选择分支 gh-pages 保存

可以使用https://[用户名].github.io/[仓库名称]访问仓库中的index.html或README.md

GitHub Actions 入门教程