GithubPages博客自定义域名HTTPS化

本文最后更新于:2021年6月18日 晚上

玩博客从 16 年到现在,主题不知道换了多少个,但是图床服务一直依赖的七牛云没有换过,也许是白嫖惯了,没往七牛云充过一毛钱,甚至账单里显示欠了 2 块钱 😆。
几个月前七牛云更改了测试域名的限制,每个 bucket 分配的域名只有一个月的有效期,到期自动释放无法使用。因为这个原因,临时用了七牛玉的文件同步服务,每个月新增一个 bucket,然后再把域名释放了的 bucket 同步到新的 bucket 中,再手动全局替换博客中所有图片的域名,很是麻烦。但是也一直没找到解决的方法。
而且因为七牛云的测试域名是 http 的,也一直因为这个原因,导致博客迟迟没有这么久 HTTPS 化。
直到前两天,实在受不了每个月的重复机械操作,想办法解决了图床的问题,同时顺便把博客搞成了 HTTPS,以供参考。

图床迁移

众所周知,在 https 域名网页中,无法引用非 https 的资源,比如图片,会导致资源无法加载。
所以如果想要将博客 HTTPS 化,首当其冲就是解决图床的问题,即需要一个 https 的图床。
如果使用七牛云,只能自定义域名,笔者没有其他的域名,也觉得备案流程很麻烦,只能放弃这一想法。
如果使用公开的其他图床,又害怕不够稳定,导致资源图片全部丢失就太不划算了,这条路也只能放弃。
最终选择在 github 上开了一个新的仓库,专门用于存放博客的图片与资源。

七牛云提供了一个 qshell 工具可以快速下载 bucket 中的所有文件

首先去七牛云后台 获取 ak/sk

然后设置 qshell 的密钥

1
./qshell account ak sk

再添加一个 qn.conf 配置文件,修改dest_dir 为保存下载文件的位置,修改 bucket 为你的七牛存储库名称,cdn_domain 修改为 bucket 分配的测试域名(如果测试域名到期了,可以新建一个不同于当前 bucket区域的 bucket,比如当前是华北的,就创建一个华南的 bucket,可以通过跨区域同步将旧的 bucket 文件同步到新的 bucket 中,配置中的 bucket 值也要改成新的 bucket 名称)

1
2
3
4
5
6
7
8
9
10
11
12
{
"dest_dir" : "/home/wejan/Desktop/images",
"bucket" : "test-bucket",
"prefix" : "",
"suffixes" : "",
"cdn_domain" : "http://opvasdfx.bkt.clouddn.com",
"referer" : "",
"log_file" : "download.log",
"log_level" : "info",
"log_rotate" : 1,
"log_stdout" : false
}

接下来就是使用 qshell 来下载文件了(如果是使用了跨区域同步,需要等待文件全部同步完成后再进行)。

1
./qshell download qn.conf

等待全部下载完毕就好了。

下面就是去 GitHub 创建一个仓库,将下载的文件全部推送到这个仓库中。

1
2
3
4
5
6
cd /home/wejan/Desktop/images // 进入下载目录
git init
git add *
git commit -m "init"
git remote add origin git@github.com:Mosiki/blog-imgs.git // 修改成你用于存放图片的 repo 地址
git push origin

图床加速

由于国内网络环境的原因,可能 GitHub 上的图片无法加载出来,就需要用到加速服务,也是免费的。
文件前缀格式改成如下:
https://cdn.jsdelivr.net/gh/GitHub 用户名/仓库名称/
例如笔者的:
https://cdn.jsdelivr.net/gh/Mosiki/blog-imgs

文件原链接(/blog 是 blog-imgs 下的一个目录名称):
https://raw.githubusercontent.com/Mosiki/blog-imgs/master/blog/avatar.png
加速后的链接:
https://cdn.jsdelivr.net/gh/Mosiki/blog-imgs/blog/avatar.png

批量把博客与配置中的图片前缀替换成加速域名 https://cdn.jsdelivr.net/gh/GitHub 用户名/仓库名称/

在网上找了批量替换的脚本发现都运行不了,索性直接用 idea 打开 hexo 的目录 command + shift + r 进行全局域名替换。

图床上传配置

图床配置好了,为了方便上传图片到新图床中,笔者使用了 PicGO 这个工具。可以直接将 GitHub 当成图床使用,配置好自定义链接,上传图片后,可以直接生成加速后的图床链接。具体配置参见 PicGO 的文档

为了直接生成加速的图床链接,还需要一点小工作。可以参考笔者的配置,修改为你的仓库,以后就可以很方便地使用 GitHub 图床了~

博客HTTPS化

啰里吧嗦了半天,终于来到本文主题,如何实现博客自定义域名 https 化,其实这个 GitHub 已经提供了这个功能,也无需借助其他的任何第三方服务即可实现。

登录你的域名管理后台,笔者是在 DNSpod,添加如下两条 A 记录和一条 CNAME 配置

笔者博客的仓库是 mosiki.github.io 所以在 CNAME 记录中的值填的是 mosiki.github.io. 这里改成你自己的博客 repo 地址即可。

打开博客 repo 的 setting -> pages 页面,勾选开启 https 的按钮,等待自动配置证书即可。

再访问你的博客,看是否 https 已经生效了呢~

本文完~