给你的博客网站添加一个站点监测服务

一、效果预览

我的站点监测页面，直接看预览效果。

琅環书生·站点监测

二、原理介绍

   网站监测的原理很简单，就是通过定时访问网站，获取网站的响应时间，如果响应时间超过预设的阈值，就认为网站出现了问题。网站监测服务实际上就类似于Prometheus一样，采集数据，然后给你展示，简言之，就是需要数据+展示。
   所以本次教程采用的是Uptimerobot作为监测服务商，它是一家提供网站监测服务的公司，免费的够用了。而将数据展示到自己的网站，则使用了IMSYY大神的开源项目site-status。

二、站点监测服务(数据部分)

  1. 注册账号 点我直达注册Uptimerobot
  2. 添加需要监测的网站

监测的类型如上图所示，可以自己根据实际情况选择：https/Keywords/ping/port可选，邮箱提醒可自己决定是否开启，开启后监测到有问题的站点会给你发邮件。
3. 配置完成预览

  1. 生成UptimeRobot的APIKey

戳我直达获取APIKey，注意不要获取Main API key，而是Read-only API key，复制保存，后面会用到。

只要你的网站正常没问题的，显示的都是绿色，至此你的网站数据监测部分已经完成了，加下来就是展示部分了。

三、网页展示部分

  1. fork项目 site-status到你的仓库；
  2. 在你fork后的项目里新增.env文件（原项目里有个.env.example文件，可参考修改成属于自己的.env）,或者复制下面的代码，根据自己实际修改。最重要是的两个参数：
    API_KEY: 你刚刚生成的Key
    DEPLOYMENT_PLATFORM: auto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# API URL - required
## Due to potential CORS issues with the official website, you can use a reverse proxy to resolve this (please set it up yourself).
## For more details, please refer to the project README.md.
API_URL="https://api.uptimerobot.com/v2/"

# UptimeRobot Api Keys - required
## This project only requires Read-only API key
## https://dashboard.uptimerobot.com/integrations
API_KEY=""

# Deployment platform - required
## cloudflare ( default ) | auto
## If you use a platform other than cloudflare, please change to auto
DEPLOYMENT_PLATFORM="cloudflare"

# Site Title
SITE_TITLE="IMSYY 站点监测"

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

# Site Keywords
SITE_KEYWORDS="站点监测,监测,监控"

# Site Logo
SITE_LOGO="/favicon.ico"

# ICP Filing
## In China, you need to provide an ICP (Internet Content Provider) filing number.
## https://beian.miit.gov.cn/
SITE_ICP=""

# Count Days
## The number of days to count
## You are advised to fill in 30 - 90
COUNT_DAYS=60

# Show Links
## Whether to show sites links
SHOW_LINKS=true

# Password
## If you want to protect the data, you can set a password
SITE_PASSWORD=""
## Key used for jwt verification, required
SITE_SECRE_KEY="site-status"

四、Vercel部署

  1. 有Vercel的直接登录，没有的注册Vercel账号 点我直达注册Vercel；
  2. 导入项目 点我直达导入项目，选择你fork后的项目，点击Deploy按钮，等待部署完成；
    上面两个环境变量，如果没在.env文件里设置，也可以在Vercel项目设置里设置；
  3. 配置域名，vercel需要绑定自己的域名才能正常访问；
  4. 配置完成后，访问你的域名就能打开部署的站点监测页面了。
  5. 当然你也可以通过iframe标签的方式嵌入到自己的博客里，这样你的站点就能显示在自己的博客里了。
1
<iframe src="你站点监测页面的链接" style="width: 100%; height: 100%; border: none;"></iframe>

如果部署有任何问题，欢迎留言讨论~