近期有为博客添加网站状态监测页面的想法，可以监测友链的存活状态等

但是根据搜到的，可以使用UptimeRobot进行监测。但是其中的一些操作，比如调整监测页面链接需要进行包月付费

本着能省则省的原则，便想着不如着手实现一下主动监测。

这篇文章算是一个小项目总结与功能说明吧。

当前开发进度

定时查询 https://github.com/luoy-oss/luo9-link-monitoring

API https://github.com/luoy-oss/blog-link-monitoring

数据展示 https://github.com/luoy-oss/butterfly-link-monitoring

项目大概框架如下

定时任务 → API → MongoDB

部署的API服务通过 Vercel Cron 定时任务，主动从 GitHub Issues 获取友链数据并进行存活请求监测，并将状态数据存入MongoDB数据库中

</br>

博客页面 → API → 展示数据

博客监测页面，向部署的api获取网站历史存活数据，并进行展示

以上，你需要完成

  • fork我的仓库
  • 向vercel部署
  • 构建MongoDB数据库并进行Connect
  • 配置环境变量（用于控制自动检测任务）
  • 向博客添加监测页面

api部署-向vercel部署

这里偷懒，使用了以往的fork和部署样例图片，请注意名称要为你fork的仓库名称

即：blog-link-monitoring

先将 luoy-oss/blog-link-monitoring: 主动式网站链接状态监测 Fork 到自己的Github

fork

登录 Vercel 后，点击Add New.. => Project

vercel

选择导入的项目，当然如果仓库不是很多的话可以直接看到最近创建的仓库，点击 import导入

choose

然后点击Deploy 进行部署

deploy

直接点击 Add Domain

domain

添加你想要的域名，例如此处我要添加的域名为 blog-links-monitoring.drluo.top

add-domain

添加后出现提示，要求添加一条CNAME记录，指向cname.vercel-dns.com

cname1

按照提示添加一条CNAME记录：

cname3

为了提升访问速度也可以使用加速节点 vercel.cdn.yt-blog.top 或者 vercel.cdn.cyfan.top

cname3

关于加速节点的介绍可参考文章 推一下 Vercel 加速节点

添加解析记录后页面会自动刷新，等待片刻校验即可通过

verify

检验通过后可直接点击域名进行预览，出现以下内容代表你已经完成了api的部署：

blog-link-monitoring.drluo.top1

构建MongoDB数据库并进行Connect

新建你的数据库项目，默认不需要进行调整，项目拥有者就是你自己

项目创建完成后，创建新的集群用于存储数据表

选择Free的集群就够我们用啦，其中集群的名称可以按你想要的来，集群服务器建议选用aws，服务器位置根据你的api部署位置酌情选择

我这里使用vercel部署，但是挂了国内cdn转发，所以选用的HongKong

集群创建完成后，会提醒你创建用户用于连接集群，你可以选择在这里直接进行创建（输入用户名和密码后点击Create Database User），或者直接点击Close，按照下方教程创建

点击左侧的Database Access，点击右上方绿色按钮ADD NEW DATABASE USER，输入相应的用户名和密码，并赋予用户Atlas admin权限后，点击Add User完成创建

请牢记用户名密码，不然忘掉了还要回来再改，会麻烦的

由于vercel部署的api服务器地址会变化。点击左侧Network Access，点击右上方绿色按钮ADD IP ADDRESS，输入0.0.0.0/0允许所有ip连接。

如果你是自己服务器进行的部署，有固定ip的前提下，可以键入你自己的ip。

完成相应的数据库用户和ip开放操作后，可以进行集群连接操作。

点击左侧的Clusters，连接Connect刚才创建的集群

调整Driver为Node.js，并复制下方的code

完成上方操作后。你应该有了类似如下格式的code：

1
mongodb+srv://<db_username>:<db_password>@link-monitoring.b86hqbc.mongodb.net/?retryWrites=true&w=majority&appName=link-monitoring

现在，你需要将其中的替换为刚才创建的用户名，我这里是new-user

将其中的替换为刚才创建的用户名对应的密码，这里是userpasswd

</br>

code中的格式为xxx.mongodb.net/?xxxx

此时默认为test数据表，如果你想指定数据表（不存在会自动创建）请参考下方样例：

1
2
3
xxx.mongodb.net/表名称?xxxx
比如指定表名称为monitoring（不存在会自动创建）
xxx.mongodb.net/monitoring?xxxx

最后的code为：

1
mongodb+srv://new-user:userpasswd@link-monitoring.b86hqbc.mongodb.net/monitoring?retryWrites=true&w=majority&appName=link-monitoring

此时你可以向vercel或你的服务器中配置相应的环境变量（注意是大写字母i，不是小写的L）MONGODB_URI

以上，你已经完成了相应的数据库创建及连接操作。

配置环境变量与自动检测

现在的版本已经内置了自动检测功能，无需额外的服务器或 Bot。

你需要前往 Vercel 项目的 Settings -> Environment Variables，添加以下环境变量来启用自动检测：

变量名 推荐值/说明 是否必须
GITHUB_REPO 您的GitHub用户名/仓库名 (例如 luoy-oss/friend_link) ✅ 必须
GITHUB_ISSUE_LABEL active (或者您使用的其他标签) 可选 (默认 active)
GITHUB_TOKEN (您的 GitHub Personal Access Token) 仅需要issue获取权限（只读） 推荐
MONITOR_TIMEOUT 30000 可选
MONITOR_MAX_CHECK_LIMIT 50 (防止 Vercel 函数超时) 可选

配置完成后，Vercel 会自动注册 Cron Job，每天定时从您的 GitHub Issues 获取友链并检测状态。

你也可以手动访问 https://您的域名/api/cron-check 来触发一次检测。

历史数据与状态展示

部署后监测的友链会自动保存每个链接的最新状态并进行多维度数据汇总：

  1. 实时状态：保存每个链接的最新一次检测结果，用于监测页面首屏快速展示。
  2. 最近30天趋势：自动维护最近30天的每日统计数据（可用率、平均响应时间），用于展示每个站点的每日状态条纹，直观反映近期稳定性。
  3. 历史流水记录：保存每次检测的详细记录（时间、状态码、响应时间），用于追溯具体故障。
  4. 月度统计汇总：自动计算每个月的整体可用率和平均响应时间，用于长期数据分析。

在监测页面，您可以直观地看到站点最近30天的在线情况。点击每个站点卡片右上角的 历史图标，还可以查看该站点的详细历史流水与月度汇总报表，支持无限滚动加载更多数据。

向博客添加监测页面

本页面基于butterfly主题生成，其余主题直接使用可能或出现未经验证的问题。

1
git clone https://github.com/luoy-oss/butterfly-link-monitoring.git

将获取到的文件一并复制到butterfly主题下：

/theme/butterfly/

文件存在路径为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
butterfly
│
├─layout
│  └─monitoring.pug
│  │
│  └─includes
│    └─monitoring-layout.pug
│
└─source
    ├─css
    │ └─monitoring.css
    │
    └─js
      └─monitoring.js

在主题配置文件中添加monitoring页面：

友链监测: /monitoring || fas fa-link

1
2
3
4
5
menu:
  首页: / || fas fa-home
  友链: /links/ || fas fa-link
  音乐: /music/ || fas fa-music
  友链监测: /monitoring || fas fa-link

hexo三连

1
hexo cl & hexo g & hexo d

访问你的博客监测页面

例如我的博客主页url为：https://www.drluo.top

相应的监测页面为：https://www.drluo.top/monitoring

以上，你完成了主动式网站状态监测的部署。

最后

有什么不懂的，欢迎加群询问哦！

洛の小窝