使用Github Action部署静态网站
发布于
# 前端
目录
生成 token
- 进入 Github 生成授权 token 的页面,创建一个 token,修改名称并选择所有仓库。
- 将仓库权限设置中的 Content 项,设置为读和写。
- 最后点击确认生成 token,并复制,注意 ⚠️ 刷新之后就没有办法复制了。
设置环境变量
- 进入到项目设置页面,选择添加Actions 的环境变量。
- 输入变量名称
ACCESS_TOKEN
,密钥一栏粘贴刚才复制的 Token,点击添加就完成了。
项目中添加配置文件
- 在项目的更目录下创建
.github/workflows/static.yml
。
name: GitHub Actions Build and Deploy
on:
push:
branches:
- main #触发自动化部署的分支
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️ #从触发分支检出代码
uses: actions/checkout@v3
with:
persist-credentials: false
- name: Install and Build 🔧 #安装依赖并且打包静态文件
run: |
npm i
npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
BRANCH: gh-pages #部署的分支
FOLDER: dist #打包后静态文件所在的位置
CLEAN: true
- 然后提交代码就开始自动部署了。