使用Cloudflare Pages部署UptimeRobot API 的在线状态面板

周润发2024-09-212024-09-21

简单介绍 🥰

Uptime 演示网站
Uptime：是一个开源项目，用于监控网站状态和服务可用性，轻松跟踪服务器运行情况。本篇文章介绍基于 UptimeRobot API 的在线状态面板的搭建教程。

1.事前准备

域名（非必须，你也可以使用免费域名，或者Pages.dev分配的域名也可以）
GitHub（必须，你需要注册一个GitHub帐号）
Cloudflare（非必须，你需要注册一个Cloudflare帐号，这样你就可以将Uptime部署在CF的CDN里加速）
UptimeRobot （必须，添加站点监控，使用其的API服务）
您需要拥有一个网站空间，常见的 Nginx / PHP 等空间即可，甚至是阿里云的 OSS 等纯静态空间也行

2.使用cloudflare Pages 部署

首先在 点击右边按钮前往 GitHub star 并 fork 😘
在UptimeRobot 添加站点监控.
添加完网站后添加Status pages 只有添加了状态页面后，你的网站才能在官方的浏览页面可见https://stats.uptimerobot.com/ivqKgvpwuT我们的项目页面不影响。添加完点击Save changes保存。
点击Integrations & API中并在API中Main API keys获取Read-only API key格式为 ur2671488-fb491a80091166a48bc66b17 这是我的只读API，你需要在GitHub你刚fork的项目中修改 config.js 文件ApiKeys中替换为你的。
修改 config.js 文件：
- SiteName: 要显示的网站名称
- ApiKeys: 从 UptimeRobot 获取的 API Key，支持 Monitor-Specific API Keys 和 Read-Only API Key
- CountDays: 要显示的日志天数，建议 60 或 90，显示效果比较好
- ShowLink: 是否显示站点链接
- Navi: 导航栏的菜单列表
- 这些都是你可以自定义修改的，修改好进行下一个步骤，或者部署成功后，也可以在此修改cloudflare会同步更新部署。
创建 Pages 点击 连接到Git 选择你的存储库,点击开始设置 名称自己随便设置，其他内容默认不动，点击下方的保存并部署然后等待部署。
完事点击Pages分配的域名进行查看部署效果，可能要稍等一下才能访问进去会给你安装证书之类的，这个时间，我们可以去设置自定义域名，我设置为 https://uptime.001315.xyz 因为我的域名是托管在cloudflare的点击激活，就自己给你设置了。你如果托管在其他地方，自己去设置一下类型为CNAME名称是你自己设置的域名前缀，我的是uptime内容设置为Pages分配的域名，我的是 uuptime.pages.dev 。
等待域名自定义域名,状态变为有效就可以访问查看效果了。教程结束！