工作这么久, 还不懂GitHub Pages自动化部署吗 ？

前言：提交代码到github, 自动部署到github pages, 白嫖github的服务器

1. github pages 设置

思路：我们的代码在主分支是main, 然后可以新建一个分支,例如vue2_h5, 用来存放npm run build 打包后的代码

先到settings下, 点击左侧pages, 设置pages关联的分支, 如vue2_h5, 打包成功后, 点击GitHub Pages生成的链接kangleyunju.github.io/vue2_h5/ 就能看到页面了

2. 配置自动化部署文件

• 方法一, 去github仓库/actions下新建一个自动部署文件

点进去, 修改里面的内容

代码如下, 直接复制, 注意要修改成自己的分支名称和路径, 需要设置监听的分组, 这里是主分支main, 以及存放打包文件的分支vue2_h5

name: Build and Deploy
on: # 监听 main 分支上的 push 事件
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 构建环境使用 ubuntu
    steps:
      - name: Checkout
        uses: actions/checkout@v2.3.1  
        with:
          persist-credentials: false

      - name: Install and Build # 下载依赖 打包项目
        run: |
          npm install
          npm run build

      - name: Deploy # 将打包内容发布到 github page
        uses: JamesIves/github-pages-deploy-action@v4.3.3
        with:  # 自定义环境变量
          BRANCH: vue2_h5 # 这个是存放打包后的分支，需要替换成你的
          FOLDER: dist # 默认vue项目打包输出目录是dist, 一般不用改
          REPOSITORY_NAME: kangleyunju/vue2_h5 # 这是我的 github page 仓库，需要替换成你的
          TARGET_FOLDER: / # 打包的文件将放到静态服务器 / 目录下, 一般不用改
          ACCESS_TOKEN: ${{ secrets.VUE3_PC }} # secrets.VUE2_H5 是我的 secret 名称，需要替换成你的,这一行不要也可以

然后提交保存, 只要你推送main分支, 就会自动打包main分支到打包后的分支vu2_h5

• 方法二, 手动新建.github目录

ci.yml代码如下, 和方法一一样

name: Build and Deploy
on: # 监听 main 分支上的 push 事件
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest # 构建环境使用 ubuntu
    steps:
      - name: Checkout
        uses: actions/checkout@v2.3.1  
        with:
          persist-credentials: false

      - name: Install and Build # 下载依赖 打包项目
        run: |
          npm install
          npm run build

      - name: Deploy # 将打包内容发布到 github page
        uses: JamesIves/github-pages-deploy-action@v4.3.3
        with:  # 自定义环境变量
          BRANCH: vue2_h5 # 这个是存放打包后的分支，需要替换成你的
          FOLDER: dist # 默认vue项目打包输出目录是dist, 一般不用改
          REPOSITORY_NAME: kangleyunju/vue2_h5 # 这是我的 github page 仓库，需要替换成你的
          TARGET_FOLDER: / # 打包的文件将放到静态服务器 / 目录下, 一般不用改
          ACCESS_TOKEN: ${{ secrets.VUE3_PC }} # secrets.VUE2_H5 是我的 secret 名称，需要替换成你的,这一行不要也可以

推荐使用uses: JamesIves/github-pages-deploy-action@v4.3.3这个版本

v3版本我一直打包失败

然后提交代码到github即可

3.常见错误处理

进入actions可以看到打包进程, 和错误原因

以下错误经常发生

Error: The deploy step encountered an error: The process '/usr/bin/git' failed with exit code 128

需要到settings下设置actions的读写权限, 如下图

4. 我的github示例项目, 不清楚的可以看看我的仓库

github仓库地址

github.com/kangleyunju…

项目演示地址

kangleyunju.github.io/vue2_h5/