我花 2 个月做了个 103 工具的免费网站，0 服务器成本
📚 这是 UtlKit 技术系列第 1 篇（开篇） — 系列索引 →
- 下一篇：架构与取舍 →
做开发这些年，每次要用在线工具，很多时候体验很差：
- 要注册登录 — 格式化个 JSON 还要先创建账号
- 满屏广告 — 工具本身被广告挤到角落
- 数据隐私 — 你的 JSON 里可能有 token，但工具把它发到服务器处理了
- 功能分散 — 格式化工具在 A 站，Base64 在 B 站，Hash 在 C 站
所以我想做一个：不用注册、没有广告、纯前端计算、数据不出浏览器的工具站。
目标很简单——如果我需要这个工具，别人可能也需要。
最终做出来的是 utlkit.com：103 个工具，8 个分类，零服务器成本。
需求分析
| 需求 | 含义 |
|---|---|
| 纯前端计算 | 所有逻辑在浏览器运行 |
| 零服务器成本 | 静态托管，不需要 Node.js 后端 |
| 大量工具页面 | 每个工具一个页面，SEO 友好 |
| 中英文双语 | i18n 支持 |
| 暗色/亮色模式 | 用户偏好 |
| 手机适配 | 响应式 |
技术选型：为什么不选其他方案
| 方案 | 优点 | 缺点 | 为什么不选 |
|---|---|---|---|
| 纯 HTML/JS | 简单 | 103 个页面管理困难 | 开发效率太低 |
| VuePress / VitePress | 快 | 面向文档，不太适合交互型工具 | 模板不够灵活 |
| Nuxt SSR | 功能强 | 需要服务器 | 违背零成本原则 |
Next.js 15 + output: 'export' | SSR SEO + 客户端交互 + 静态托管 | 有坑（后面会说） | ✅ 最佳平衡 |
核心决策：output: 'export'
// next.config.js
const nextConfig = {
output: 'export', // 静态导出
trailingSlash: true, // 静态文件需要
images: { unoptimized: true }, // 没有图像优化服务器
}
这个配置意味着：
- ✅ 构建产物是纯 HTML/CSS/JS 文件
- ✅ 可以部署到任何静态托管（Cloudflare Pages、Vercel、GitHub Pages）
- ✅ 零服务器成本
- ❌ 不能用 API Routes、Server Components、动态路由参数（某些模式）
部署：Cloudflare Pages 零成本
构建产物：out/ 目录，约 14 MB
部署目标：Cloudflare Pages
域名：utlkit.com
月成本：¥0
构建流程
npm run build
→ next build (output: 'export')
→ 生成 out/ 目录
→ clean-index-txt.js (删除 index.txt)
→ 产出 103+ 个静态 HTML 文件
Cloudflare Pages 自动 CI/CD：git push → 自动构建 → 自动部署，约 3 分钟上线。
这个系列还会写什么
上面是故事和选型，后面的文章是项目整体架构设计和实际踩坑过程，希望能对其他朋友有所帮助：
| 篇目 | 标题 | 核心问题 |
|---|---|---|
| 1 | 架构与取舍 | 怎样的架构能提升开发效率 |
| 2 | React 19 静态导出报 Hydration Mismatch | SSR/CSR 不一致 |
| 3 | Cloudflare Pages 白页：index.txt 的坑 | content negotiation 机制 |
| 4 | Node.js 库在浏览器跑不了 | fs 依赖、ESM/CJS 互操作 |
| 5 | Sentry Source Map 从 0% 到完整解析 | tree-shake、HTTP API、区域检测 |
| 6 | Web Crypto API 做客户端加密 | MD5 缺失、AES-GCM、HMAC |
| 7 | 免费性能监控：PageSpeed CI | 0 成本持续监控 Core Web Vitals |
| 8 | Cloudflare 缓存命中率 7%→90%+ | 3 条 Cache Rules + 本地化优化 |
| 9 | 暗色模式完美切换：从 Hydration Error 到零闪烁 | 8 个坑的排查过程 |
| 10 | 多语言站点的 6 个坑 | query string → 路径前缀，3 次方案重构 |
每篇文章都有完整的排查过程、代码示例和经验总结。
📚 这是 UtlKit 技术系列第 1 篇（开篇） — 系列索引 →
- 下一篇：架构与取舍 →
项目信息
- 网站： utlkit.com
- 技术栈： Next.js 15 + React 18 + TypeScript + Tailwind CSS
- 部署： Cloudflare Pages
- 工具数： 103 个，8 个分类
- 成本： ¥0/月
第 2 篇将介绍架构设计：目录结构、组件抽象、浏览器内运行取舍、i18n 方案。如果觉得有帮助，欢迎关注系列更新。
