CDN失效的解决办法：在Edge中发现页面加载缓慢，本地hugo server -D发现本地依旧缓慢，Edge中F12发现原先的CDN失效，每次请求时间很长。现在，我将把整个发现和解决问题的过程分享出来，希望能帮助到有类似困扰的朋友。

问题发现

在一次日常浏览自己的 Hugo 博客时，我明显感觉到页面加载速度变得异常缓慢。打开浏览器的开发者工具，在网络面板中发现 Font Awesome 图标无法正常显示，jQuery 相关的交互功能也失效了。查看网络请求，发现引入的 CDN 资源加载时间过长，甚至出现了请求超时的情况。具体涉及的 CDN 代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>

排查过程

寻找代码位置

搜索相关的 CDN 链接关键词，最终在一个模板文件（HUGO\geo-hugo-papermod\layouts\partials\extend_head.html）中找到了这些代码：

{{- /* Head custom content area start */ -}}
{{- /*     Insert any custom code (web-analytics, resources, etc.) - it will appear in the <head></head> section of every page. */ -}}
{{- /*     Can be overwritten by partial with the same name in the global layouts. */ -}}
{{- /* Head custom content area end */ -}}

{{- /* Head custom content area start */ -}}
{{- /*     Insert any custom code (web-analytics, resources, etc.) - it will appear in the <head></head> section of every page. */ -}}
{{- /*     Can be overwritten by partial with the same name in the global layouts. */ -}}
{{- /* Head custom content area end */ -}}

{{ if (.Params.mermaid) }}
<script defer src="https://unpkg.com/mermaid@8.8.1/dist/mermaid.min.js"></script>
{{ end }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>


<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = ""; 
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

分析可能原因

经过分析，我认为 CDN 资源加载缓慢或失效可能是由以下几个原因导致的：

  1. 网络问题：CDN 服务器可能由于维护、故障或网络拥堵等原因，导致资源无法正常访问。
  2. 缓存问题：浏览器缓存了旧的资源文件，或者 Hugo 本身的缓存机制影响了新资源的加载。
  3. 配置问题：Hugo 的配置文件或模板文件可能存在错误，导致资源链接不正确。

解决办法

更换 CDN 服务

为了避免原 CDN 服务器的问题，我决定更换 CDN 服务。对于 Font Awesome，我将链接替换为 cdnjs 的 CDN：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

对于 jQuery，我也使用 cdnjs 的 CDN：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

清除缓存

为了确保浏览器加载的是新的资源，我清除了浏览器缓存。同时，为了避免 Hugo 缓存的影响，我使用 hugo server -D --gc 命令重新启动开发服务器，其中 --gc 选项会触发垃圾回收，清除无用的缓存文件。

综合修改后的代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

注意：不能直接改public文件夹下的index.html，重启Hugo后会覆盖之，解铃还需系铃人！