# How to build a website with Claude Code

> A step-by-step guide: connect Claude Code to a CMS over MCP, plan the site, build pages from blocks, review previews and publish static files.

URL: https://typeroll.com/blog/build-a-website-with-claude-code/  
Updated: 2026-11-02

GUIDE · 1 NOVEMBER 2026

There are two ways to build a website with Claude Code. It can generate a codebase, which is fast to start but leaves every later change to a developer or the agent. Or it can build inside a CMS through MCP, so the people who own the content can take over. This guide covers the second way.

[Start a 30-day trial](https://app.typeroll.com/login?mode=signup)

[Claude Code website builder](https://typeroll.com/claude-code-website-builder/)

![](https://typeroll.com/media/7a44db01b1b32692-halftones-eye-magenta-cyan-green.webp)

## 1. Set up a workspace

Create a project from the Typeroll site starter, so the brief, decisions and QA notes live in Git next to your conversation history:

```
npx @typeroll/mcp-server init my-site
```

Then connect the MCP server and sign in:

```
claude mcp add --transport http typeroll https://app.typeroll.com/api/mcp
```

Run `/mcp` in Claude Code, choose `typeroll` and complete the sign-in.

## 2. Start with a brief, not a prompt

Write down the purpose, the audience, the pages the business needs, the voice and the brand. The starter's interview asks one question at a time and saves the answers, so another session can continue where you left off. Choose a default share image here too: it is what people see when the site is shared.

## 3. Let Claude build the structure first

Ask for Content types, Page templates, the header and footer, Styles and design tokens before any pages. Then let Claude build pages from native, editable blocks. Work on a branch, so nothing reaches the live site until you merge it.

## 4. Review like an editor

Open the private previews on desktop and mobile. Ask Claude to fix what you see, and change small things yourself in the visual editor. Saving, previewing and publishing are separate steps.

## 5. Run the launch checks

Run the publication checks and the site readiness report. They cover descriptions, the share image, organization data, the 404 page, legal pages and structured data, each with a fix.

## 6. Publish to your own accounts

Connect GitHub and Cloudflare once. Publish, then point the domain at the new site. The source is in your repository and the static files in your Cloudflare account.

## 7. After launch

Editors use the visual editor or the built-in AI assistant for everyday changes. Claude handles bigger changes on a branch.

## Prompts to start with

> Read brief/site.md and propose a page plan with URLs. Don't write anything yet.

> Create the Content types and Page templates from the plan on a new branch.

> Build the home page from native blocks, then show me a preview link.

[Build a website with Claude Code — the full guide](https://typeroll.com/docs/guides/build-with-claude-code/)

## Related

- [Claude Code website builder](https://typeroll.com/claude-code-website-builder/)
- [Typeroll with Claude Code](https://typeroll.com/integrations/claude-code/)
- [A CMS for AI agents](https://typeroll.com/ai-agents/)

START BUILDING

## Try Typeroll Cloud for 30 days.

Free during the beta. No payment card. After the beta, USD 39 per month, or USD 29 per month billed annually.

[Start a 30-day trial](https://app.typeroll.com/login?mode=signup)

[Read the docs](https://typeroll.com/docs/)