shumatsumonobu

Posted on Mar 30

I Built a Hosting Diagnostic Tool on Cloudflare Workers

#nextjs #cloudflare #webdev #showdev

The Problem

$ hostme --why

Every time I finish building something, I hit the same wall: where do I deploy this?

Vercel? Netlify? Cloudflare? Railway? The options keep growing, and each one has different pricing, limits, and trade-offs. I wanted a tool that could cut through the noise — something fast, transparent, and opinionated enough to actually help.

So I built hostme.

What It Does

hostme is a terminal-style web tool that asks you 7 questions about your project and scores 10 hosting services to recommend your TOP 3.

The whole flow takes about 30 seconds. No signup. No tracking.

The Tech Stack

Next.js (App Router) + TypeScript
Tailwind CSS v4 — runtime theme variables via CSS custom properties
framer-motion — scroll animations on the landing page
Cloudflare Workers via @opennextjs/cloudflare
Dynamic OGP — next/og ImageResponse

Building the Terminal UI

The entire UI is designed to look like a terminal. Here's the approach:

Typing animation: A custom TypingText component renders text character by character. Speed scales with text length — short strings type slower (more dramatic), long strings type faster (less tedious).

Keyboard navigation: Every page responds to keyboard input. Number keys select options, Enter confirms, Backspace goes back. The goal: you should be able to complete the entire diagnosis without touching the mouse.

CSS theming: All colors are CSS custom properties in :root. The terminal green (#00ff41 on #0a1a0a) gives that retro feel while maintaining WCAG contrast ratios.

The Scoring Algorithm

Each of the 7 questions maps to a score matrix: every answer awards 0–3 points to each of the 10 services.

scoreMatrix[question][answer][service] → 0 | 1 | 2 | 3

3 = ideal match
2 = good fit
1 = acceptable
0 = not recommended

Region bonuses are applied separately — e.g., Cloudflare Workers gets +2 in Asia due to its edge network.

The scoring logic is fully transparent: users can view the complete matrix on the /about page.

Dynamic OGP on Cloudflare Workers

This was the trickiest part. I wanted each diagnosis result to generate a unique OGP image showing the user's #1 recommendation.

The problem: next/og (powered by Satori) works on Cloudflare Workers, but font loading via self-referencing fetch fails silently. Workers block loopback requests.

The solution: Load fonts from Google Fonts CDN with a try-catch fallback:

let fontData: ArrayBuffer | undefined;
try {
  const res = await fetch("https://fonts.gstatic.com/s/jetbrainsmono/...");
  if (res.ok) fontData = await res.arrayBuffer();
} catch {
  // Fall back to default font
}

return new ImageResponse(<OgpComponent />, ogpOptions(fontData));

If the font fetch fails, the image still renders with a default font. No 500 errors.

Lightweight i18n

Instead of heavy i18n libraries, all UI text lives in a simple Record<Lang, TextMap>:

export const uiText: Record<Lang, UiText> = {
  ja: { start: "診断スタート", ... },
  en: { start: "Start Diagnosis", ... },
};

Language is determined by URL parameter (?l=ja), and document.documentElement.lang is set dynamically. Total i18n code: ~200 lines across 2 files.

What I Learned

Cloudflare Workers have quirks — no loopback fetch, Edge Runtime not always better than Node.js runtime
Terminal UIs are surprisingly engaging — keyboard navigation makes the tool feel fast and fun
Transparent scoring builds trust — showing the algorithm removes the "black box" skepticism

Try It

→ hostme.dev — find your ideal hosting in 30 seconds

The scoring logic is fully transparent — check the /about page to see exactly how it works.

What's your go-to hosting for side projects? I'm curious how you decide. Drop a comment — I'd love to compare notes.

Built by @shumatsumonobu. We ship on Sundays.

DEV Community