作为一名独立开发者（Indie Hacker），我们不仅要创造好的产品，也要用心经营自己的博客，与用户和同行建立连接。在这个信息爆炸的时代，如何让关注你的人第一时间获取你的最新动态？除了社交媒体，古老而高效的 Feed (RSS/Atom) 订阅依然是技术圈最优雅的选择。

幸运的是，为我们所钟爱的 Hexo 博客和优雅的 Butterfly 主题添加 Feed 功能非常简单。通过一个官方插件和几行简单的配置，你就能让你的博客拥有被专业阅读器订阅的能力。

本文将手把手带你完成整个过程，让你的读者可以轻松订阅你的创作。

为什么要添加 Feed？

在开始操作前，你可能会问，现在还有人用这个吗？答案是肯定的。

  1. 稳定的读者群体: Feed 用户通常是信息的重度消费者，他们希望将自己关注的信源聚合在一起，不受算法干扰。这是你最忠实的读者群体。
  2. 内容分发: 很多自动化工具和内容平台可以通过 Feed 来抓取和分发你的文章，扩大你的影响力。
  3. 专业性的体现: 对于一个技术博客来说，提供 Feed 订阅几乎成了一种标配，代表了你的专业和对读者体验的重视。

使用方法

好了，让我们开始吧！整个过程主要分为四步：安装插件 -> 配置站点 -> 配置主题 -> 生成验证。

步骤一：安装Feed生成插件

Hexo本身不带Feed生成功能，我们需要安装官方推荐的插件 hexo-generator-feed。

打开你博客所在的文件夹，在命令行中执行以下命令：

1
npm install hexo-generator-feed --save

这会将插件安装到你的项目中，并将其依赖关系保存到 package.json 文件中。

步骤二：配置站点配置文件

接下来，需要配置插件的行为。打开你博客根目录下的站点配置文件 _config.yml (注意：不是主题的配置文件)，在文件末尾添加以下配置：

1
2
3
4
5
6
7
8
9
10
11
# Feed Atom
feed:
  type: atom # Feed的类型，可以是 atom 或 rss2
  path: atom.xml # 生成的feed文件名，atom建议用 .xml 后缀
  limit: 20 # 生成Feed的文章数量，0或false代表所有文章
  hub: # PubSubHubbub服务，可以加快Google等订阅源的更新速度，建议保留
  content: true # 在Feed中包含全文内容，非常推荐
  content_limit: # 如果content设置为false，这里可以设置摘要的字数
  content_limit_delim: '' # 如果content设置为false，摘要的分割符
  order_by: -date # 按日期倒序排列
  autodiscovery: true # 自动在页面<head>中添加feed链接，必选true

配置项说明:

  • type: 推荐使用 atom，它是一种比 RSS 2.0 更现代、格式更严谨的规范。
  • path: 生成的Feed文件的名字。如果你选择了 atom，通常就命名为 atom.xml。
  • limit: 显示最近的多少篇文章。20 是一个不错的选择。如果你文章不多，也可以设为 0 来包含所有文章。
  • content: 强烈建议设置为 true。这样读者可以在阅读器里看到全文，体验会好很多。如果设为 false，则只会显示文章摘要（`` 标签之前的内容）。
  • autodiscovery: 务必保持 true。它会自动在你的网页头部（<head>）添加一行代码，让浏览器和阅读器能自动发现你的Feed地址。

步骤三：在Butterfly主题中显示Feed图标

配置好Feed生成后，我们还需要在页面上给读者一个订阅入口。Butterfly主题可以很方便地在社交图标区域添加Feed图标。

打开主题配置文件 _config.butterfly.yml，找到 social 配置项，添加一行RSS图标的配置。

1
2
3
4
5
6
# Social Icon
social:
  fab fa-github: https://github.com/your-github-id || Github
  fab fa-twitter: https://twitter.com/your-twitter-id || Twitter
  # 在这里添加下面这行
  fas fa-rss: /atom.xml || RSS || '#ff6600'  # 添加feed流

请注意：

  • fas fa-rss 是 Font Awesome 的RSS图标样式类。
  • /atom.xml 是Feed文件的路径。这个路径必须和你上一步在 _config.yml 中配置的 path 完全一致！
  • || RSS 是鼠标悬浮在图标上时显示的文字。

步骤四：重新生成和验证

现在所有配置都完成了。执行以下命令来清理缓存并重新生成你的博客文件：

1
hexo clean && hexo g

生成完毕后，可以执行 hexo s 启动本地服务器预览效果。

  1. 检查文件：在你的博客根目录 public 文件夹下，应该能看到一个新生成的 atom.xml 文件。
  2. 检查页面：打开浏览器访问 http://localhost:4000，你应该能在设置的社交区域（通常是侧边栏或页脚）看到一个RSS图标。
  3. 检查链接：点击那个RSS图标，浏览器应该会跳转到 http://localhost:4000/atom.xml 并显示一堆XML代码。这就证明链接配置正确。
  4. 检查源码: 在博客页面右键“查看网页源代码”，在 <head> 区域内搜索 atom.xml，你应该能找到类似下面这行代码，这证明 autodiscovery 配置生效了。
1
<link rel="alternate" href="/atom.xml" title="你的博客名" type="application/atom+xml">

如果以上四项都符合预期，那么恭喜你，大功告成！

总结

至此，你的 Hexo + Butterfly 博客已经成功构建并启用了 Feed 功能。当你通过 hexo d 将网站部署到线上后，读者就可以通过 https://你的域名/atom.xml 这个地址来订阅你的博客了。

这不仅为你的忠实读者提供了经典的订阅方式，也为你的内容分发和影响力扩展开辟了新的渠道。对于我们独立开发者而言，这正是连接社区、分享价值的重要一步。

希望这篇教程对你有帮助，快去分享你的博客，让更多人发现你的创作吧！