Website-Status：一个无需后端的网站监控页面！

介绍

Uptimerobot-Status重构了一个别的人的网站状态项目Uptime-Status，UI界面完全一致，有点儿腻了，偶然又看到网友的一张状态页的截图，故此想重新设计一个状态页，是的Website-Status诞生了，这个项目也是使用的目前最新的脚手架完成的，并且组件结构更为细化，更易于维护。每个网站的状态采用卡片的形式展示，而不是使用列表，更有仪表盘的感觉。

技术组成

整体使用的是Vite+TypeScript

ESLint+Prettier做语法检查+代码规范

具体的可以到Website-Status项目主页查看

大致效果如下：

未来

这个项目大致就是这个模样了，页面的改动只会是小修小改。

目前UI体验还有很多不足，自适应很差，后面会考虑做适配。

TS的设计模式还有点儿混乱，可能有空会做优化。

使用

使用方法其实跟Uptimerobot-Status一样，只需要配置好UptimeRobot的key就行了。具体的配置步骤参考使用uptime-status搭建网站监控页面

1. 编辑配置src/config/system-config.ts
2. 使用npm run build生成dist文件夹，将文件夹托管给Web服务器即可，如Nginx。

强烈建议：可以自己使用CloudFlare Workers自己代理服务器，参考-new 如何使用CloudFlare Worker搭建UptimeRobot接口代理并设置缓存时间。