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

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

Next: [Architecture & Trade-offs →]

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

Sign-up required — just to format a JSON string?
Ad overload — the actual tool gets squeezed into a corner
Privacy concerns — your JSON might contain API keys, and the tool sends it to a server
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

Requirement	Meaning
Pure client-side	All logic runs in the browser
Zero server cost	Static hosting, no Node.js backend
150+ pages	One page per tool, SEO-friendly
Bilingual (EN/ZH)	i18n support
Dark/Light mode	User preference
Mobile responsive	Works on all devices

Why Not Other Frameworks?

Option	Pros	Cons	Verdict
Vanilla HTML/JS	Simple	Managing 150+ pages is painful	Too slow
VuePress / VitePress	Fast	Docs-oriented, not for interactive tools	Not flexible enough
Nuxt SSR	Powerful	Needs a server	Violates zero-cost principle
Next.js 15 + `output: 'export'`	SSR SEO + client interactivity + static hosting	Has pitfalls (covered later)	✅ Best balance

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:

Part	Title	Core Problem
1	Architecture and Trade-offs	Structure, reusability & trade-offs
2	React 19 Hydration Mismatch in Static Export	SSR/CSR inconsistency
3	Cloudflare Pages Blank Page: the index.txt Bug	Content negotiation mechanism
4	Why Node.js Libraries Fail in the Browser	`fs` dependencies, ESM/CJS interop
5	Sentry Source Maps: From 0% to Full Resolution	Tree-shaking, HTTP API, region detection
6	Client-Side Encryption with Web Crypto API	MD5 gap, AES-GCM, HMAC
7	Free Performance Monitoring: PageSpeed CI	Zero-cost Core Web Vitals monitoring
8	Cloudflare Cache Hit Rate: 7% → 90%	3 Cache Rules + localization optimization
9	Perfect Dark Mode: From Hydration Error to Zero Flicker	Troubleshooting 8 pitfalls
10	6 Pitfalls of Multilingual Sites	query string → path prefix, 3 rounds of redesign

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

📚 This is Part 1 (Opening) of the UtlKit Tech Series — > - 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.