使用Github Action和阿里云OSS持续集成部署Hexo博客

在上一篇文章《使用Netlify和Github持续部署Hexo博客》中,我介绍了使用Netlify和Github可以方便快捷的部署Hexo博客,类似的网站还有后起之秀Vercel,但是这些站点都身处国外,对于国内的用户即使有全球CDN但是访问速度仍然不是非常理想,如果你的域名已经备案,那么完全可以使用阿里云的OSS服务+CDN来部署静态网站,结合Github推出的Action,也能实现持续集成快速部署,而且对于访问量不大的个人博客主,阿里云的OSS和CDN服务几乎等于不要钱,非常实用。

创建阿里云OSS Bucket

阿里云OSS的每个存储空间称之为Bucket,首先我们要给博客创建一个Bucket,方法很简单,在阿里云对象存储的控制台上,点击“创建Bucket”即可,其中名称随意,地区可以选择离你较近的地区(其实无所谓,后续使用CDN加速,和地区关系不大),其中需要注意的就是读写权限,由于我们的网站是对外访问的,因此需要选择“公共读”,其他选项保持默认或者根据自身需要调整即可。

OSS Bucket的静态页面设置

OSS Bucket默认是需要输入完整的URL路径才能进行访问的,因此我们需要开启Bucket的静态页面设置(相当于Rewrite),这样当我们访问 example.com 的时候,就会自动打开 example.com/index.html 的页面了,开启方式也很简单,在Bucket的基础设置-静态页面中,填写默认首页和默认404页面的文件名即可,同时也要开通子目录首页,这样当访问子目录的时候也会展示自目录下的index.html,文件404规则可以选择Redirect即可。

使用Github Action持续集成生成静态页面

在之前的Netlify的方案里面,Netlify会自动监控Github仓库的变更,在变更后自动使用自己的NodeJS环境帮你编译生成好博客,并推送到它自己的CDN网络中,Github Action原理类似,但是功能更强大一些,只是配置起来也稍显繁琐。

首先,在仓库的Actions下面,选择创建你的Action Workflow

Workflow使用yml格式来书写,下面是编译博客的代码,可以参考我的备注了解详情

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
name: CI  #workflow的名字,这个自己取名即可

on:
push:
branches: [ master ] #这里代表在master分支有push的时候,来执行这个workfolw,根据你的需要设置

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2 #第一步显示checkout代码
- name: Use Node.js #设置环境为NodeJS,下面的Version可以设置Node的版本
uses: actions/setup-node@v1
with:
node-version: "14.x"
- run: npm install #这里就是安装完node之后执行的命令了,和本地生成Hexo博客命令一致。
- run: npm install -g hexo-cli
- run: hexo generate

自动上传阿里云OSS

这部分单独拿出来讲,要把博客发布到阿里云的OSS,我们需要用Github Action自动推送文件到OSS中,首先要生成阿里云的access key和secret,用于鉴权,首先我们进入阿里云的账户Access Key管理页面,创建我们的Access Key

生成的Key,我们保存到Github的Secrets里面,之所以这么保存,是为了保护Key的安全,在workflow中直接调用,而不是明文写入,避免泄露风险。

然后我们在刚才的workflow中,增加如下代码

1
2
3
4
5
6
- uses: manyuanrong/setup-ossutil@v1.0 #使用阿里云的ossutil工具
with:
endpoint: "oss-cn-hangzhou.aliyuncs.com" #这里是你的bucket的endpoint,根据你选择的区域不同会不一样,在Bucket页面查看即可
access-key-id: ${{ secrets.KEY }} #这里填写Key
access-key-secret: ${{ secrets.SECRET }} #这里填写Secret
- run: ossutil cp -rf public oss://jayshaoblog/ #这个命令就是把生成的public文件夹的内容,传到oss的Bucket中,选择rf的参数直接覆盖文件,把“jayshaoblog”替换为你的bucket名字

测试效果

到了这一步,你的设置已经完成了,你可以尝试把hexo的本地目录直接push到你的Github仓库,然后点击Action的Tab,即可看到所有的任务执行情况

切换到阿里云的OSS文件夹,也能看到生成好的静态文件了,后续就只用绑定域名包括CDN即可,这部分教程很多,就不赘述了。