轻松实现一个基于 UptimeRobot API 的在线状态面板

一、最终效果

最终效果

二、准备API

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

注册登录

新建监测站点

新建监测

免费账户只能监测HEAD，不过也足够用了

监测设置

可以设置监测告警，及时发现站点故障

监测告警

可以添加多个监测的站点和服务

添加多个

查看并记录所有站点的API，后面会用

复制API

三、前端页面

这里部署到vercel（采用vercel演示）如果有网站空间或云服务器，可以直接将前端部署到自己的新站点

Fork 以下项目，然后修改public/config.js,添加自己的API并修改名称等，可以添加多个API

uptime-status

增加API和修改名字等

四、部署前端到vercel

选择自己的github项目导入，部署类型选择other

vercel部署

部署完成后，添加自己的域名并做好CNAME解析（默认vercel域名不可直接使用），就可以使用了。