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

博客原文 blog.tooln.cn

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管理的

  # 目前最新的是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

# 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://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配置项

font:
  enable: true

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

4.修改Valine

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

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

...
<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

{%- 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使用

npm i patch-package -D

生成补丁包

npx patch-package hexo-next-valine

_config.next.yml增加配置项

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