Uptime Monitor

🚀 基于 UptimeRobot API 的现代化在线状态监控面板

一个开源、美观、易用的网站状态监控解决方案，实时展示您的网站可用性和性能数据。

查看演示 · 报告问题 · 功能请求

✨ 功能特性

🌟 现代化界面 - 基于 React 18 构建，响应式设计，完美适配桌面端和移动端
📊 实时监控 - 通过 UptimeRobot API 实时显示网站状态和可用性
📈 数据分析 - 展示历史数据、统计信息和 uptime 趋势图
🎨 高度可定制 - 支持自定义配置、主题和品牌化
🌐 多语言支持 - 中文界面，技术术语双语显示
⚡ 零配置部署 - 纯静态文件，可部署到任何静态托管服务
🔒 安全可靠 - 支持只读 API 密钥，保护您的数据安全
📱 移动端优化 - 专为移动设备优化的用户界面

🚀 快速开始

前置要求

UptimeRobot 账户和 API 密钥
基础的网页托管服务（Nginx、Apache、静态存储等）

方式一：直接部署（推荐）

下载最新版本

1
2
3

# 下载预构建文件
curl -L -o uptime-monitor.zip https://github.com/yb/uptime-monitor/releases/latest/download/uptime-monitor.zip
unzip uptime-monitor.zip

配置项目

编辑 public/config.js 文件：

window.Config = {
  SiteName: '我的状态监控',  // 显示标题
  ApiKeys: ['your-api-key'],  // UptimeRobot API 密钥
  CountDays: 60,              // 显示天数
  ShowLink: true,             // 显示站点链接
  Navi: [                     // 导航菜单
    { text: '首页', url: 'https://example.com' },
    { text: 'GitHub', url: 'https://github.com/username' }
  ]
};

上传到服务器

将所有文件上传到您的网页托管空间即可。

方式二：本地开发

# 克隆仓库
git clone git@github.com:BeihaiWiki/uptime-monitor.git
cd uptime-monitor

# 安装依赖
npm install

# 启动开发服务器
npm start

# 构建生产版本
npm run build

📋 配置说明

参数	类型	说明	默认值
`SiteName`	string	网站标题	`"Uptime Monitor"`
`ApiKeys`	string[]	UptimeRobot API 密钥数组	`[]`
`CountDays`	number	显示天数	`60`
`ShowLink`	boolean	是否显示站点链接	`true`
`Navi`	object[]	导航菜单配置	`[]`

高级配置

window.Config = {
  // ...基础配置...

  // 高级选项
  AdvancedConfig: {
    includeResponseTimes: false,  // 包含响应时间数据
    enableTimezone: true,         // 启用时区显示
    maxMonitors: 50,             // 最大监控器数量
    refreshInterval: 60000       // 刷新间隔（毫秒）
  }
};

🛠️ 技术栈

前端框架:
构建工具:
HTTP 客户端:
样式预处理:
日期处理:
工具提示:

📦 部署指南

静态托管服务

本项目可以部署到任何支持静态文件的托管服务：

服务	部署方式	说明
GitHub Pages	自动部署	连接仓库自动构建
Netlify	拖拽部署	直接拖拽构建文件夹
Vercel	Git 集成	连接 GitHub 仓库
阿里云 OSS	上传文件	静态网站托管
Nginx	配置代理	反向代理到静态文件

🔧 配置详解

基础配置

编辑 public/config.js 文件进行基础配置：

window.Config = {
  SiteName: '我的状态监控',  // 显示标题
  ApiKeys: ['your-api-key'],  // UptimeRobot API 密钥
  CountDays: 60,              // 显示天数
  ShowLink: true,             // 是否显示站点链接
  Navi: [                     // 导航菜单
    { text: '首页', url: 'https://example.com' },
    { text: 'GitHub', url: 'https://github.com/username' }
  ]
};

Nginx 配置示例

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/uptime-monitor;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 缓存静态资源
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

API 代理配置（可选）

如果遇到 CORS 问题，可以配置 API 代理：

server {
    listen 80;
    server_name api-proxy.your-domain.com;

    location / {
        proxy_ssl_server_name on;
        proxy_pass https://api.uptimerobot.com/;
        proxy_hide_header Access-Control-Allow-Origin;
        add_header Access-Control-Allow-Origin * always;
    }
}

🤝 贡献指南

我们欢迎所有形式的贡献！请阅读我们的贡献指南了解详细信息。

如何贡献

Fork 本仓库
创建功能分支 (git checkout -b feature/amazing-feature)
提交更改 (git commit -m 'Add some amazing feature')
推送到分支 (git push origin feature/amazing-feature)
创建 Pull Request

开发环境设置

# 安装依赖，推荐使用pnpm
npm install

# 启动开发服务器
npm start

# 运行代码检查
npm run lint

# 构建生产版本
npm run build

📄 许可证

本项目采用 MIT 许可证开源。

🙏 致谢

UptimeRobot - 提供强大的监控 API
React - 现代化的前端框架
uptime-status - 一代开发者
所有贡献者和支持者

📊 项目统计

如果这个项目对您有帮助，请给我一个 ⭐️

Made with ❤️ by BeiHaiWiki

Star History

有需要或问题联系我

也可以关注我的博客

微信	QQ