前言
无意之间在hostloc看到一贴,介绍一款比较适合监控站点的多功能网站监控面板,于是遂就水一篇文档。干就完了!uptime-status是对接 UptimeRobot API 开发而成的。所以说部署就简单起来了。
项目地址:
项目演示站点:https://status.org.cn/
我的Demo:https://www.gitiu.com/monitor/
或者直接看图??

开始
1.动动你的小手去这里注册一个账号,默认开通免费服务,虽说是免费的但是绝对够你用了。不够用上钱!!

2.注册成功后在 My Settings 中找到 API Settings开启 Monitor-Specific API Keys ,先搜索你之前起的 Friendly Name ,点击选择搜索到的项目名字,然后会得到一串数字。复制它后面有用。

配置 UptimeRobot

我们找到New Monitor,我们可以看到支持的协议,好像免费版不支持https。你根据自己的需求开始操作吧。
Tips:我建议先在 UptimeRobot 里面弄好你想要监控的站点,然后再安装uptime-status

环境说明
目前已经在 GitHub 上放出编译好的文件,什么环境都不需要!
不需要PHP!不需要nodejs!不需要宝塔!只需要一个支持html的纯静态空间都可以!
包括又拍云!OSS!七牛!啥都行!cloudflare worker 什么乱七八糟的都可以!
安装
最简单的食用方式:
1.下载最新版 https://github.com/yb/uptime-status/releases/latest
2. 解压缩压缩包;
3. 打开config.js
4. 修改你的 ApiKeys(就是上面获取的 Monitor-Specific API Keys) 和其它配置(已经做了注释,去掉了代码压缩)
// 配置
window.Config = {
// 站点名
SiteName: 'Uptime Status',
// 站点链接
SiteUrl: '/',
// UptimeRobot Api Keys
// 支持 Monitor-Specific 和 Read-Only 两只 Api Key
ApiKeys: [
'm784488775-dd1ad84b209c05f8e185c33e',
'm784490063-7b5da437e7f1e0d67613714d',
'm784497419-de55aa09902ccb3ab22d548a',
'm784496436-71a4bf7b1e3bdf7756be131b',
],
// 是否显示监测站点的链接
ShowLink: true,
// 日志天数
// 虽然免费版说仅保存60天日志,但测试好像API可以获取90天的
// 不过时间不要设置太长,容易卡,接口请求也容易失败
CountDays: 60,
// 导航栏菜单
Navi: [
{
text: 'Homepage',
url: 'https://status.org.cn/'
},
{
text: 'GitHub',
url: 'https://github.com/yb/uptime-status'
}
]
};
若是想麻烦一点自己编译安装那么就这样
食用方法:
1. 下载或 clone 代码;
2. 第一次下载之后先执行 npm i 安装依赖;
3. 改 src/config.js 中的 apikeys;
4. 执行 npm run build 打包;
5. 把 build 目录下的静态文件随便找个地方扔就完事了;
最后
这个代码是依赖 UptimeRobot 的,你需要先注册个 UptimeRobot。拿到apikey。检测线路的问题不是这个代码检测是 UptimeRobot 去检测的。
免费版是支持 https 的,作者飘过~
谢谢大大支持
非常漂亮,但是能不能把日期从左到右排?
Nice Job,在Github搜到的,希望加入安装指南/导航回贵站的link,不然还不怎么知道安装呢
(〜 ̄△ ̄)〜
对于这个你需要了解一点html 的 href的简单用法就行或者直接在config.js最下面直接改,比如这个,这种属于简单的,不怎么大改的基础上
Navi: [
{
text: ‘博客’,
url: ‘https://www.gitiu.com/’
},
非常漂亮,但是能不能把日期从左到右排?