Cloudflare/Vercel项目推荐(4)

碎碎念

该系列更新到第四季啦！我曾发布过三个关于 Cloudflare 和 Vercel 平台的项目推荐，鉴于 Cloudflare 和 Vercel 等 Serverless 平台之间有许多共性，且项目较为难找，所以合并到了一起，但是实用且简单的项目仍然很难找，近期终于收齐了一些好玩有趣的项目，在这里分享给大家！

回看这段时间，转眼已是2025年三月末，望着日历上跳动的数字，突然惊觉距离正式开启职场生活已不足半年。四载校园春秋如白驹过隙，当初初入大学时的青涩模样仿佛就在昨日，而如今镜中倒映的轮廓，已然沉淀出岁月馈赠的从容与笃定。

或许成长的本质就是这般奇妙，在实验室彻夜调试代码的坚持，在小组项目中磨合沟通的耐心，在失败时咬牙重来的勇气，最终都化作滋养我们向前的力量。站在人生新篇章的门槛前，与其沉溺于往事的温存，不如以更昂扬的姿态拥抱未来。

希望今后的我，也依然可以永远保持对新技术的好奇，面对挑战不言退缩。愿与诸君共勉，无论技术之路还是人生征程，唯有敢于出发的人，才能真正实现一往无前！废话不多说，让我们看看今天的项目吧！后期计划合并更多类型的项目，而不仅仅局限于CloudFlare和Vercel，无服务部署的局限性还是太大啦！

项目总览

1. 前端工具
   • Json文件可视化：纯静态项目，可以格式化杂乱的Json内容，可视化显示，方便进行数据处理。
   • 多端带壳截图：纯静态项目，可以将网站显示到多个设备框格中，可以截出非常美观的展示页面，适合各种头图等。
   • 实时热点：依赖于CloudFlare部署的一个实时热点页面，不同于之前的前后端项目实时热点，该项目完全基于CloudFlare，可以说各有优点。
   • 今日热榜：不同于以上项目，该项目基于国内可靠api源，在前端直接请求并展示，完全不需要部署后端，成本最低，但是受到API稳定性的影响。
2. 功能性项目
   • 网站存档：可以随时存档任何感兴趣的网站，不会过期，数据存储在CloudFlare R2中，拥有较为完善的前后端管理系统，可以实现分享等功能。
   • 访问量分析：基于CloudFlare Page部署的网站分析仪表板，无成本，无需R2即可部署，前端面板简洁美观，数据齐全，适合无服务器自部署用户。
3. 闲着无聊
   • 塔罗牌：闲的时候可以来占卜一下呀~，一个趣味小项目，没有什么实用价值，但是比较好玩！

项目介绍

前端工具

部署

前端项目的部署基本上都一致，为了避免有水文的嫌疑，我将统一的部署教程就塞到前面啦，如果有不一样的我会单独说明。

基本上的部署步骤就是，复刻后，在各大平台导入即可，平台会自动识别项目类型并实现部署，这里我用vercel举例：

Vercel部署

如果想要本地开发，可以执行npm命令，首先下载包，然后运行测试，最后构建为静态文件:

代码语言：javascript代码运行次数：0运行复制

npm install --save
npm run dev
npm run build

部署这里不再细讲。

Json文件可视化

• 部署方式：Cloudflare Worker、Vercel、Github Page、Tencent eo page等