# 搭建基于UptimeRobot接口的站点监测网站

**URL:** <https://forum.rainyun.com/t/topic/6544>\
**Category:** 云服务器 RCS\
**Created:** [2024 年1 月 5 日 12:14 UTC](https://forum.rainyun.com/t/topic/6544 "2024-01-05T12:14:40Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

作者： ![LMBlue](https://forum.rainyun.com/user_avatar/forum.rainyun.com/lmblue/32/3271_2.png) [@LMBlue](https://forum.rainyun.com/u/LMBlue)\
发布日期： [2024 年1 月 5 日 12:14 UTC](https://forum.rainyun.com/t/topic/6544/1 "2024-01-05T12:14:40Z")

</div>

# 什么是UptimeRobot

**王子公主请看以前的文章**  
[https://forum.rainyun.com/t/topic/6521/1](https://forum.rainyun.com/t/topic/6521/1)

# 开始

上次介绍了通过UptimeRobot免费监测网站状态并使用邮箱＋APP进行通知， ~~有没有一种可能假如手机突然掉了，然后就……刚好想看一下自己的网站还在没在正常运行呢~~  
**这是我搭建的：[https://status.lmb520.cn/](https://status.lmb520.cn/)**  
**这是原作者搭建的：[https://status.baiwumm.com/](https://status.baiwumm.com/)**  
**这是一位邻居搭建的：[https://lzh.xgr.cab/](https://lzh.xgr.cab/)**

## 搭建顺序

我们这里使用的是由白雾茫茫基于UptimeRobot编写的源码：  
[https://github.com/baiwumm/website-status](https://github.com/baiwumm/website-status)

1. 我们进入Github项目，然后下载项目源码
2. 改写`.env`文件  
 ![Screenshot_2023_1225_081225.png](https://forum.rainyun.com/uploads/default/original/2X/5/5ee8612d2e91d9e886358da4dec4c9eff3242588.png)  
第7、8行里的VITE\_API\_KEY一定要改成自己UptimeRobot账号里的Read-Only API Key（不改就是监测作者的网站）  
 ![Screenshot_2023_1225_081544.png](https://forum.rainyun.com/uploads/default/original/2X/3/38f8ce6cab38896c3af63ff0a26cb553baca2e8c.png)  
 ![Screenshot_2023_1225_082119.png](https://forum.rainyun.com/uploads/default/original/2X/a/ab392fc117332f877dc947c9e4f732e4b7f6687e.png)
3. 将打包后的文件上传至网站空间或者直接使用 Vercel 或者 Cloudflare 直接部署该项目

## 构建项目

你下载的源码，不可以直接上传到空间里，需要自行构建打包项目。然后才可以上传到空间使用PHP进行建站  
不会构建打包的话，可以百度。实在不行的话，可以把`.env`文件修改后通过邮箱（lmb@lmb520.cn）发给我并在林墨白的博客原文评论一下发送邮箱（不然我怕看不到）

1. 安装环境（不可以跳过）

```JAVA
# 若没有 pnpm
npm install pnpm -g
# 安装依赖
pnpm install

```

1. 进行开发（可以跳过这一步）

```JAVA
pnpm dev

```

1. 最后打包（不可以跳过）

```JAVA
pnpm build

```

1. 最后构建成功的源码会在`dist`文件夹，然后上传到空间上就可以了  
 ![Screenshot_2023_1225_083733.png](https://forum.rainyun.com/uploads/default/original/2X/9/9c28ffc0ac4a03c08c8116d7fd43e3728bbee110.png)

# 原文链接在这里

> 原文链接🔗  
> [https://blog.lmb520.cn/archives/770/](https://blog.lmb520.cn/archives/770/)