GitHub配置自动部署pages与服务器
经过这次项目配置部署下来发现，GitHub 的 Actions 真的是个好东西，有了这个流水线，那么无论是GitHub Pages的静态部署，还是同步到服务器，都变得轻松简单起来，这里记录一下过程中的一些细节。
GitHub Actions主要依赖仓库中workflows目录下的yaml文件定义流水线步骤，这里定义内容如下，可将推到main分支的源码内容部署到GitHub Pages：
name: CI
# 在main分支发生push事件时触发。
on:
push:
branches:
- main
env: # 设置环境变量
TZ: Asia/Shanghai # 时区（设置时区可使页面中的`最近更新时间`使用时区时间）
jobs:
build: # 自定义名称
runs-on: ubuntu-latest # 运行在虚拟机环境ubuntu-latest
strategy:
matrix:
node-version: [12.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
env: # 设置环境变量
GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 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
26
27
28
29
30
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
其中的 ACCESS_TOKEN是个关键，需要在个人GitHub账号中进行创建：
Settings---> Developer settings--->Personal access tokens---> Generate new token。
然后定义个名字，接口可以全选。
接着需要将秘钥对放置到对应项目仓库的 Secrets中：
上边的内容都是定义了基础环境，然后调用了一个deploy的脚本，脚本内容如下：
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run build
# 进入生成的文件夹
cd docs/.vuepress/dist
# deploy to github pages
# echo 'eryajf.net' > CNAME
if [ -z "$GITHUB_TOKEN" ]; then
msg='deploy'
githubUrl=git@github.com:eryajf/eryajf.github.io.git
else
msg='来自github actions的自动部署'
githubUrl=https://eryajf:${GITHUB_TOKEN}@github.com/eryajf/eryajf.github.io.git
git config --global user.name "eryajf"
git config --global user.email "Linuxlql@163.com"
fi
git init
git add -A
git commit -m "${msg}"
git push -f $githubUrl master:gh-pages # 推送到github gh-pages分支
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
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
这里就能够自动打包构建，构建之后生成的静态文件又能够自动覆盖到 gh-pages 分支，然后只需要设置Pages即可实现提交源码之后自动构建的功能了：
如果想要将构建后的代码再自动同步到自己的服务器，则可以添加如下内容：
# 利用action把build好的文件上传到服务器/home/eryajf.github.io路径下,需要确认此目录已在服务端创建
- name: deploy file to server
uses: wlixcc/SFTP-Deploy-Action@v1.0
with:
username: 'root' #ssh user name
port: '2017' # 远程服务器ssh端口，默认22
server: 'eryajf.net' # 远程服务器IP
ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }} # 认证服务器秘钥对的私钥
local_path: 'docs/.vuepress/dist/*' # 对应我们项目打包后的静态文件路径
remote_path: '/home/eryajf.github.io' # 服务器上的路径
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
上边又多了一个私钥，这个私钥我们先在服务器执行如下命令进行创建：
$ ssh-keygen -m PEM # 然后一路回车就能创建成功
1
创建完成之后，需要把公钥放到服务器中：
$ cat /root/.ssh/id_rsa.pub >> /root/.ssh/authorized_keys
1
然后将私钥 /root/.ssh/id_rsa 以秘钥对的形式在项目中进行创建。
完整内容如下：
name: CI
# 在main分支发生push事件时触发。
on:
push:
branches:
- main
env: # 设置环境变量
TZ: Asia/Shanghai # 时区（设置时区可使页面中的`最近更新时间`使用时区时间）
jobs:
build: # 自定义名称
runs-on: ubuntu-latest # 运行在虚拟机环境ubuntu-latest
strategy:
matrix:
node-version: [12.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
env: # 设置环境变量
GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量
CODING_TOKEN: ${{ secrets.CODING_TOKEN }}
run: npm install && npm run deploy
# 利用action把build好的文件上传到服务器/home/eryajf.github.io路径下,需要确认此目录已在服务端创建
- name: deploy file to server
uses: wlixcc/SFTP-Deploy-Action@v1.0
with:
username: 'root' #ssh user name
port: '2017' # 远程服务器ssh端口，默认22
server: 'eryajf.net' # 远程服务器IP,我这里填写域名是因为解析到了服务器IP
ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }} # 认证服务器秘钥对的私钥
local_path: 'docs/.vuepress/dist/*' # 对应我们项目打包后的静态文件路径
remote_path: '/home/eryajf.github.io' # 服务器上的路径
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
37
38
39
40
41
42
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
37
38
39
40
41
42
这样就实现了当我们提交项目源码之后，自动将项目部署到 GitHub Pages以及自己服务器的指定目录中。
上次更新: 2024/01/11, 14:21:50
|