简单介绍 🥰

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

在线体验

首选站点：https://Uptime.zrfme.com
备用站点：https://Uptime.001315.xyz

1.事前准备

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

2.使用cloudflare Pages 部署

  1. 首先在 点击右边前往 https://github.com/shaoyouvip/uptime/‘, star 并 fork 😘
    star 并 fork
    star 并 fork2

  2. 在UptimeRobot 添加站点监控.
    添加网站
    添加网站2

  3. 添加完网站后添加Status pages 只有添加了状态页面后，你的网站才能在官方的浏览页面可见https://stats.uptimerobot.com/ivqKgvpwuT我们的项目页面不影响。添加完点击Save changes保存。
    状态页面
    状态页面2

  4. 点击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会同步更新部署。

ApiKeys
config.js

  1. 创建 Pages 点击 连接到Git 选择你的存储库,点击开始设置 名称自己随便设置，其他内容默认不动，点击下方的保存并部署然后等待部署。
    连接到Git
    保存并部署
    部署成功

  2. 完事点击Pages分配的域名进行查看部署效果，可能要稍等一下才能访问进去会给你安装证书之类的，这个时间，我们可以去设置自定义域名，我设置为 https://uptime.001315.xyz 因为我的域名是托管在cloudflare的点击激活，就自己给你设置了。你如果托管在其他地方，自己去设置一下类型为CNAME名称是你自己设置的域名前缀，我的是uptime内容设置为Pages分配的域名，我的是 uuptime.pages.dev 。
    自定义域名
    自定义域名2

  3. 等待域名自定义域名,状态变为有效就可以访问查看效果了。教程结束！
    自定义域名3
    部署效果

鸣谢

uptime-status

相关链接

在线体验首选站点:https://Uptime.zrfme.com
在线体验备用站点:https://Uptime.001315.xyz

Github:https://github.com/shaoyouvip/uptime