写在开头

  • 又是CloudFlare Workers的项目,塞博活佛。伟大,无需多言。
  • 项目Github地址 --> 【链接直达
    官方文档 --> 【链接直达

  文档写的很清楚,本文做记录分享,有写不清楚的地方前往Documentation查看。


准备:

  • 自备GitHub账号,Cloudflare账号,最好一个托管在CloudFlare上的域名。
  • 若要使用通知功能,需要自备TG账号,和Vercel 帐户

网站部署完成展示:

开始部署

申请CloudFlare Workers API

  前往CloudFlare申请CloudFlare Workers API --> 【链接直达

  点击创建令牌 -> 点击编辑 Cloudflare Workers的使用模板

  账户资源所有账户 -> 区域资源所有区域 -> 点击继续已显示摘要

  点击创建令牌

  复制保存好用户API令牌

GitHub部署UptimeFlare

  前往GitHub创建repositories --> 【链接直达

  如果不希望仓库被人查看,点击Private,点击创建Create repositories

GitHub 部署配置部署网站

添加CloudFlare API

  点击Settings --> Secrets and variables --> Action --> New repository secret

NameSecret
CLOUDFLARE_API_TOKEN填写 CloudFlare API

配置网站监控

  修改uptime.config.ts文件

修改内容:

const pageConfig = {
  // 网站标题
  title: "lyc8503's Status Page",
  // 网站左上角链接
  links: [
    { link: 'https://github.com/lyc8503', label: 'GitHub' },
    { link: 'https://blog.lyc8503.net/', label: 'Blog' },
    { link: 'mailto:me@lyc8503.net', label: 'Email Me', highlight: true },
  ],
}

  设置highlight: true会显示链接高亮突出显示。

网站监控设置:

    {
      id: 'blog.manmandong.top',
      name: '慢慢懂の分享站',
      method: 'GET',
      target: 'https://blog.manmandong.top',
      tooltip: 'My typecho blog',
      statusPageLink: 'https://blog.manmandong.top',
      timeout: 10000,
    },
修改内容注释
id链接的标识,保持id唯一
name监控站显示名称
method设置监控类型,Http监控和TCP监控,我此处设置为‘GET’
tooltip鼠标悬浮在“name”上时显示的描述
statusPageLink设置点击“name”跳转链接
timeout超时时间,默认就好
headers设置请求头

  修改好后,提交修改。

  点击Action检查action自动运行部署,大约两三分钟就完成部署。

  显示绿色则表示部署完成,反之需要检查uptime.config.ts文件语法是否正确,CloudFlare API是否正确配置。

配置自定义域

  由于配置给的dev结尾域名访问性较差,添加自定义域,使用我们自己的域名进行访问。

  点击Workers and Pages --> 概述 --> uptimeflare --> 自定义域 --> 设置自定义域

  激活域

  到这里,就可以使用我们自己域名访问。

个性化设置

设置 icon

  修改pages/index.tsx文件 第52行

<link rel="icon" href="/favicon.ico" />

设置左上角标题

  修改components/Header.tsx文件 第35行

              UptimeFlare