I Spent 2 Months Building a 150+-Tool Website with $0 Server Cost

📚 This is Part 1 (Opening) of the UtlKit Tech Series — Series Index →

• Next: Architecture & Trade-offs →

As a frontend developer, I’ve used countless online tools. And almost all of them suck:

1. Sign-up required — just to format a JSON string?
2. Ad overload — the actual tool gets squeezed into a corner
3. Privacy concerns — your JSON might contain API keys, and the tool sends it to a server
4. Fragmented — formatters on one site, Base64 on another, hashing on a third

So I decided to build one that doesn’t: no sign-up, no ads, pure client-side computation, data never leaves the browser.

The goal was simple — if I need this tool, someone else does too.

The result is utlkit.com: 150+ tools, 8 categories, zero server costs.

Requirements

Why Not Other Frameworks?

The Key Decision: output: 'export'

// next.config.js
const nextConfig = {
  output: 'export',       // Static export
  trailingSlash: true,    // Required for static files
  images: { unoptimized: true }, // No image optimization server
}

This means:

• ✅ Build output is plain HTML/CSS/JS files
• ✅ Deployable to any static host (Cloudflare Pages, Vercel, GitHub Pages)
• ✅ Zero server cost
• ❌ No API Routes, no Server Components, limited dynamic routing

Deployment: Zero Cost on Cloudflare Pages

Build output: out/ directory, ~14 MB
Hosting: Cloudflare Pages
Domain: utlkit.com
Monthly cost: $0

Build Pipeline

npm run build
  → next build (output: 'export')
  → Generates out/ directory
  → clean-index-txt.js (removes index.txt)
  → Outputs 150+ static HTML files

Cloudflare Pages CI/CD: git push → auto build → auto deploy, ~3 minutes to production.

What’s Coming Next in This Series

Above is the story and the tech choices. The following articles cover real-world pitfalls:

Each article includes full debugging process, code examples, and lessons learned.

📚 This is Part 1 (Opening) of the [UtlKit Tech Series — Series Index →](https://medium.com/@utlkit/list/utlkit-tech-series-4641b82092e6)

• Next: Architecture & Trade-offs →

Project Info

• Website: utlkit.com
• Stack: Next.js 15 + React 18 + TypeScript + Tailwind CSS
• Hosting: Cloudflare Pages
• Tools: 150+ tools, 8 categories
• Cost: $0/month

Part 2 will cover architecture design: directory structure, component abstraction, browser-only trade-offs, and i18n approach. Follow along for the full series.