Half a Day to a Live Site: Claude Code Cuts Solo Dev Time from Days to Hours

Foreword

I resigned in 2026 and have now decided to start full-time independent development. The first thing to do is build a personal website — for blogging, showcasing products, offering services, and recommending tools, you need your own traffic portal.

I spent half a day using Claude Code to build a complete website from scratch with 7 pages, a blog system, product showcases, and a toolbox, then deployed it to Cloudflare Pages. The total annual cost is under $13.

This article fully reviews the tech stack choices and development process, focusing on Claude Code's efficiency performance in a real project.

Tech Stack: Why This Combination

Framework: Next.js 14 App Router

The core reason for choosing Next.js over plain React or Vue is just one thing: SSG (Static Site Generation) is extremely SEO-friendly.

• generateStaticParams automatically generates static pages for all dynamic routes (blogs, products, tools) at build time
• The metadata API configures independent title, description, and OpenGraph for each page
• No extra SEO plugins needed

Styling: Tailwind CSS

Atomic CSS, fast to write, and especially efficient when paired with AI generation. Claude Code has a strong grasp of Tailwind class names, requiring almost no manual style adjustments.

Content Management: Markdown + gray-matter

content/
├── blog/          # Blog posts .md
├── products/      # Product introductions .md
└── tools/         # Tool recommendations .md

Each article is a single .md file, with YAML frontmatter defining metadata:

---
title: "Article Title"
date: "2026-07-01"
category: "build-in-public"
tags: ["Claude Code", "Next.js"]
description: "Article description"
---

Deployment: Cloudflare Pages

Free, global CDN, automatic deployment on git push, automatic SSL issuance. The best home for a purely static site.

Claude Code Efficiency Test

Development Process

What I did: described the full requirements in natural language in the terminal.

What Claude Code did:

1. Initialized the project with npx create-next-app, configured TypeScript + Tailwind
2. Installed dependencies: gray-matter, react-markdown, react-syntax-highlighter, react-icons, etc.
3. Configured the @cloudflare/next-on-pages adapter
4. Wrote all page components (Home, About, Blog list/detail, Toolbox, Services, Contact)
5. Wrote global components (Navbar, Footer, Card component, Filter component)
6. Configured SEO metadata and responsive layout
7. Created sample Markdown content files
8. Generated sitemap.xml and robots.txt
9. Wrote the README deployment documentation

Efficiency Comparison

Task	Manual Estimate	Claude Code Actual
Project init + config	2-3 hours	10 minutes
Pages + components	1-2 days	2 hours
Cloudflare adaptation	1-2 hours (docs + debugging)	5 minutes (prior experience)
Content system setup	2-3 hours	15 minutes
SEO + sitemap	1 hour	5 minutes
Total	3-5 days	Half a day

AI Performance on Engineering Decisions

Here's a concrete example. During development, a version compatibility issue with the Cloudflare Pages adapter came up:

• @cloudflare/[email protected] requires next >= 14.3.0
• But Next.js 14.x only goes up to 14.2.35; version 14.3.0 simply doesn't exist
• Claude Code traversed all historical versions of the adapter on its own
• Found that 1.13.15 does not declare a next peer dependency
• Locked the version and refactored the blog list component from server-side dynamic to client-side static filtering

This quality of engineering decision-making would have taken me an hour or two to troubleshoot manually; the AI pinpointed it in minutes.

Key Project Architecture Points

Server Component vs. Client Component Boundaries

// ❌ Wrong: Client component references a module that depends on fs
"use client";
import { getAllPosts } from "@/lib/blog"; // blog.ts contains import fs

// ✅ Correct: Split data layer and constants layer
// lib/products.ts       — Server-side: fs reads Markdown
// lib/product-constants.ts — Client-safe: pure constant definitions
// components/ProductCard.tsx — Client: only references the constants file

Static Site Dynamic Filtering Approach

Cloudflare Pages does not allow dynamic server-side routes. The blog list's search and category filtering couldn't use searchParams, so it was changed to:

Server: SSG generates the full article list HTML
Client: useSearchParams + useState handles filtering and pagination
Wrapper: Suspense prevents CSR flicker

Pitfalls Summary

1. @cloudflare/next-on-pages version lock: 1.13.15; the latest version is incompatible with Next.js 14.2.x
2. setupDevPlatform() side effects: Pure static projects don't need Cloudflare Workers environment simulation
3. fs module client-side leak: Data reading and type constants must be split into separate files
4. Blog list dynamic routes: Cloudflare requires fully static; filtering logic goes on the client

Final Cost

Item	Annual Fee
Domain (Namecheap)	$11.48
Cloudflare Pages	Free
GitHub	Free
AI Tokens	~¥5

Under $13 a year, plus AI consumption totaling less than ¥100.

Summary

The Claude Code + Next.js + Cloudflare Pages tech stack is arguably the current optimal solution for indie developers:

• Development efficiency is 3-5x faster than manual coding
• Zero maintenance cost after deployment
• Full control over your own data
• Updating content only requires writing Markdown + git push

AI programming tools won't replace developers, but they enable one person to do what previously required a team. For indie developers, this means the barrier to a one-person company has been drastically lowered.

The project source code is open-sourced; stars and discussion are welcome.