jsdelivr 被墙，hexo-next 切换为自定义 CDN

发表于 更新于 阅读次数： Waline：

Thank you all for your tests, feedback and support. I am personally sorry for the issues we had today.
We can consider the issue as resolved, now its a question of DNS propagation getting to everyone.
Our official announcement regarding the problems today:
Unfortunately today jsDelivr unexpectedly lost its ICP license in China. As effect the regional CDN disabled our account.

This resulted in the extended outage we had in mainland China and Taiwan.

Other regions were unaffected.

We understand how difficult it was for our users to experience this unique situation.

From now on all Chinese traffic will be served by “near China” locations provided by global CDN providers.

This will have the additional benefit of better failover logic in the future.

https://github.com/jsdelivr/jsdelivr/issues/18348#issuecomment-997777996

在 jsDelivr 被吊销 ICP 许可证五个月后，cdn.jsdelivr.net 开始遭到污染，非魔法上网已经不能正常加载，各中原因不做讨论，无外乎滥用

本博客使用 Hexo 框架和 NexT 主题，默认使用的是 JSDelivr 作为 静态资源的 CDN 服务提供商，为了能正常访问，所以需要切换到国内 CDN

1. 升级 Next 主题

hexo-theme-next 在 v8.9.0已经支持自定义 cdn

  • 使用 npm 管理的

    1
    2
    # 目前最新的是8.11.1，大于8.9.0就可以
    npm install hexo-theme-next@8.11.1

  • 使用 git 仓库管理的使用 git pull

2. 修改 Next 主题 CDN

参照 issuses

运营方 节点 地域 链接及格式 上游 备注
75CDN (360 前端) 360 自有节点？ 全球 https://lib.baomitu.com/{cdnjs 格式} cdnjs
知乎 阿里云 全球 https://unpkg.zhimg.com/{unpkg 格式} unpkg
百度 百度云 全球 https://code.bdstatic.com/npm/{unpkg 格式} 内建 npm 镜像（上游淘宝 cmpnjs）
饿了么 阿里云 中国大陆 https://npm.elemecdn.com/{unpkg 格式} unpkg?

修改本地_config.next.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# It's recommended to use the same version as in `_vendors.yml` to avoid potential problems.
# Remember to use the HTTPS protocol of CDN links when you enable HTTPS on your site.
vendors:
  # The CDN provider of NexT internal scripts.
  # Available values: local | jsdelivr | unpkg | cdnjs | custom
  # Warning: If you are using the latest master branch of NexT, please set `internal: local`
  internal: local
  # The default CDN provider of third-party plugins.
  # Available values: local | jsdelivr | unpkg | cdnjs | custom
  # Dependencies for `plugins: local`: https://github.com/next-theme/plugins
  plugins: custom

  # Custom CDN URL
  # For example:
  # custom_cdn_url: https://cdn.jsdelivr.net/npm/${npm_name}@${version}/${minified}
  # custom_cdn_url: https://fastly.jsdelivr.net/npm/${npm_name}@${version}/${minified}
  # custom_cdn_url: https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file}
  # jsdelivr: `https://cdn.jsdelivr.net/npm/${name}@${version}/${file}`,
  # unpkg : `https://unpkg.com/${name}@${version}/${file}`,
  # cdnjs : `https://cdnjs.cloudflare.com/ajax/libs/${alias || name}/${version}/${file.replace(/^(dist|lib|)\/(browser\/|)/, '')}`
  custom_cdn_url: https://lib.baomitu.com/${cdnjs_name}/${version}/${cdnjs_file}

3. 修改谷歌字体库

参照别做无用功 - 禁止谷歌字体真的能加速网站访问速度吗？

修改_config.next.yml 配置项 

1
2
3
4
5
font:
  enable: true

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host: https://fonts.geekzu.org

4. 修改 Valine

npm install next-theme/hexo-next-valine#v2.0.0
新版 (2.1.0) 已经更换 CDN，可以直接使用

博客使用了 Valine 作为评论系统，依赖于 next-theme/hexo-next-valine，查看源码发现将 cdn.jsdelivr.net 写死在代码里

https://github.com/next-theme/hexo-next-valine/blob/main/valine.njk

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
...
<script>
document.addEventListener('page:loaded', () => {
  NexT.utils.loadComments(CONFIG.valine.el)
    .then(() => NexT.utils.getScript(
      'https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js',
      { condition: window.Valine }
    ))
    .then(() => {
      new Valine(CONFIG.valine);
    });
});
</script>
...
<script>
NexT.utils.loadComments('#valine-comments', () => {
  NexT.utils.getScript('https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js', () => {
    new Valine(Object.assign({{ config.valine | safedump }}, {
      el: '#valine-comments',
      path: {{ url_for(page.path) | replace(r/index\.html$/, '') | safedump }},
      serverURLs: {{ serverURLs | safedump }}
    }));
  }, window.Valine);
});
</script>

修改 node_modules/hexo-next-valine/valine.njk

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
{%- if next_data %}

{{ next_data('valine', config.valine, {
  el: '#valine-comments',
  path: url_for(page.path) | replace(r/index\.html$/, ''),
  libUrl: config.valine.libUrl | default('https://lib.baomitu.com/valine/latest/Valine.min.js',true),
  serverURLs: config.valine.serverURLs or 'https://' + config.valine.appId.slice(0, 8) | lower + '.api.lncldglobal.com'
}) }}
<script>
document.addEventListener('page:loaded', () => {
  NexT.utils.loadComments(CONFIG.valine.el)
    .then(() => NexT.utils.getScript(
      CONFIG.valine.libUrl,
      { condition: window.Valine }
    ))
    .then(() => {
      new Valine(CONFIG.valine);
    });
});
</script>

{%- else %}

{%- set serverURLs = config.valine.serverURLs or 'https://' + config.valine.appId.slice(0, 8) | lower + '.api.lncldglobal.com' %}
{%- set libUrl =  config.valine.libUrl | default('https://lib.baomitu.com/valine/latest/Valine.min.js',true) %}
<script>
NexT.utils.loadComments('#valine-comments', () => {
  NexT.utils.getScript('{{libUrl}}', () => {
    new Valine(Object.assign({{ config.valine | safedump }}, {
      el: '#valine-comments',
      path: {{ url_for(page.path) | replace(r/index\.html$/, '') | safedump }},
      serverURLs: {{ serverURLs | safedump }}
    }));
  }, window.Valine);
});
</script>

{%- endif %}

使用 patch-package 修改 node_module，配合 github/actions 使用

1
npm i patch-package -D

生成补丁包

1
npx patch-package hexo-next-valine

_config.next.yml 增加配置项

1
2
3
4
5
6
valine:
  enable: true
  appId: xx # Your leancloud application appid
  appKey: xx # Your leancloud application appkey
  # library CDN url, you can set this to your preferred CDN
  libUrl: https://cdnjs.cloudflare.com/ajax/libs/valine/1.4.18/Valine.min.js