Hexo 多镜像站同步方案

概述

这是一个专为 Hexo 博客设计的多镜像站同步方案，使用 Service Worker 实现智能路由、健康检查和离线缓存。

文件结构

1
2
3
4
5
6

source/
├── sw/
│   └── mirror-sw.js          # Service Worker 主文件
├── mirror-panel/
│   ├── index.md              # 控制面板页面
│   └── mirror-panel.js       # 控制面板脚本

功能特性

Service Worker

• ✅ 多镜像站点管理（支持主站+多个镜像）
• ✅ 智能健康检查（自动检测镜像可用性）
• ✅ 自动故障转移（自动切换到可用镜像）
• ✅ 请求缓存（离线访问支持）
• ✅ IndexedDB 数据持久化

控制面板

• ✅ 添加/编辑/删除镜像站点
• ✅ 实时健康状态显示
• ✅ 响应时间监控
• ✅ 同步日志查看
• ✅ 缓存管理
• ✅ 手动健康检查

快速开始

1. 已自动创建的文件

运行 hexo generate 后，以下文件会自动生成到 public/ 目录：

• /sw/mirror-sw.js - Service Worker
• /mirror-panel/index.html - 控制面板页面
• /mirror-panel/mirror-panel.js - 控制面板脚本

2. 在 Hexo 主题中注册 Service Worker

在主题的 layout/_partial/head.ejs 或 layout/layout.ejs 中添加：

1
2
3
4
5
6
7

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw/mirror-sw.js')
    .then(reg => console.log('SW registered:', reg))
    .catch(err => console.error('SW registration failed:', err));
}
</script>

3. 访问控制面板

部署后访问：https://your-domain.com/mirror-panel/

4. 添加镜像站点

在控制面板中点击”添加镜像”，填写：

• 名称：如”香港节点”
• URL：如 https://hk.your-domain.com
• 优先级：数字越小优先级越高（0为最高）
• 权重：负载均衡权重

配置说明

默认镜像配置

在 source/sw/mirror-sw.js 中修改默认配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const MIRROR_CONFIG = {
  mirrors: [
    { 
      id: 'primary', 
      name: '主站', 
      url: 'https://blog.cnortles.top', 
      priority: 0, 
      weight: 100 
    },
    // 添加更多默认镜像
  ],
  healthCheckInterval: 30000,  // 健康检查间隔（毫秒）
  cacheMaxAge: 7 * 24 * 60 * 60 * 1000,  // 缓存有效期（7天）
};

缓存策略

Service Worker 会自动缓存以下静态资源：

• CSS 文件 (.css)
• JavaScript 文件 (.js)
• 图片 (.png, .jpg, .jpeg, .gif, .svg)
• 字体文件 (.woff, .woff2, .ttf, .eot)

工作原理

1. 请求拦截：Service Worker 拦截所有 HTTP 请求
2. 镜像选择：根据优先级和健康状况选择最佳镜像
3. 请求重写：将请求 URL 重写为镜像地址
4. 响应缓存：缓存成功响应，支持离线访问
5. 故障转移：主镜像失败时自动切换到备用镜像

数据库结构

使用 IndexedDB 存储数据：

mirrors 表

• id: 镜像唯一标识
• name: 显示名称
• url: 镜像地址
• priority: 优先级（数字越小越优先）
• weight: 权重
• enabled: 是否启用
• healthStatus: 健康状态
• responseTime: 响应时间

cache 表

• url: 缓存的 URL
• response: 响应内容
• timestamp: 缓存时间

logs 表

• timestamp: 日志时间
• type: 日志类型
• message: 日志消息
• details: 详细信息

API 参考

控制面板 → Service Worker 消息

Service Worker → 控制面板 消息

常见问题

Q: Service Worker 不生效？

A: 确保：

1. 网站使用 HTTPS（或 localhost）
2. 浏览器支持 Service Worker
3. 清除浏览器缓存后刷新

Q: 如何删除所有镜像数据？

A: 在浏览器开发者工具中：

1. 打开 Application 标签
2. 选择 Storage > Clear site data
3. 或者访问控制面板点击”清除缓存”

Q: 镜像站点如何部署？

A: 将你的 Hexo 博客部署到多个服务器/CDN，然后在控制面板中添加这些镜像地址。

Q: 健康检查失败？

A: 确保镜像站点：

1. 允许跨域访问（CORS）
2. favicon.ico 可访问
3. 网络连接正常

浏览器兼容性

• Chrome 80+
• Firefox 75+
• Safari 13.1+
• Edge 80+

更新日志

v1.0.0

• 初始版本
• 多镜像管理
• 健康检查
• 控制面板