前言:提交代码到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仓库地址
项目演示地址
kangleyunju.github.io/vue2_h5/