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

一、效果预览

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

琅環书生・站点监测

二、原理介绍

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

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

  1. 注册账号 点我直达注册 Uptimerobot
  2. 添加需要监测的网站
    监测的类型如上图所示，可以自己根据实际情况选择：https/Keywords/ping/port 可选，邮箱提醒可自己决定是否开启，开启后监测到有问题的站点会给你发邮件。
  3. 配置完成预览
  4. 生成 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
    yaml
    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 标签的方式嵌入到自己的博客里，这样你的站点就能显示在自己的博客里了。
    html
    1
    <iframe src="你站点监测页面的链接" style="width: 100%; height: 100%; border: none;"></iframe>

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