项目来源
- 项目源自A pretty dashboard of uptime status based on UptimeRobot API (github.com)
- 本人不具备代码审查能力，请自行承担风险
- UptimeRobot官方提供免费托管服务，并且提供share状态页面，不折腾完全够用
- 本文目的只是为了绑定个人域名，实现页面自定义
- 效果 演示
UptimeRobot端
- 访问官网
- 注册账号
- 配置需要监控的网站
- 生成API
- Integrations & API
- 先生成Main API key （否则无法进行下一步生成）
- 再生成Monitor-specific API keys（按照需监控的网站，分别生成）
- 记录API keys（即后生成的）
文件配置
- 项目Github地址，下载release包
config.js基础配置文件
window.Config = {
// 显示标题
SiteName: 'My Website Status',
// UptimeRobot Api Keys
// 支持 Monitor-Specific 和 Read-Only
ApiKeys: [
'替换你的API key 1',
'替换你的API key 2',
'替换你的API key 3',
'替换你的API key 4',
'替换你的API key 5',
],
// 日志天数
CountDays: 90,
// 是否显示检测站点的链接
ShowLink: true,
// 导航栏菜单 替换为你想添加的链接
Navi: [
{
text: 'Home',
url: 'https://##/'
},
{
text: 'Blog',
url: 'https://##'
},
{
text: 'About',
url: 'https://##/'
},
],
};
这个是通用配置，按要求配置即可
index.html默认页面
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<title>My Website Status</title>
<script src="./config.js"></script>
<script defer="defer" src="/static/js/main.ace24a8b.js"></script>
<link href="/static/css/main.e4003dc1.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
</body>
</html>
通过观察可以发现，实质性的内容被定义在了div块内
-
main.e4003dc1.css这个文件是页面的样式配置，可以根据需要修改诸如布局、字体、颜色、背景之类的 -
main.ace24a8b.js这个文件是页面内容的实际配置文件，可以根据需要修改页脚显示内容，其他内容不建议修改，也看不懂
Github端
- 新建私有仓库
- 上传配置完的文件
Cloudflare端
- 新建Pages，导入Github私有仓库，部署
- 绑定托管在Cloudflare上的域名
- 访问个人域名，测试