使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源（二）

通过 jsDelivr 进一步加速 GitHub Pages 博客静态资源加载的核心措施包括图片资源加速和站内搜索 JSON 资源加速，具体实施步骤如下：

问题背景：文章中引用的图片存储在博客源码根目录的 images 文件夹下，手动替换为 jsDelivr CDN 地址效率低且维护困难。解决方案：利用 Jekyll 的 Liquid 模板语法自动批量替换图片路径。

• 关键代码逻辑：

  定义基础路径变量 assets_base_url，根据是否启用 jsDelivr 加速切换路径：

  启用时：

  https://cdn.jsdelivr.net/gh/
  [用户名]/[仓库名]@master

  禁用时：默认博客域名（如

  https://mazhuang.org
  ）。

  拼接图片完整路径变量 assets_images_url，格式为 src="[基础路径]/images"。

  在模板中通过 {{ content | replace: 'src="/images', assets_images_url }} 自动替换所有图片路径。

• 优势：

  无需手动修改每张图片的引用路径。

  可通过配置开关（如 site.cdn.jsdelivr.enabled）灵活切换 CDN 或本地路径。

问题背景：Simple-Jekyll-Search 依赖的 JSON 文件需经过 Jekyll 编译生成，而 jsDelivr 默认缓存编译前的源码文件，无法直接加速。解决方案：通过 GitHub Actions 自动编译博客并推送编译结果至独立分支，再通过 jsDelivr 引用该分支的 JSON 文件。

• 关键步骤：

  生成 Personal Access Token：

  在 GitHub 设置中生成 Token，勾选 public_repo 权限，用于后续自动化推送。

  配置仓库 Secrets：

  在博客仓库的 Settings > Secrets 中添加 ACCESS_TOKEN，值为上一步生成的 Token。

  创建 GitHub Actions 工作流：

  在 .github/workflows/ci.yml 中定义自动化流程：

  触发条件：向 master 分支推送代码时触发。

  步骤：

  使用 actions/checkout@v2.3.1 拉取源码。

  通过 actions/setup-ruby@v1 设置 Ruby 2.7 环境。

  安装 Jekyll 依赖并编译博客（bundle exec jekyll build）。

  使用 JamesIves/github-pages-deploy-action@3.6.2 将编译生成的 _site 目录推送至 built 分支。

  修改 JSON 文件引用路径：

  在模板文件中根据是否启用 jsDelivr 加速动态切换路径：

  {% if site.cdn.jsdelivr.enabled and site.url contains '码志' %} json: '
  https://cdn.jsdelivr.net/gh/mzlogin/mzlogin.github.io@built/assets/search_data.json'
  ,{% else %} json: '{{ site.url }}/assets/search_data.json',{% endif %}
• 效果：

  JSON 文件通过独立分支 built 托管，jsDelivr 可直接缓存编译后的文件。

  自动化流程减少人工操作，确保每次更新后 CDN 资源同步更新。

• 性能提升：

  图片和 JSON 资源通过 CDN 加速后，加载时间显著缩短，尤其对全球用户访问体验改善明显。

  自动化流程避免了手动编译和推送的繁琐操作，降低维护成本。

• 注意事项：

  GitHub Actions 配额：免费版 GitHub Actions 有每月执行时间限制，需合理规划触发频率。

  CDN 缓存失效：jsDelivr 默认缓存时间较长，若需紧急更新资源，可通过添加版本号参数（如 ?v=2）强制刷新。

  分支管理：确保 built 分支仅用于存储编译结果，避免与源码分支混淆。

相关资源：

• 完整源码参考：
  mzlogin/mzlogin.github.io
• 扩展阅读：[使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源（一）](使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源)