写在开头

• 又是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

Name	Secret
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