使用Github Action自动打包部署Vuepress博客
Github提供了Action功能,可以在如push行为的时候执行仓库.github/workflows下的yml文件,利用这个功能,可以完成静态博客的自动发布部署。
这里我分别部署到了Github和Coding。
首先需要创建Token:
Github:https://github.com/settings/tokens
Coding:https://[用户名].coding.net/user/account/setting/tokens
然后设置到Github仓库的环境变量里:
名字可以和我一样 github使用: ACCESS_TOKEN
coding使用: CODING_TOKEN
之后编写ci.yml,放到.github/workflows下
name: CI
#on: [push]
# 在master分支发生push事件时触发。
on:
push:
branches:
- master
jobs: # 工作流
build: # 自定义名称
runs-on: ubuntu-latest #运行在虚拟机环境ubuntu-latest
strategy:
matrix:
node-version: [10.x]
steps: # 步骤
- name: Checkout # 步骤1
uses: actions/checkout@v1 # 使用的动作。格式:userName/repoName。作用:检出仓库,获取源码。 官方actions库:https://github.com/actions
- name: Use Node.js ${{ matrix.node-version }} # 步骤2
uses: actions/setup-node@v1 # 作用:安装nodejs
with:
node-version: ${{ matrix.node-version }} # 版本
- name: run deploy.sh # 步骤3 (同时部署到github和coding)
env: # 设置环境变量
GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量
CODING_TOKEN: ${{ secrets.CODING_TOKEN }}
run: npm install && npm run deploy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
编写脚本文件,deploy.sh
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
npm run build # 生成静态文件
cd docs/.vuepress/dist # 进入生成的文件夹
# deploy to github
echo 'dra-m.com' >CNAME
if [ -z "$GITHUB_TOKEN" ]; then
msg='deploy'
githubUrl=[email protected]:moxiaolong/moxiaolong.github.io.git
else
msg='来自github action的自动部署'
githubUrl=https://moxiaolong:${GITHUB_TOKEN}@github.com/moxiaolong/moxiaolong.github.io.git
git config --global user.name "moxiaolong"
git config --global user.email "[email protected]"
fi
git init
git add -A
git commit -m "${msg}"
echo "上传github开始"
git push -f $githubUrl master:master # 推送到github
echo "上传github完成"
# deploy to coding
if [ -z "$CODING_TOKEN" ]; then # -z 字符串 长度为0则为true;$CODING_TOKEN来自于github仓库`Settings/Secrets`设置的私密环境变量
codingUrl=[email protected]:moxiaolong/dram/dram.git
else
#注意,coding访问令牌的用户名(替换JPzWHIuoAv)是在https://[登陆用户名].coding.net/user/account/setting/tokens显示的
codingUrl=https://JPzWHIuoAv:${CODING_TOKEN}@e.coding.net/moxiaolong/dram/dram.git
fi
echo "上传coding开始"
git push -f $codingUrl master # 推送到coding
echo "上传coding完成"
cd -
rm -rf docs/.vuepress/dist
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
在package.json中设置脚本
{
"scripts": {
"deploy": "bash deploy.sh"
}
}
1
2
3
4
5
2
3
4
5
之后push了项目后,就会执行ci.yml --> 调用npm run deploy 调用->deploy.sh 了
上次更新: 7/19/2024