- 自备GitHub账号，Cloudflare账号，最好一个托管在CloudFlare上的域名。
- 若要使用通知功能，需要自备TG账号，和Vercel 帐户
无服务器搭建网站监控
有看到一个有意思项目，用cloudflare+ UptimeFlare 就能搭建网站监控
写在开头
文档写的很清楚，本文做记录分享，有写不清楚的地方前往Documentation查看。
准备：
网站部署完成展示：
开始部署
申请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:[email protected]', 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