这篇文章以一个简单的React项目为例，示例如何使用Github Actions和Github Pages来自动构建和部署一个前端项目
使用Create-React-App创建一个react项目
npx create-react-app react-deploy-demo
建立你的 Actions
在 github 上进入个人仓库，找到 Actions 的标签页，进去创建一个自己的workflow，
创建完会在.github/workflows/main.yaml生成这样一个基础文件，下面通过注释简单说明一下每个命令
# main.yml
# 一个workflow，名字为CI
name: CI
# 触发 workflow 的事件，当有新push或者pr时执行
on:
push:
branches: [ master ]
pull_request:
branches: [ master ]
# 一个workflow由执行的一项或多项job
jobs:
# 一个job任务，任务名为build
build:
# runs-on 指定job任务运行所需要的虚拟机环境
runs-on: ubuntu-latest
# steps是每个Job的运行步骤，可以包含一个或多个步骤
steps:
# action命令，切换分支获取源码
# 来自官方脚本：https://github.com/marketplace/actions/checkout
- uses: actions/checkout@v2
# action命令，打印一行日志
- name: Run a one-line script
run: echo Hello, world!
# action命令，打印多行日志
- name: Run a multi-line script
run: |
echo Add other actions to build,
echo test, and deploy your project.
然后我们将react项目push到github仓库master分支时，就会触发Github Action了，可以在网站上看到构建日志
配置GitHub Actions部署到Github Pages
这里使用了一个别人已经写好的 Action ： JamesIves/github-pages-deploy-action， Github Action 市场的地址为：github.com/marketplace… 。
name: Build and Deploy
on: [push]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v2
- name: Install and Build 🔧
run: |
npm install
npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages
FOLDER: build
-
根据github文档生成
Personal access tokens并配置到当前仓库的Settings>Secrets下面
-
将react项目根目录下面的
package.json添加homepage字段 , 表示项目的根目录"homepage": "https://[username].github.io/github-deploy-demo"[username]为你的GitHub 用户名
-
然后再次推送到
master分支，Github Action会自动运行，等待任务构建完成，react项目会将打包后的静态文件部署至gh-pages分支了 -
设置Github Pages为
gh-pages分支将
github个人仓库Setting>Options下面的Github Pages设置为gh-pages分支，
打开Github Pages链接就可以看到效果了，我的预览地址是 huahua0406.github.io/react-deplo… 这个,可以看到已经生效了
最后
不管是React项目还是Vue项目都可以这么用，有兴趣的小伙伴不妨试一试, 附上我的项目地址
