I deployed fieldnotes-ai.com. Here's everything that broke along the way.

The site is live at fieldnotes-ai.com. Real domain, real Contentful content, real Next.js running on Vercel. It took longer than it should have and broke in several ways before it worked — including one break that had nothing to do with my code.

Here's the exact sequence.

The tools involved

• v0 — AI UI generator from Vercel. Describe a site, get a complete Next.js codebase.

• GitHub — where the code lives.

• Vercel — where the site deploys, connected to GitHub automatically.

• Claude Code — fixed the build error, committed the fix, co-authored the commit.

• GoDaddy — DNS records pointed to Vercel.

Five tools to get one site live. Worth knowing going in.

Step 1: v0 generated the full site in 4 minutes 49 seconds

I pasted a detailed prompt describing the design: Playfair Display headings, IBM Plex Mono UI elements, Lora body text, crimson accent #be2a2a, aged paper background, and an editorial field journal aesthetic. Six Contentful content types. Three nav items. Exact field mappings.

Here's where I want to give v0 real credit: it didn't just follow the prompt. It made its own design decisions and they were better than what I described. The typography hierarchy, the way the notes list breathes, the tools grid — v0 deviated from the spec and the site looks better for it. When an AI makes a creative judgment call that improves the output, that's worth noting.

4 minutes 49 seconds. 96.6% TypeScript.

Step 2: First Vercel deployment failed in 29 seconds

v0 pushed the code to GitHub and Vercel picked it up automatically. The build failed immediately:

The error was caused by using 'styled-jsx'. It only works in a Client Component but none of its parents are marked with "use client"

v0 had used styled-jsx for component styling throughout the codebase. Next.js 14 App Router doesn't allow styled-jsx in Server Components - the default for all components unless explicitly marked "use client". 7 errors across 11 files.

The v0 preview had shown this error too. I'd initially dismissed it as a preview environment limitation — but it was a real signal. The preview was right. Lesson: when v0's preview shows an error, take it seriously.

The Claude Code fix

cd v0-field-notes-ai-websiteclaude

claude

I typed:

Fix the Vercel build error. styled-jsx is being used in Server Components. Replace styled-jsx with regular CSS or Tailwind classes throughout the entire project so it builds successfully. After fixing, commit and push to main.

Claude Code's plan:

1. Add all styled-jsx CSS to globals.css

2. Remove styled-jsx blocks from all components

3. Build and verify, then commit and push

It migrated styles from 11 files into app/globals.css, verified the build locally, then committed with this message:

fix: replace styled-jsx with regular CSS to fix Vercel build error styled-jsx is not supported in Server Components. Moved all component styles from <style jsx> blocks into app/globals.css as regular CSS classes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

That last line is now in the Git history permanently. Claude Code added it without being asked. I'm keeping it.

Then Claude went down

Right as I was about to verify the deployment, Anthropic's Claude platform went down, more than four hours of technical issues affecting claude.ai, Claude Code, and the Anthropic console.

The Claude API powering business integrations stayed up. Consumer-facing surfaces did not. Anthropic cited unprecedented demand over the previous week. Daily signups were breaking records. Free users were up 60% since January. Claude had just hit number one on the App Store, beating ChatGPT for the first time.

The surge came from a very public moment where Anthropic took a principled stand on AI safety, and a large number of people responded by signing up. I was building a site powered by Anthropic tools on the day Anthropic went down, because Anthropic was growing too fast. That's a strange moment to have been building in public.

No AI, I used my knowledge

So I did what you can sometimes prove you still know how to do without AI: went back to GitHub, merged the fixed code from main back into v0's branch, and confirmed the v0 preview was now clean - no build errors, design rendering correctly.

The outage was actually useful. It forced a manual verification step I might have skipped.

DNS and SSL

Once the site was deployed successfully, I pointed my GoDaddy DNS records to Vercel. Vercel provisioned the SSL certificate automatically. The whole process took about 10 minutes - most of that was DNS propagation.

If you've ever manually provisioned SSL in a previous era of web infrastructure, this feels like magic. Vercel deploying from a GitHub push feels like magic, too. The entire infrastructure layer just disappeared.

Real Contentful content loaded

fieldnotes-ai.com. Field Note #001 showing. Tools grid populated. Real content pulled live from Contentful via the CDA token in Vercel environment variables.

The three env variables that made it work:

CONTENTFUL_SPACE_ID = your_space_id

CONTENTFUL_ACCESS_TOKEN = your_cda_key

CONTENTFUL_ENVIRONMENT = master

CONTENTFUL_ACCESS_TOKEN is the Content Delivery API key — read-only, safe for environment variables. Not the CMA token from Field Note #001, as we are using for Claude Code. Different key, different trust level, different location.

The full cost — two days, one live website

npx ccusage@latest session

Two days of Claude Code sessions:

• Contentful space setup (Field Note #001): $1.70

• Background subagents for #001: $0.06

• styled-jsx fix and deployment: $0.91

• Background subagents for deployment fix: $0.03

• Total: $2.70

3.4 million tokens processed. 93% were cache reads. Claude Code automatically routed cheaper parallel tasks to Haiku 4.5 subagents both times without being asked.

The claude.ai thinking — design decisions, content modeling, writing these Field Notes — is bundled into the Max plan and not individually trackable. The execution was $2.70. The thinking isn't separately measurable.

What I'd do differently

Run /init in Claude Code before any task to generate a CLAUDE.md. I forgot. Every future session in this repo starts with slightly less context because of it. Fixing that before Field Note #003.

What's next

The site is live but the design needs iteration. v0 made good creative decisions — now I want to make intentional ones on top of them. Field Note #003 will cover using Claude Code and Cursor working together.

The Co-Authored-By: Claude Opus 4.6 commit is staying in the history.