为什么你需要搭建一个 Webring：从概念到 Cloudflare Worker 实战

本文介绍如何为个人网站搭建一个 Webring（网站环），并通过 Cloudflare Worker 实现自动导航功能，让朋友们的站点形成一个环形链接网络。

什么是 Webring？

Webring（网站环）本质上是一个循环链表结构，将一组围绕某个共同话题（爱好、兴趣或朋友关系）的个人网站串联起来。每个站点上会放置“上一站/下一站”的导航链接，用户可以在环中无限循环浏览。

这个概念最早在 1990 年代互联网早期非常流行，当时搜索引擎还不发达，人们通过 Webring 来发现同好网站。虽然现在已被搜索引擎和社交平台取代，但它依然是一种充满复古趣味且能增强社区感的方式。

搭建 Webring 的两种方式

方式一：手动链接（简单但繁琐）

直接让参与的朋友们互相在网站上添加链接，形成一个闭环：

• 站点 A 链接到站点 B
• 站点 B 链接到站点 C
• 站点 C 链接回站点 A

这种方式无需任何后端，但维护困难：每次有新成员加入或退出，所有站点都需要手动更新链接。

方式二：自动化服务器方案（推荐）

搭建一个轻量级 Web 服务器，存储所有成员网站的 JSON 列表，并暴露 /prev（上一站）和 /next（下一站）路由，自动重定向到对应站点。

核心数据结构（ring.json）

{
"members": [
{"url": "https://site-a.com"},
{"url": "https://site-b.com"},
{"url": "https://site-c.com"}
]
}

关键实现逻辑（Cloudflare Worker）

typescript
import ring from './ring.json';
const { members } = ring;

export default {
async fetch(request, env, ctx): Promise {
const pathname = new URL(request.url).pathname;

// 获取来源站点 URL：优先从查询参数 ?from= 获取，其次从 HTTP Referer 头获取
const referrer = new URL(request.url).searchParams.get('from') 
  || request.headers.get('referer') 
  || request.headers.get('referrer') 
  || '';

const currentMember = members.find(member => member.url === referrer);
if (!currentMember) {
  return new Response('Member not found', { status: 404 });
}

switch (pathname) {
  case '/next':
    // 取模运算实现循环：当前索引 + 1，超出则回到 0
    const nextMember = members[(members.indexOf(currentMember) + 1) % members.length];
    return Response.redirect(nextMember.url, 302);
  
  case '/prev':
    // 取模运算实现逆向循环：当前索引 - 1，小于 0 则跳到最后
    const prevMember = members[(members.indexOf(currentMember) - 1 + members.length) % members.length];
    return Response.redirect(prevMember.url, 302);
  
  case '/random':
    // 随机跳转到环中任意站点
    const randomMember = members[Math.floor(Math.random() * members.length)];
    return Response.redirect(randomMember.url, 302);
  
  default:
    return new Response('Not Found', { status: 404 });
}

},
} satisfies ExportedHandler;

技术要点解析：

1. 来源识别机制：为了确定用户当前在环中的位置，Worker 需要知道用户是从哪个站点跳转过来的。这里提供了两种方式：

   • 通过 URL 查询参数 ?from=https://...（更可靠）
   • 通过 HTTP 的 Referer 请求头（浏览器自动发送，但可能被隐私工具屏蔽）

2. 循环索引计算：

   • /next：(currentIndex + 1) % length —— 走到末尾自动回到开头
   • /prev：(currentIndex - 1 + length) % length —— 走到开头自动跳到末尾（加 length 是为了处理负数取模）

3. 使用 302 重定向：HTTP 302 表示临时重定向，浏览器会立刻跳转到目标 URL，用户感知不到中间服务器的存在。

4. 为什么选 Cloudflare Worker：

   • 免费额度足够个人使用（每天 10 万次请求）
   • 全球边缘部署，延迟极低
   • 无需管理服务器，代码即服务

如何让用户接入环？

每个成员网站需要在页面上放置类似这样的导航链接：
html
← 上一站
下一站 →
🎲 随机跳转

进阶优化建议

1. 添加站点信息：在 JSON 中扩展字段，如站点名称、描述、图标：

{
"members": [
{
"url": "https://site-a.com",
"name": "张三的博客",
"description": "技术 & 生活",
"icon": "https://site-a.com/favicon.ico"
}
]
}

2. 增加管理接口：通过 API 动态添加/删除成员，无需手动编辑 JSON。

3. 统计功能：记录每个站点的跳转次数，展示环的人气分布。

4. 环的多样性：不仅限于单向循环，可以支持双向、随机、加权随机等多种导航模式。

为什么现在还要用 Webring？

在 2026 年的今天，个人网站已经变得相对小众，但 Webring 带来了几个独特价值：

• 社区感：让独立博客们形成一个可见的“朋友圈”，而不是依赖中心化平台
• 发现机制：用户可以通过环自然地发现同领域的新站点
• 复古美学：本身就是一种对早期互联网文化的致敬
• 低维护成本：一旦搭建好，几乎零维护

正如原文作者所说：“你只需要一个个人网站和至少一个朋友”，就可以开始这个有趣的实验。

完整代码

原文作者将完整源代码托管在 GitHub，可以参考：完整源码链接（注：原文中未给出具体仓库地址，但 Cloudflare Worker 的完整实现已在上文展示）。

---

原文链接：https://shub.club/writings/2026/july/you-need-a-webring/