#教程# 基于UptimeRobot接口制作的简单网站监测页面

简介

Uptime Robot 是国外知名的服务器及网站应用服务器在线率监控工具，支持监控 HTTPs 、Ping 、端口、关键词以及查看监控服务器/网站的正常运行时间、停机时间和响应时间。Uptime Robot 每 5 分钟检查一次，最大可以监控 50 个服务器和网站应用，并且在服务器及网站宕机的时候，支持短信，邮件， Twitter ， Telegram 等通知方式。

图片[1] - #教程# 基于UptimeRobot接口制作的简单网站监测页面 - 云线路

官网

https://uptimerobot.com

教程

关于注册和设定uptimerobot监控，我这里就不不多说了，自行用 chrome 翻译去搞定，主要说说利用 uptimerobo 的 API 调用制作个简单的监控。

事先准备

需要先到 UptimeRobot 添加站点监控，并在 My Settings 页面获取 API Key

图片[2] - #教程# 基于UptimeRobot接口制作的简单网站监测页面 - 云线路

还需要拥有一个网站空间，常见的 Nginx / PHP 等空间即可，甚至是阿里云的 OSS 等纯静态空间也行，都是 CSS、JS 和 HTML 文件。博主就把监控程序给丢到阿里云 OSS 上了，才 200 多 Kb，基本上不会产生费用。

如何部署

下载并解压缩：uptime-status.zip
修改 config.js 文件：
- SiteName: 要显示的网站名称
- ApiKeys: 从 UptimeRobot 获取的 API Key，支持 Monitor-Specific API Keys 和 Read-Only API Key
- CountDays: 要显示的日志天数，建议 60 或 90，显示效果比较好
- ShowLink: 是否显示站点链接
- Navi: 导航栏的菜单列表
将所有文件上传到网站空间

演示

https://status.org.cn [官方演示]

https://status.yunloc.com [本站演示]

修改 CSS

看本站演示修改后的 CSS 后是不是一下变清新了，下面我就把 CSS 贴出来，大家也可以自行修改

