aibestapp.top:一个全栈小网站的自我修养
这不是一个普通网站 第一次打开 aibestapp.top 的人,通常会以为这是一个 AI 资讯站或者工具导航站。这么说也没错,但仔细一逛就会发现——这其实是一个工具箱。 我的初衷很简单:做一个自己能用的、有实用价值的网站,而不是那种从别处搬运内容、同质化严重的"伪站点"。aibestapp.top 集成了 AI 工具导航、API 可用性检测、性格测试、网页小游戏,还有后续计划添加的教程文章模块。看起来杂,但每个功能都是我自己写出来的原创东西,这一点让我觉得踏实。 技术栈的选择逻辑 这个站的技术选型比较有意思。先说首页,打开就能看到一个 3D 粒子动画,不断旋转变化,视觉效果还算可以。这个动画是用 Three.js 写的,纯前端渲染,不需要后端资源支撑。 选择 Three.js 其实不是网站本身的需要。一个工具导航站,静态页面就够了,搞什么 3D 动画?但做个人项目的好处就在这里——你不必事事都从产品最优解出发。我刚好在学 Three.js,想找个实战项目练手,就直接拿首页当了试验场。技术选型这件事,在大厂项目里得考虑团队协作、维护成本、稳定性一堆东西,到了自己的项目,就可以任性一点,想用什么就用什么。 首页以外的子页面,我全部用了纯静态 HTML/CSS/JavaScript,没有引入任何前端框架。这个决定有几个实际好处:第一,没有构建步骤,写完了直接在浏览器打开就能预览,开发效率极高。第二,部署极其简单,把文件扔到 Nginx 的静态目录下,配个 HTTPS 就完事了。第三,零运行依赖,不存在版本冲突或者依赖包出问题的情况。 部署方面,服务器放在了香港,用 Nginx 做反向代理,HTTPS 证书通过 Certbot 自动续期,全程自动化。后端目前是零——整个站点全部静态,这也是为什么我敢说"零维护成本"。 四个核心功能模块 目前网站有四个主要页面,每个都有自己的定位和用途。 Toolbox —— AI 工具导航 这是站点的核心入口。我整理了一批常用的 AI 工具,按照功能分类做了导航。跟市面上的导航站不同,这里收录的工具都经过我自己实际使用和筛选,不是广撒网式的收录。每个工具我会写上简要的使用场景和体验评价,帮助访问者快速判断是否适合自己。 Key Checker —— API 密钥可用性检测 这个工具源于我自己的一个痛点。做 AI 相关开发,手头经常有多个 API Key,时间久了分不清哪些还能用、哪些已经过期。于是我写了一个检测工具,输入 API Key,它会自动调用 10 个常用 API 端点逐一验证,返回每个端点的可用状态。 技术实现上就是纯前端的 AJAX 请求,没有后端代理。这样做的好处是用户的 Key 不会经过我的服务器,隐私方面更安全。缺点是受浏览器跨域限制,部分 API 端点无法直接检测,这些还在想办法优化。 MBTI 性格测试 一个轻量级的 MBTI 测试工具。这个功能做得比较简单,就是标准的八维题目,用户回答完自动计算并展示性格类型。没有做后台数据统计,也没有用户系统。 ...