折腾笔记 | 我的 Hexo + Butterfly 博客优化全记录 (๑•̀ㅂ•́)و✧

最近闲来无事（或者说有点闲得蛋疼），又开始折腾我的博客了。作为一个对“卡一下”都忍不了的人，总感觉博客访问起来不够顺畅，特别是国内用户，有时候加载个图片、拉个 JS 都得等半天。所以，干脆一不做二不休，来一次彻头彻尾的优化升级！从访问速度到功能体验，从国内到国外，全都给我安排上！这篇笔记就来记录下这次“魔改”的全过程，给同样爱折腾的兄弟们踩踩坑。

前言：为啥又双叒叕开始折腾了？ (๐_๐)

我的博客虽然就几篇文章，但访问起来总感觉“慢半拍”。尤其是国内用户，有时候点开一篇文章，图片半天出不来，JS/CSS 也磨磨蹭蹭的。作为一个对“丝滑”体验有执念（或者说有点小强迫症）的人，这种感觉真的很难受。所以，这次下定决心，必须把速度、稳定性和功能都给它搞上去！

核心优化点概览 (๐_๐)

这次优化主要围绕以下几个方面展开：

  1. CDN 策略升级： 为核心静态资源选择更快的 CDN，并实现国内/国际智能回退。
  2. 插件配置调优： 确保所有插件（评论、搜索、统计等）高效、稳定运行。
  3. 主题细节打磨： 调整 Butterfly 主题配置，优化视觉效果和交互体验。
  4. SEO 与可访问性： 完善站点地图、结构化数据，提升搜索引擎友好度。

CDN 优化：让全球用户都能丝滑访问 (๐_๐)

这是本次优化的重头戏。默认的 jsDelivr 在国内某些地区或网络环境下表现不稳定，甚至会出现资源 404 的情况。我的目标是：国内用户访问快，国外用户访问稳。

1. 选择合适的主 CDN

经过一番调研和测试，我决定将主要的第三方库（如 Twikoo、APlayer、Fancybox 等）的 CDN 切换到在国内访问速度更快的提供商，例如 s4.zstatic.net 或 cdn.bootcdn.net。这些 CDN 在国内有较好的节点分布。

2. 实现 JS/CSS 资源的智能回退加载

光换 CDN 还不够，万一主 CDN 挂了怎么办？为了极致的稳定性，我编写了一段自定义的 JavaScript 脚本，实现了资源的主备 CDN 自动切换。

  • 原理： 动态创建 <script> 和 <link> 标签，先尝试从主 CDN 加载资源。如果加载失败（onerror 事件触发），则自动切换到备用 CDN（如 jsDelivr）重新加载。
  • 实现： 这段脚本被注入到 _config.butterfly.yml 的 inject.bottom 配置项中。它会按顺序加载所有需要回退的关键资源。
  • 效果： 极大提升了资源加载的成功率和速度，即使某个 CDN 出现问题，用户也能平滑地加载到所需资源。

3. 图片资源的 CDN 加速

对于博客中的图片，特别是 source 目录下的图片，我也考虑过使用图床或对象存储（如阿里云 OSS、腾讯云 COS）配合 CDN 来加速。但由于目前图片量不大，且存储在 GitHub 仓库中，暂时沿用现有方案，但保留了未来迁移的选项。

插件配置调优：稳定是第一要务 (๐_๐)

一个博客的功能很大程度上依赖于各种插件。确保它们稳定、高效地运行至关重要。

1. 评论系统 (Twikoo) 优化

Twikoo 是一个部署在 Vercel 上的轻量级评论系统，国内访问友好。

  • CDN 加速： 将 Twikoo 的 JS 文件也纳入了上述的自定义 CDN 回退加载脚本中。
  • 配置检查： 确认 _config.butterfly.yml 和 _config.yml 中的 Twikoo 配置（如 envId）正确无误。
  • 性能监控： 通过浏览器开发者工具观察 Twikoo 脚本的加载时间和对页面性能的影响。

2. 搜索功能 (Algolia) 优化

Algolia 提供了强大的站内搜索能力。

  • 索引更新： 确保在每次部署前都运行 hexo algolia 命令，将最新的文章内容索引到 Algolia。
  • 搜索体验： 调整了搜索结果的显示样式和数量，使其更符合博客的整体风格。

3. 统计与分析 (不蒜子/Umami/Google Analytics)

  • 不蒜子 (Busuanzi)： 简单易用的页面计数器，继续保留。
  • Umami (自建)： 更注重隐私的网站分析工具。确认其部署状态稳定，数据收集正常。
  • Google Analytics： 用于获取更详细的用户行为数据。检查了跟踪代码的加载情况和配置。

主题细节打磨：颜值与体验并重 (๐_๐)

Butterfly 主题本身已经非常优秀，但仍有一些细节可以打磨。

1. 代码块与高亮

  • 选择了更护眼的 light 代码高亮主题。
  • 启用了代码复制按钮，方便读者复制代码片段。

2. 图片灯箱与懒加载

  • 启用了 fancybox 作为图片灯箱，提升图片浏览体验。
  • 考虑到对 SEO 的潜在影响，暂时未启用全局图片懒加载，但保留了该选项。

3. 自定义样式与脚本

  • 通过 inject.head 和 inject.bottom 注入了一些自定义的 CSS 和 JS，用于微调样式和添加一些小功能（如右键菜单）。
  • 确保自定义代码不会与主题核心功能冲突。

4. 响应式与移动端优化

  • 测试了博客在不同尺寸设备上的显示效果，确保移动端体验良好。
  • 启用了移动端的点击特效（clickShowText）。

SEO 与可访问性提升 (๐_๐)

一个优秀的博客不仅要好看好用，还要让搜索引擎“看得见、看得懂”。

1. 站点地图 (Sitemap)

  • 同时生成了标准的 sitemap.xml 和百度专用的 baidusitemap.xml。
  • 确保这些文件能被搜索引擎正确抓取。

2. 结构化数据 (Structured Data)

  • 启用了主题自带的结构化数据支持，帮助搜索引擎更好地理解页面内容。

3. 关键词与描述

  • 在 _config.yml 中设置了全局的 keywords 和 description，并在每篇文章的 Front-matter 中进行了细化。

总结与反思 (๐_๐)

经过这一轮深度优化，我的博客在访问速度、稳定性和功能完善度上都有了显著提升。通过自定义 CDN 回退脚本，实现了资源加载的高可用性；通过对插件和主题的细致调优，确保了各项功能的顺畅运行；通过 SEO 方面的加强，为博客的长期发展打下了基础。

当然，优化是一个持续的过程。技术在发展，需求在变化，未来可能还需要根据实际情况进行调整。例如，随着图片数量的增加，可能会考虑专业的图床方案；随着访问量的增长，可能会进一步优化性能或考虑静态资源的进一步压缩。

这次折腾让我对 Hexo 和 Butterfly 的运作机制有了更深入的理解，也收获了满满的成就感。希望这篇记录能给正在优化自己博客的你带来一些启发。Keep hacking, keep blogging! (๑•̀ㅂ•́)و✧