开始准备

  1. 一个域名 可以使用免费 二级域名

  2. 一个Github账号

  3. 一个UptimeRobot账号

  4. 一个腾讯/Cloudflare/Vercel账号(任一)

本次搭建的项目是 梦爱吃鱼 大佬的 Uptime-Status 项目

项目地址: https://github.com/JLinMr/Uptime-Status

演示站点: https://status.yeqing.net/

开始教程

获取UptimeRobot 的 API_KEY

访问https://uptimerobot.com/ 注册账号

在 Integrations & API 中 点击API 在右侧的 Main API keys 中创建仅读Key 复制Key 这是下一步中需要的API_KEY

在 Monitors中 添加监控站点

复刻仓库

你需要准备一个Github账号 Github账号就不过多说明了

访问 https://github.com/JLinMr/Uptime-Status 点击右上角的Fork

点击 Create fork 创建复刻仓库

完成后 你可以使用Git Github-Desktop等工具拉取仓库在本地编辑 然后推送至仓库 也可以直接在网页上进行编辑

点击 .env 文件

点击编辑图标

只需要修改第2行 API_KEY 和 第11行 站点名称

然后点击右上角 Commit changes 再次点击弹出窗口的 Commit changes 保存更改

完成后 选择下方任意一种方式完成部署

使用Cloudflare Pages部署

你需要准备一个Cloudflare账号 并开通Pages服务

访问 https://dash.cloudflare.com/ 点击左侧计算(Workers) 点击子类 Workers和Pages

点击右侧的创建 创建一个Pages空间

选择 Pages 选择第一个 点击右侧的开始使用 用Git仓库导入 在新的页面 连接你的Github账号

选择我们刚刚创建的Github仓库 点击开始设置

预设框架选择 Vue

然后点击保存并部署 等待部署构建完成

构建完成后 点击添加自定义域

设置自定义域名 添加你的域名 使用CName接入 按提示添加CName解析记录

等待状态变为活动后 尝试访问 (演示地址:https://status-cf.yeqing.net/)

使用 腾讯云 EdgeOne Pages部署

你需要准备一个腾讯云账号 可能需要实名?

访问https://console.cloud.tencent.com/edgeone/pages 我们将使用Edge One的Pages 目前还是免费使用

选择第一个 导入Git仓库

绑定你的Github账号 选择刚刚创建的仓库

配置如上图 基本无需修改

如果你的域名没有备案 选择全球可用区(不含中国大陆)

确定配置无误后 点击开始部署 等待部署完成

点击项目设置 点击添加自定义域名

和Cloudflare Pages类似 输入域名 并添加对应的CName解析记录

等待部署完成后 尝试访问(演示地址: https://status-eo.yeqing.net/)

使用 Vercel部署

你需要准备一个 Vercel 账号

访问 https://vercel.com/ 点击Import Project

绑定你的Github账号 并选择刚刚创建的仓库

选择Vue.js 然后点击Deploy 等待编译部署完成

完成后 前往控制面板 点击Settings -> Domains 点击Add Domain 添加域名(默认分配的域名被墙 必须添加自己的域名才能正常访问)

这里没有添加CName的提示 但和前面两种部署方式差距不大 CName值为默认分配的域名

完成后 我们尝试访问(演示地址: https://status.yeqing.net/)