宝可梦历险记

site-status ​

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

site-status 是一个基于 UptimeRobot API 的开源站点在线状态监测面板。相比 UptimeRobot 提供的原版界面，site-status 更加美观易用。该项目基于 Nuxt 开发，可以直接部署 Cloudflare Pages 服务中。相比 Uptime Kuma 等完全自部署的服务，基于 UptimeRobot 和 Cloudflare Pages 的部署方式可以保证监测界面更加稳定，不会出现网站服务和可用性监测 All in Boom 的情况。site-status 在 GitHub 仓库中介绍了多种部署方式，本文将以 Cloudflare Pages 为例介绍其基本部署方法及简单的自定义流程。

Demo ​

Demo password（密码）: 123456

事先准备 ​

  • 您需要先到 UptimeRobot 添加站点监控，并在 My Settings 页面或者 API 管理 页面获取类型为 Read-Only API Key 的 API Key，或者使用用于单独监视器的 Monitor-specific API keys（ 不要使用 Main API key ）

部署流程 ​

1. Fork 官方仓库 ​

  • 打开 GitHub，进入官方仓库，star 并 fork一份到自己的账户中
  • 按照下方部署操作来安装依赖
  • 在 .env 文件中进行配置修改
  • 将打包后的文件上传至网站空间或者直接使用 Vercel 或者 Cloudflare 直接部署该项目

2. 注册 UptimeRobot 并获取 API ​

  • 访问 UptimeRobot 官网，注册免费版账户。完成后登陆仪表盘左侧点击 Monitoring 监测，然后右上角点击 “New monitor” 新建监测任务。

  • 选择监测类型，包括 Http，Keyword，ping 以及 port 类型，然后输入需要监测服务的地址，设置间隔时间：

  • 点击左侧边栏的“ Integrations & API ”按钮，选择 API，新建一个 Read-only API key 并复制下来。

3. 个性化设置 ​

回到自己 Fork 的仓库中，修改下列代码：

打开 /app/components/SiteFooter.vue 文件，在约 52 行处修改 linkData 字段中的 github，home 和 email 变量为自己的地址。这三个变量分别对应页脚处的三个 icon，修改后用户可以通过点击 icon 跳转到对应的页面。

ts
const linkData = {
  github: "https://github.com/",
  home: "https://02Gamer.top/",
  email: "mailto:[email protected]",
};

但这样修改会导致页脚的作者署名超链接变成自己的主页和 GitHub 地址。虽然该项目使用了 MIT License，但出于对作者的尊重，建议添加一个新变量用于存储 IMSYY 和 SiteStatus 字段所指向的链接。

ts
const metaData = {
  author: "https://imsyy.top", // https://02gamer.top/
  project: "https://github.com/imsyy/site-status",
};

由于变量名发生了变化，因此需要修改约 19 行处的 jumpLink 为：

ts
        <n-text depth="3" @click="jumpLink(metaData.project)">
          SiteStatus
        </n-text>

34-35 行处的 jumpLink 为：

ts
        Copyright &copy; 2025 - {{ new Date().getFullYear() }}
        <n-text depth="3" @click="jumpLink(metaData.author)"> GAMER </n-text>

如果需要其他个性化设置，也可以在 /app/components/ 目录中修改对应的 Vue 组件。

4. 在 Cloudflare Pages 或 Vercel 部署 ​

  • 本项目默认使用 Cloudflare Pages 来行部署

  • 可以使用全新的 NuxtHub 来快捷的部署本项目，如果您有在 Vercel 上部署项目的经历，那么过程是大致相同的，当然，也可以使用 Cloudflare Pages 来部署

  • 在点击下一步之前请先配置好环境变量，具体内容请参考 .env.example 文件中的内容，其中 API_KEY 为必填项

  • 访问 Cloudflare Pages 官网，登陆 Cloudflare 账号。进入 Workers 和 Pages 界面，点击蓝色的 “创建” 按钮并选择建立新的 Pages，点击 “通过导入现有 Git 存储库创建”。

  • 绑定 GitHub 账号，选择刚刚 Fork 并修改好的 Site-Status 仓库，点击 “开始设置”，然后进入 “设置构建和部署” 页面。在构建设置处将框架预设选为 “Nuxt.js”，在环境变量处设置刚才获取的 API Key。

  • 然后点击 “保存并部署”。当看到页面显示 “ Success: Your site was deployed!” 时，代表部署已完成，可以访问并查看状态指示页了。部署完成后，如果环境变量需要改变，可以点击进入详情页进行修改，然后重新生成部署。之后可以按需添加自定义域，以实现使用自己的域名访问状态监控页。另外部署完成后若对 GitHub 仓库进行修改，Cloudflare Pages 也会自动重新部署。

  • 若进展顺利，你就可看到项目主页面了

Vercel 部署

Deploy with Vercel

  • 点击上方按钮以前往部署
  • 在环境变量中添加下方的内容（ 重要 ）
查看
  • 如何开启站点加密

在环境变量中添加 SITE_PASSWORD 和 SITE_SECRE_KEY，都必须填写，缺一不可，其中 SITE_PASSWORD是站点密码，SITE_SECRE_KEY 是加密密钥，可随意填写

变量名称值
DEPLOYMENT_PLATFORMauto
API_KEY
SITE_TITLE站点监测
ts
# API URL - 必须
## 由于官网存在潜在的 CORS 问题，可以使用反向代理来解决这个问题（请自行设置）
## 更多详情请参考项目 README.md.
API_URL="https://api.uptimerobot.com/v2/"

# UptimeRobot Api Keys - 必须
## 本项目只需要 API Keys
## https://dashboard.uptimerobot.com/integrations
API_KEY=""

# 部署平台 - 必须
## Cloudflare （ 默认 ） 丨 auto
## 如果您使用 cloudflare 以外的平台, 请更改为 auto
DEPLOYMENT_PLATFORM="Cloudflare 公司"

# 站点标题
SITE_TITLE="IMSYY 站点监测"

# 网站描述
SITE_DESCRIPTION="一个简约的站点监测 | a simple site-status pages, power by uptimerobot"

# 网站关键词
SITE_KEYWORDS="站点监测,监测,监控"

# 网站Logo
SITE_LOGO="/favicon.ico"

# ICP 备案
## 在中国，您需要提供 ICP (Internet Content Provider) 备案号.
## https://beian.miit.gov.cn/
SITE_ICP=""

# 日志天数
## 要计算的天数
## 建议您填写 30 - 90
COUNT_DAYS=60

# 站点链接外显
## 是否显示网站链接
SHOW_LINKS=true

# 密码
## 如果要保护数据，可以设置密码
SITE_PASSWORD=""
## 用于 jwt 验证的密钥，必填
SITE_SECRE_KEY="site-status"

常见问题 ​

如果部署成功后访问页面出现无法获取的错误，请检查环境变量是否配置成功。如果详情页中的环境变量为空，重新添加环境变量并重新生成部署即可。

旧版 ​

其他-安装依赖 ​

bash
# 若没有 pnpm
npm install pnpm -g

# 安装依赖
pnpm install

开发

bash
pnpm dev

打包

bash
pnpm build

参考 ​

域名 ​

本站已运行: - 天 - 时 - 分 - 秒

Copyright © 2025 Powered by Gamers VitePress Cloudflare Namecheap umami