Uptime-Status 状态监控面板配置教程

Uptime-Status 状态监控面板配置教程

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

---

1️⃣ 配置UptimeRobot

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

---

2️⃣ Uptime-Status 配置

下载Uptime-Status

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

解压文件

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

修改 config.js 文件

SiteName	要显示的网站名称
ApiKeys	从 UptimeRobot 获取的 API Key
CountDays	要显示的日志天数，建议 60 或 90，显示效果比较好
ShowLink	是否显示站点链接
Navi	导航栏的菜单列表

---

3️⃣ 部署前端到vercel（可选）

1. Vercel创建新项目：https://vercel.com/new

2. 选择 Import Third-Party Git Repository

   

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

   

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

   

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

6. 修改 public/config.js 文件

   SiteName	要显示的网站名称
   ApiKeys	从 UptimeRobot 获取的 API Key
   CountDays	要显示的日志天数，建议 60 或 90，显示效果比较好
   ShowLink	是否显示站点链接
   Navi	导航栏的菜单列表

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

4️⃣ 部署前端到 Cloudflare Workers（可选）

复制官方代码

**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));
});

创建 Worker 实例

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

替换默认的 API

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

---

5️⃣ Hexo博客部署

创建页面

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

hexo new page status

更改_congig.yml文件

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

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

skip_render:
    - "status/*"

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

复制文件

把你下载好的 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">

修改config.js 文件

SiteName	要显示的网站名称
ApiKeys	从 UptimeRobot 获取的 API Key
CountDays	要显示的日志天数，建议 60 或 90，显示效果比较好
ShowLink	是否显示站点链接
Navi	导航栏的菜单列表

hexo cl && hexo g && hexo d

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

---

6️⃣ 文章总结

通过本文的介绍，您应该已经学会了如何使用Uptime-Status面板来监控您的网站。Uptime-Status是一款功能强大且易于使用的网站监控工具，相信它会成为您网站运维工作的得力助手。祝您使用愉快！

同时也感谢您阅读我的文章！如果您觉得这篇文章对您有所帮助，欢迎收藏转发和分享。
如果您有任何想法和建议，请随时在评论区留言。您的反馈对我来说非常重要，我会认真倾听并不断改进我的文章内容。
同时，如果您想第一时间获取我的最新文章和动态，您还可以搜索关注我的博客或公众号。
再次感谢您的支持和关注，期待与您在未来的文章中再次相遇！