如何使用Uptime-Status进行网站在线监控？

Uptime-Status 是一个基于 UptimeRobot 的开源网站在线监控项目，它可以监控你的网站在线状态，务器的在线状态、响应时间、错误率等，并在静态页面上直观地显示出来。这个程序只需下载并进行简单的配置即可使用，无需 PHP 和数据库，可以放在任何支持静态网页的云空间里，食用简单。下面是配置使用 uptime-status 网站监控的详细步骤。

一、配置 UptimeRobot

可参考我之前的 UptimeRobot 网站监控配置教程这篇文章

二、 Uptime-Status 配置

2.1 下载 Uptime-Status

下载地址：https://github.com/yb/uptime-status/releases

2.2 上传文件

将下载好的 Uptime-Status文件解压并上传至网站根目录

2.3 修改 config.js 文件

三、Vercel前端部署（可选）

3.1 注册账号

Vercel 官网地址：https://vercel.com/

3.2 创建项目仓库

Vercel New Project：https://vercel.com/new

• 选择 Import Third-Party Git Repository

  

• 输入Uptime-Status项目地址：https://github.com/yb/uptime-status，然后选择 Continue

  

• 在 Create Git Repository 输入新建仓库名字，此时 Github 就会自动同步创建一个 uptime-status 项目仓库

  

3.3 部署项目

点击 Create在 Create a Team 选择 Skip 然后 vercel 就会自动完成部署

3.4 修改 public/config.js 文件

提交修改后就会触发 vercel 的自动构建，等待构建完成，打开 vercel 默认分配给你的域名就可以看见自己网页的状态拉！

四、 部署前端到 Cloudflare Workers（可选）

4.1 复制官方代码

 **const** handleRequest = **async** ({ request }) => {
   let url = new URL(request.url);
   let response = await fetch('https://api.uptimerobot.com' + url.pathname, request);
   response = new Response(response.body, response);
   response.headers.set('Access-Control-Allow-Origin', '*');
   response.headers.set('Access-Control-Allow-Methods', '*');
   response.headers.set('Access-Control-Allow-Credentials', 'true');
   response.headers.set('Access-Control-Allow-Headers', 'Content-Type,Access-Token');
   response.headers.set('Access-Control-Expose-Headers', '*');
   return response;
 }
 ​
 addEventListener('fetch', (event) => {
   event.respondWith(handleRequest(event));
 });

4.2 创建 Worker 实例

将代码复制进脚本编辑区，复制完成后点击保存并部署，然后复制子域为.workers.dev 的 URL

4.3 替换默认的 API

回到面板文件目录，修改 config.js 中的 ApiDomian 为上一步复制的 Worker 域名。

五、Hexo 博客部署（可选）

5.1 创建页面

运行 hexo new page status 命令，创建 status 页面

 hexo new page status

5.2 更改_congig.yml文件

为了防止 Hexo 会把status文件里的 index.md 渲染成 index.html

在 skip_render 选项添加 - "status/*"

 skip_render:
     - "status/*"

再通过 Hexo 上传至 Github，他将不会渲染这个文件夹下面的所有项目，直接上传至目的位置

5.3 运行

把你下载好的 release 文件放在 status 文件夹中，运行 Hexo 3连命令

 hexo cl && hexo g && hexo s

开启本地浏览后，你会发现网页一片空白，这是因为没有在 index.html 中正确设置，你需要在你的 index.html 中修改一下内容

 <script defer="defer" src="static/js/yourname.js"></script>
 <link rel="stylesheet" href="/static/css/yourname.css">

5.4 修改config.js 文件

 hexo cl && hexo g && hexo d

在上传完成后，此时访问你的目标网站，应该就可以显示出正常的页面了

六、文章总结

通过本文的介绍，您应该已经学会了如何配置并使用Uptime-Status面板来监控您的网站。祝愿 Uptime-Status 成为您维护网站运行的得力助手。同时，感谢您阅读本文！如需更多帮助，请留言反馈。欢迎转发并关注我的博客或公众号获取最新动态！