使用 freecdn-js 提高 hexo 博客的 cdn 稳定性（接入透明模式）

由于 cdn.jsdelivr.net 在国内不太稳定，替代的 cdn.jsdmirror.com 稳定性稍好，但是也不是 100%稳定，因而需要一个脚本实时切换到合适的 CDN。freecdn-js能实现这个需求。freecdn-js 是纯前端的，使用 service worker，只需要插入一段 js 代码就可以，因此改造成本很低。但是我的文件（图片、js 等）储存在 GitHub 图床，而 freecdn-js 本身需要被加速的文件的 hash 值，因此需要自己写脚本处理下载图片并计算。因为图片等文件的 cdn 链接是直接写在 .md 文件中的，所以写了一个正则脚本来提取 cdn 的链接。

脚本使用方法

cdn 链接处理脚本

我写的脚本发布在 GitHub 上，匹配了 ![img](url)、{%link%}、{%image%}、headimg 四个 tag。脚本请到 GitHub 下载。

可以屏蔽相关 cdn（更改 host 或用 v2rayN 路由屏蔽）测试 freecdn-js 是否能切换备用 cdn。

扩展教程在这里：使用 npm 空间存放图片和 html 并利用 cdn 加速

需要的包版本

1
    urllib3   1.25.11
2
    nodejs    16.10.0
3
    freecdn   0.3.1

Note

以下引用 GitHub 上的 README.md 文件

README.md

Windows 的大坑！

Warning

此为大坑！务必阅读

如果利用 Windows 来写博客，那么提交 git 的时候会出现 LF will be replaced by CRLF the next time Git touches it 的提示，CR（回车）就是 \r，LF（换行）就是 \n，Windows 平台默认换行符就是 CRLF(\r\n)，此变换会导致本地文件的 hash 和存放在 npm 或者 git 空间的文件的 hash 不一致；需要运行以下命令行:

#提交检出均不转换
git config --global core.autocrlf false

Note

适用于 Windows 系统，且只在 Windows 上开发的情况。在提交、检出时不会对 CRLF/LF 换行符进行转换

接入透明模式【可选】

Warning (建议暂时不配置)

经过一段时间的观察，透明模式会起到严重的“减速”作用，FCP 延后非常多。本来想试试 http2 服务器一次性推送 freecdn.js 和相关的 txt 的，结果发现 chrome 从 106 版本就不支持 http2 服务器推送了。谷歌给出的替代方案是使用 103 early hints，但是 nginx 现在还不支持。谷歌给出的另一个代替方案是传统的 link rel=preload。link rel=preload 确实可以在一次性推送 freecdn.js 和相关的 txt，但是在安装了 Service Worker 之后依然会再次加载 freecdn.js 和相关的 txt，结果就是速度没变，流量还浪费不少。又或者是我设置的问题，，，

配置透明模式

freecdn 透明模式的优势和 配置文件 看下面的链接

freecdn 透明模式

博客使用render.com托管静态资源；因为 freecdn 的透明模式仅仅提供了 nginx 配置，而且 render 刚刚好也支持 docker，那就直接用nginx-docker吧。

Tip

render.com 免费提供每月 100g 流量、750 小时实例时间、500min 构建时间、0.1 cpu 和 512m RAM

Warning

Render spins down a Free web service that goes 15 minutes without receiving inbound traffic. Render spins the service back up whenever it next receives a request to process.Learn more

首先在你的博客根目录下的 source 创建 Dockerfile 文件。（生成博客的时候会把 source 内的文件移动到将要被上传到 repo 的文件夹内）

1
FROM nginx
2
COPY ./ /usr/share/nginx/html
3
COPY ./freecdn-boot.conf /etc/nginx
4
COPY ./nginx.conf /etc/nginx/nginx.conf
5
EXPOSE 443

然后下载 freecdn 的两个 配置文件，freecdn-boot.conf 和 nginx.conf，同样放在博客根目录，只需要改动 nginx.conf。

1
events {
2
  worker_connections      1024;
3
}
4

5
http {
6
  server {
7
    # freecdn nginx conf
8
    include freecdn-boot.conf;
9

10
    root                  /usr/share/nginx/html;
11

12
    expires               1h;
13
    default_type          text/plain;
14
    include               mime.types;
15

16
    # HTTPS conf
17
    listen                443;
18

19
    location /works {
20
      return              200  "it works";
21
    }
22

23
    gzip                  on;
24
    gzip_static           on;
25
    gzip_types
26
      text/plain
27
      text/xml
28
      text/javascript
29
      text/css
30
      application/x-javascript
31
      application/json
32
      application/xml
33
      application/xml+rss
34
    ;
35
  }
36
}

br 和 gzip 压缩在 render 平台自动开启，见官网docs。

上传到 GitHub reop（hexo d）后，在 render.com 创建一个 web service，然后选择你的 repo 部署就可以了。

白嫖到底！

由于免费的 render web service 会在 15 分钟之内没有连接访问的情况下断开，并在下一次访问之后重启启动，而重新启动需要较长时间；因此用 cf worker 去定时访问网站。

需要一个 cf 账号，没有的先去注册

点击左侧的 worker and page，创建一个 worker，这个时候不能改动代码，先确认创建。之后点击 触发器 标签，并找到 Cron 触发器，填入 3/13 * * * *，这行代码表示在每个小时过 3 分钟之后触发一次定时器，然后每过 13 分钟再触发一次（如果和 每个小时过 3 分钟 这一条件冲突，则重置触发器，即在每个小时过 3 分钟之后再次触发，如此反复）。设置效果如下图所示

之后编辑 worker。点击 快速编辑，写入以下代码

1
export default {
2
  async scheduled(event, env, ctx) {
3
    var res = await fetch('https://xxx.com/favicon.ico')
4
    var data = res.json()
5
    console.log(data)
6
  },
7
}

async scheduled 表时当触发器触发时运行代码（题外话：这是不是可以当作一个免费的攻击服务器？？），fetch 代表访问你的网站的资源，await 似乎是必需的，因为没有 await 的话在 render 的 log 里面看不到 worker 的访问记录。