文章摘要
文章 AI
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结
投诉

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

项目

site-status

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

站点监测

特色

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

事先准备

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

修改并下载源文件

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

打包

安装依赖

1
2
3
4
5
# 若没有 pnpm
npm install pnpm -g

# 安装依赖
pnpm install

cd到源码根目录

开发(调试）

1
pnpm dev

打包

1
pnpm build

鸣谢