精基于UptimeAPI的网站监测搭建教程(Build)

前の戏

相信各位站长都有自己的网站吧！！

那么，想必这个网站监测是十分中肯的！(和松纸宝宝同款哦~)

松宝宝の监测：https://uptime.song3060.top

😈😈😈😈😈😈😈😈😈

Warning ：本期难度极大！！！请无关人员迅速离场！！！

Warning ：本期难度极大！！！请无关人员迅速离场！！！

Warning ：本期难度极大！！！请无关人员迅速离场！！！

Warning ：本期难度极大！！！请无关人员迅速离场！！！

Warning ：本期难度极大！！！请无关人员迅速离场！！！

😈😈😈😈😈😈😈😈😈

Preparations Part 1

1. 聪慧的大脑
2. 一台微软视窗电脑(手机termux构建性能太差，不建议)
3. 因特网络连接
4. 若必需，请自行准备代の理

Preparations Part 2

Links

请注册UptimeRobot账号：UptimeRobot Dashboard （可能需要代の理）

请注册EO账号：https://console.tencentcloud.com/edgeone/zones （支持中文）

源码基于vue，原始仓库地址为：https://github.com/JLinmr/Uptime-Status（可能需要代の理或镜像站）

不要忘了给开发者Star支持

Step 1

按照上方所诉，注册UR账号并来到API页面，并复制Read-Only key备用:

（🥵请勿使用Main key，这可能造成你的隐私泄露或滥用）

（🥵请勿使用Main key，这可能造成你的隐私泄露或滥用）

（🥵请勿使用Main key，这可能造成你的隐私泄露或滥用）

Step 2

访问GITHUB仓库，下载源码(本期为本地Build基础版教程，至于托管请自便！！！)

请解压保存源码项目文件夹！！！

Step 3

按照GIF所示，找到你解压的文件夹，打开cmd

不会就多看几遍！

请保留打开的CMD窗口，现在我们要下载🥵Node.js🥵

官网：https://nodejs.org/

下载链接直达Node.js (64)

下载链接直达Node.js (32)

只需要一直点next就OK了，因为我的环🥵境特殊，就不演示了

Step 4

回到刚刚的CMD窗口，先检查node是否安装好，请执行：

npm

出现类似页面就说明装好了，没装好的话返回Step 3😋

现在，执行如下代码来安装依赖包：😋

pnpm install

第一次安装会从网络下载，请耐心等候，出现如下页面则表示安装成功：😋😋

（出现Warning可忽略）

Step 5

💖💖💖祝贺你！！！你已经超过90%的同学了！！！😋😋😋

接下来，请到你的源码项目文件夹，修改.env的内容：

返回到CMD窗口运行以下命令：

pnpm build

看到有绿字表示构建完成，此时项目文件夹中会出现一个/dist文件夹，我们先放一边

Step 6

欧克，现在我们就可以开始部署了

部署平台有很多，比如EdgeOne Pages，Cloudflare Workers，Vercel，Netfily，Github

这里我推荐新手使用EdgeOne Pages，免费而且速度快支持中文，其他平台可以咨询我😏😏😏

登录后台 EO（国际站）

如图所示点击创建项目——->直接上传，接着上传/dist文件夹(注意是文件夹！！！)

上传完成后大概会是这样，点击”预览“就可以看看有没有问题

至于绑定自己的域名只需要点击“项目设置”就能看到了，添加CNAME即可

END

本期难度远超往期，重点考察同学们对常用工具的熟练度，以及命令行的常规技巧，综合性较强。

评论区可以交作业！💟💟💟

Copyright

主发布地址 墨宇’s blog

未经作者允许严禁搬运，文章中一切文件均开源，禁止倒卖，防止被骗！！