*{border:0;margin:0;padding:0;outline:none;list-style:outside none;box-sizing:border-box}
body{background:#f6f8fa url(../../static/media/background.b132844f.png) top;color:#3f4347;font-size:12px;font-family:sans-serif;line-height:1;position:relative}
a{text-decoration:none;color:inherit}
.container{max-width:980px;margin-left:auto;margin-right:auto;padding:0 10px}
#app{padding-top:75px}
#header{position:fixed;top:0;left:0;right:0;background:#fff;box-shadow:0 1px 10px rgba(0,0,0,.05);border-bottom:1px solid #e3e4e6;z-index:10}
#header .container{display:flex;justify-content:space-between;align-items:center;height:55px}
#header .logo{font-size:18px;font-weight:700;color:#00c3ef}
#header .navi{font-size:14px}
#header .navi a{color:#838b90;transition:color .3s ease-out;margin-left:15px}
#header .navi a:hover{color:#4b9b5d}
#uptime{background:#fff;border:1px solid #e3e4e6;border-radius:5px;box-shadow:0 2px 6px rgba(0,0,0,.05);overflow:hidden}
#uptime .site{padding:18px 20px;border-bottom:1px solid #e7e8e9}
#uptime .site .loading{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23D6D8D8' d='M19.52 42.712c9.897 2.916 20.285-2.743 23.201-12.64l-3.902-1.15c-2.281 7.742-10.407 12.17-18.15 9.888l-1.15 3.902z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% 100%;display:block;height:40px;margin:0 auto;width:40px}
#uptime .site:hover{background-color:#fffdf5}
#uptime .site .meta{justify-content:space-between;margin-bottom:8px}
#uptime .site .meta,#uptime .meta .info{display:flex;align-items:center}
#uptime .site .meta .name{font-size:16px;line-height:20px;color:#5a606b}
#uptime .site .meta .link{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg class='icon' viewBox='0 0 1036 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M600.818 697.6c-70.4 0-134.4-25.6-192-76.8-25.6-25.6-25.6-64-6.4-89.6 25.6-25.6 64-25.6 89.6-6.4 57.6 51.2 147.2 51.2 198.4 0l166.4-166.4c25.6-25.6 38.4-64 38.4-102.4 0-25.6-6.4-64-38.4-96-57.6-51.2-147.2-51.2-198.4 0l-64 76.8c-25.6 25.6-64 25.6-89.6 0-25.6-25.6-25.6-64 0-89.6l70.4-70.4c102.4-102.4 268.8-102.4 377.6 0 51.2 51.2 83.2 115.2 83.2 192 0 70.4-25.6 134.4-76.8 192l-166.4 166.4c-57.6 44.8-121.6 70.4-192 70.4z' fill='%238492A6'/%3E%3Cpath d='M274.418 1024c-70.4 0-134.4-25.6-192-76.8-108.8-96-108.8-262.4-6.4-377.6l166.4-166.4c108.8-102.4 275.2-102.4 377.6 0 25.6 25.6 25.6 64 0 89.6s-64 25.6-89.6 0c-51.2-51.2-140.8-51.2-198.4 0l-166.4 166.4c-44.8 51.2-64 140.8 0 198.4 57.6 51.2 147.2 51.2 198.4 0l70.4-70.4c25.6-25.6 64-25.6 89.6 0s25.6 64 0 89.6l-70.4 70.4c-44.8 51.2-108.8 76.8-179.2 76.8z' fill='%238492A6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% 100%;height:13px;margin-left:8px;opacity:.6;text-indent:-99999px;transition:opacity .15s ease;width:13px}
#uptime .site .meta .link:hover{opacity:1}
#uptime .site .meta .status{background:0/14px auto no-repeat;padding-left:20px;font-size:14px}
#uptime .site .meta .status.ok{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m12 2-8 8-4-4 1.5-1.5L4 7 10.5.5 12 2z' fill='%233bd672'/%3E%3C/svg%3E");color:#28a745}
#uptime .site .meta .status.fail{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1064 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m205.09 959.373 327.82-327.83 327.827 327.83L981.31 838.79 653.49 510.97l327.82-327.814L860.737 62.58 532.91 390.4 205.09 62.581 84.527 183.155l327.82 327.814-327.82 327.82z' fill='%23DE484A'/%3E%3C/svg%3E");color:#d9534f}
#uptime .site .meta .status.unknow{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M521.216 164.864c161.792 0 199.68 149.504 106.496 242.688C523.264 512 441.344 532.48 441.344 749.568h158.72c1.024-123.904 62.464-182.272 125.952-239.616 58.368-53.248 120.832-99.328 120.832-206.848 0-171.008-159.744-292.864-325.632-292.864-187.392 0-344.064 132.096-344.064 316.416h158.72c0-92.16 92.16-161.792 185.344-161.792M441.344 855.04h158.72v158.72h-158.72V855.04z' fill='%23969ea8'/%3E%3C/svg%3E");color:#6a737d}
#uptime .site .timeline{height:35px;display:flex;justify-content:space-between;margin-bottom:10px}
#uptime .site .timeline i{flex-grow:1;margin:0 1px;cursor:pointer}
#uptime .site .timeline i.ok{background-color:#66dbf5}
#uptime .site .timeline i.down{background-color:#f29571}
#uptime .site .timeline i.none{background-color:#f3f3f3}
#uptime .site .timeline i:hover{opacity:.6}
#uptime .site .timeline i:first-child{margin-left:0}
#uptime .site .timeline i:last-child{margin-right:0}
#uptime .site .summary{display:flex;justify-content:space-between;line-height:15px;color:#999fa6}
#uptime .site .tooltip{font-size:12px!important;padding:6px 9px!important;border-radius:4px!important}
#uptime .site:last-child{border-bottom:none}
#footer{text-align:center;font-size:12px;line-height:1.8;color:#999fa6;padding:20px 0}
#footer a{color:skyblue;font-weight:500}
/*# sourceMappingURL=main.e4003dc1.css.map*/

CSS 里添加了张背景图，看地址自行下载后保存在 static/media/background.b132844f.png 即可。

注意事项

在 config.js 里有从 UptimeRobot 获取的 API Key，通过ShowLink: 是否显示站点链接也就知道站点 IP，对于想避免攻击来说相当不利，可以设置不显示，但通过安装此程序可以调用别人的 API Key 来打开显示站点链接。

解决办法就是把 config.js 加密，如果觉得加密还不安全就在 UptimeRobot 里添加谷歌 DNS 来显示在站点上，本站就把 config.js 加密了，除 Yunloc Server(tencent)显示为真实监控，其他都是添加的各种 DNS(单独一个杵在那不好看是吧)，请不要尝试去解密获得本站其他 IP，纯属浪费时间。