为博客添加 RSS 订阅

同步至个人站点：为博客添加 RSS 订阅

为博客添加 RSS 订阅

我时常关注一些博客、技术论坛或者公众号，但是每次阅读都很麻烦：因为我需要在不同网站或者平台间来回切换，甚至有些平台插入了不少的广告。

为了更高效地聚合我所关注的博客和新闻源，我最近开始使用一个名为 Folo 的信息聚合应用。在探索 Folo 的过程中，我认识了 RSS——一种经典但依旧强大的信息同步协议。

这让我萌生了一个想法：我的个人博客 CellStack 是使用 VitePress 构建的，能不能也成为一个 RSS 源，让我的内容可以被其他人和聚合器轻松订阅呢？

答案是肯定的。而且，借助社区现成的插件，整个过程异常简单，几乎只需要进行一些配置即可。

什么是 RSS

你可能在很多网站上见过这个长得像 WIFI 的橙色的图标。

RSS

RSS（Really Simple Syndication）是一种格式规范，用于发布和聚合网页内容的更新。可以让用户通过 RSS 阅读器（如 Folo、Feedly）订阅自己感兴趣的网站。一旦网站发布了新内容，订阅者就能在他们的阅读器中即时收到更新，而无需一次又一次地访问原始网站。

这就像是你订阅了你喜欢的 Up 主，他更新了视频，平台就会自动推送给你一样。对于内容创作者来说，RSS 提供了一种绝佳的方式，将自己的更新直接推送给最忠实的读者。

关于更多 RSS 的内容请看这篇帖子：高效获取信息，你需要这份 RSS 入门指南

使用 `vitepress-plugin-rss`

VitePress 的生态系统非常活跃，对于生成 RSS 这种常见的需求，社区已经有了成熟的解决方案：vitepress-plugin-rss。这个插件可以无缝集成到 VitePress 的构建流程中，自动根据你的内容生成 feed.xml。

下面，我们来看看集成的具体步骤。

相关 commit：feat(docs): 集成 RSS 订阅功能并配置相关插件

步骤一：安装插件

首先，使用你偏好的包管理器将插件安装为开发依赖。

1# 使用 npm
2npm i vitepress-plugin-rss -D
3
4# 或使用 pnpm
5pnpm add vitepress-plugin-rss -D
6

步骤二：在 VitePress 配置中启用插件

接下来是核心步骤。打开你的 VitePress 配置文件（通常是 .vitepress/config.js 或 .vitepress/config.mjs），引入插件并进行配置。

1// .vitepress/config.mjs
2
3import { defineConfig } from "vitepress"
4import { RssPlugin } from "vitepress-plugin-rss"
5
6// RSS 插件配置
7const RSS = {
8  title: "CellStack - 工程师技术笔记",
9  description:
10    "计算机科学的工程实践和个人思考。涵盖前端开发、后端架构、DevOps运维、AI工程等技术领域的深度文章和实战经验分享。",
11  baseUrl: "https://stack.mcell.top",
12  url: "https://stack.mcell.top/feed.xml", // RSS feed 的完整 URL
13  filename: "feed.xml", // 生成的文件名
14  copyright: `© ${new Date().getFullYear()} mCell`,
15  language: "zh-cn",
16  author: {
17    name: "mCell",
18    link: "https://stack.mcell.top",
19  },
20  // 关键：通过过滤器精确控制哪些内容需要被收录
21  // 这里我们只收录 'blog' 目录下的文章
22  filter: (post) => post.url && post.url.startsWith("/blog/"),
23}
24
25export default defineConfig({
26  // ... 你的其他站点配置
27
28  vite: {
29    plugins: [
30      RssPlugin(RSS), // 将插件实例挂载到 Vite
31    ],
32  },
33})
34

配置要点解析：

filter 过滤器：这是我认为最实用的一个配置。通过一个简单的函数，你可以精确地控制哪些页面应该被包含在 RSS Feed 中。在我的配置里，我只希望将 /blog/ 目录下的文章分享出去，像“关于”页面、首页等就不需要收录。这个函数很好地满足了这一需求。

步骤三：让订阅源可以被发现

最后，我们需要做两件小事来确保浏览器、爬虫和 RSS 阅读器能够顺利地找到你的订阅源。

1. 添加 <head> 链接

在 VitePress 的配置中，通过 head 选项添加一个 <link> 标签。这是一种标准的方式，用于向外界声明你的网站拥有一个 RSS feed。

1// .vitepress/config.mjs
2
3export default defineConfig({
4  // ...
5  head: [
6    [
7      "link",
8      {
9        rel: "alternate",
10        type: "application/rss+xml",
11        href: "/feed.xml", // 确保这里的路径与插件配置中的 filename 对应
12        title: "CellStack RSS Feed",
13      },
14    ],
15  ],
16  // ...
17})
18

2. 更新 robots.txt

如果你的网站根目录 public 文件夹下有 robots.txt 文件，建议明确允许爬虫抓取你的 feed 文件。这有助于搜索引擎和其他服务发现并索引你的 RSS 源。

1# public/robots.txt
2
3User-agent: *
4Allow: /
5# ... 其他规则
6
7Allow: /feed.xml
8

完成以上步骤后，重新构建并部署你的网站。现在，一个与你的博客内容实时同步的 RSS 源已经成功上线了！你可以将 https://你的域名/feed.xml 这个地址添加到 Folo 或任何你喜欢的 RSS 阅读器中，亲自体验一下订阅自己创作的乐趣。

比如这里，我的 FOLO 订阅了 CellStack 的 RSS 源之后，就可以看到 CellStack 的最新内容：

结语

相比于手动编写脚本，使用 vitepress-plugin-rss 插件无疑是一种更高效、更可靠的方式。它将复杂的 RSS 规范封装起来，我们只需要关心清晰的配置项即可。

这不仅是一次简单的技术实践，更是对内容传播渠道的一次拓展。在这个算法推荐盛行的时代，RSS 这种看似“古老”的协议，却赋予了我们——无论是读者还是创作者——更多的主动权。它建立了一条纯粹的、无干扰的桥梁，连接了内容和真正关心它的人。

如果你也在使用 VitePress，强烈推荐你花几分钟时间，为你的站点也加上这个小而强大的功能。

（完）

《为博客添加 RSS 订阅》是转载文章，点击查看原文。

为博客添加 RSS 订阅