前言

最近看到别人的博客有一个网站监控页面，感觉炫酷又有用，然后就去百度了一下是如何部署的。

搜完之后更兴奋了，这是一个纯前端的项目，那服务器的压力就大大减少了，并且方便迁移，这下不得不搭建了。

可以点击这里看看搭建好的效果哦~

开始

UptimeRobot

需要使用到UptimeRobot的网站监控功能，其免费功能已经够用了。

  1. 到UptimeRobot 官网完成注册。
  2. 在控制台页面找到Montioring页面，点击New monitor以创建网站监控。
  3. 创建Read-Only API Key，UptimeRobot现在是已经换成新官网了，但是还保留着旧官网的，我在新官网没有找到生成Key的地方，可以到旧官网设置页面生成并保存好Read-Only API Key。（如果后面监控的网站有更新好想要重新获取Key才行）
  4. 第三步的API现在新版官网也支持生成了，到Integrations | UptimeRobot的APITab页点击Read-only API key的+ Create按钮生成API。

注意：uptime-status支持 Monitor-Specific 与 Read-Only API，Monitor-Specific是为每个被监控的网站单独生成一个API，Read-Only是为所有被监控的网站生成API，为方便管理，推荐使用Monitor-SpecificAPI。

uptime-status

到uptime-status仓库页面查看说明文档，只需要下载uptime-status.zip解压放到静态网站服务器就行了，使用前需要修改config.js，参数解释如下：

参数名说明
SiteName要显示的网站名称
ApiKeys从 UptimeRobot 获取的 API Key，支持 Monitor-Specific API Keys 和 Read-Only API Key
CountDays要显示的日志天数，建议 60 或 90，显示效果比较好
ShowLink是否显示站点链接
Navi导航栏的菜单列表

你可以fork仓库自定义你的页面，也可以看看别人的 uptime-status fork，说不定能找到你喜欢的扩展功能。

我这里将时间轴颠倒了一下，最新的网站状态在最右侧，可以看看我的 uptime-status fork。

其他部署

既然是静态页面，那么完全可以轻松部署在很多地方，或者是作为网站的某个页面融合在网站中。

具体可以参考Uptime-Status 状态监控面板配置教程。

参考文档

免费的网站运行状态监控工具——UptimeRobot

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