How I Host My Personal Site on Cloudflare
Conclusion
The kimura512.dev website operates on Cloudflare by converging compiled static assets and serverless edge functions onto Workers. By avoiding self-managed virtual servers, deployment collapses into a single declarative command. Next.js runs seamlessly through vinext on Workers, while content remains versioned directly in TypeScript alongside the repository.
1. Unified Deployment Pipeline
Production deployments use pnpm run build followed by wrangler deploy. The apex domain is strictly mapped, and preview workers are kept separate from production DNS. Verifying target worker environment names before deployment eliminates accidental overrides.
2. Asset Colocation and Image Delivery
Blog hero graphics reside in public/blog/ and are normalized using sharp. Uniform aspect ratios eliminate layout shifts across listing pages. Avoiding external asset hotlinking protects against unexpected CDN outages or broken links.
3. Defense-in-Depth Edge Security
Leveraging Cloudflare WAF, automated TLS, and strict Workers Secrets ensures confidential credentials never leak into git. Internal API routes are decoupled from promotional links, keeping non-public entry points isolated.
4. Cache Invalidation and Cache Purges
Following updates, verifying listings and content in incognito windows confirms edge cache invalidation. The single source of truth is git: diffs in repository data translate directly into deployed production state.
5. Cost-Conscious Web Performance
Heavy 3D canvases are restricted to the landing and About sections, keeping blog templates featherlight on mobile connections. Fast page loads directly minimize bounce rates.
6. Ephemeral Logging Practices
Because Workers runtime logs are ephemeral, incident reproduction steps are documented directly in technical notes and blog writeups, expediting future investigations.
7. Staging and Environment Separation
Preview workers use independent project names from production. Production secrets are registered solely via wrangler secret put, completely avoiding raw values in communication channels.
8. Subdomain Isolation
Secondary experimental tools remain on separate subdomains or external links. Focusing primary traffic on the apex domain keeps DNS management overhead minimal for a solo maintainer.
Summary
Workers serve as the edge delivery layer, git acts as the canonical data store, and TypeScript types govern content structures. This separation of concerns provides predictable long-term operations.
FAQ
Q. Why choose Workers over traditional VPS?
It combines globally distributed static hosting and dynamic edge APIs into a single zero-maintenance infrastructure.
Q. Is R2 storage required?
Blog graphics are colocated in the repository; R2 is reserved for user-generated content in standalone products.