翻阅友链网站时，看到有的搭建了一个在线网站服务状态的页面，感觉挺酷，当然也是有用的，可以很方便的了解每个网站是否正常运行，从而方便我们对我们的每个网站进行维护。下面将我的搭建过程记录一下。

项目

site-status)

一个基于 UptimeRobot API 的在线状态面板

站点监测

特色

  • 站点状态总览
  • 流畅的动画
  • 数据获取失败提醒
  • 移动端适配

事先准备

  • 您需要先到 UptimeRobot 添加站点监控，并在 My Settings 页面获取 类型为 Read-Only API Key 的 API Key

修改并下载源文件

  • star 并 fork 😘
  • 按照下方部署操作来安装依赖
  • 在 .env 文件中进行配置修改
  • 下载到本地进行打包

打包

安装依赖

# 若没有 pnpm
npm install pnpm -g

# 安装依赖
pnpm install

cd到源码根目录

开发(调试）

pnpm dev

打包

pnpm build

鸣谢

最后修改：2024 年 09 月 11 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