uptime-status一款漂亮的网站监控面板

前言

无意之间在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

我配置的http协议的监控

环境说明

目前已经在 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'
    }
  ]
};

若是想麻烦一点自己编译安装那么就这样

食用方法：

下载或 clone 代码；
第一次下载之后先执行 npm i 安装依赖；
改 src/config.js 中的 apikeys；
执行 npm run build 打包；
把 build 目录下的静态文件随便找个地方扔就完事了;

最后

这个代码是依赖 UptimeRobot 的，你需要先注册个 UptimeRobot。拿到apikey。检测线路的问题不是这个代码检测是 UptimeRobot 去检测的。