Build a Lightning Fast, SEO-Ready Website with Astro, Claude, and Cloudflare

Why Astro Is the Secret Weapon:

Most people haven't heard of Astro JS yet. It's an up and coming framework built specifically for content driven websites, and it's become one of the best website frameworks available for SEO.

Unlike builders like Lovable or Bolt, Astro generates clean, fast, structured code by default. You're not fighting against the platform to get good page speed scores. It really just works that way out of the box.

Pair that with Claude Code handling the build process, and you've got something super powerful.

The Stack (And Why Each Piece Matters)

• Astro: handles the heavy lifting on SEO: clean framework, super fast load times, clean markup, schema support
• Claude Code: writes and structures the entire site based on your prompt (Sonnet 4.6 or Opus both work fine for this) + MCP
• Cloudflare: free hosting, and it connects directly to Claude Code so your site can be published without leaving the terminal

The Project: Rebuilding a Real Page Two Website

To test this properly, the site I choose is a rebuild of a real business in the California Plumbing industry. Currently sitting on page two of Google for "plumbers in California." The existing site was slow, outdated, and missing key local SEO signals like service area sub pages.

The goal: rebuild it better, faster, and with proper SEO structure.

How the Build Actually Worked

1. Create a new project folder: on your desktop or in your specific project folder open a terminal or VSCode terminal instance
2. Start Claude Code: and paste in your prompt include the URL of the site you're rebuilding, point it to the Astro docs, and give it clear instructions on how you want the site built
3. Let it plan and build: Claude works through the project in phases: scaffolding, config files, layout, components, page templates, blog content, and even images
4. Be specific: Add a CLAUDE.MD file to the root of your project to tell is exactly how you want everything to feel and look. This is where you can add colors & design details.

One particularly useful step: Claude ran a Python script to convert all generated images from PNG to WebP format automatically, which reduced file sizes significantly without any quality loss. That kind of detail matters for page speed scores.

What the Finished Site Looked Like

After about 15 minutes, the result included:

• A clean, modern homepage with animations
• Individual service area pages (e.g. "Plumber in Los Angeles, California")
• Dedicated service pages (e.g. leak repair per location)
• A working contact form
• An FAQ section
• A reviews strip
• A "How We Work" section with interactive elements

All of that, built and structured automatically from a single prompt.

The SEO Results

This is where it gets interesting. After pushing the site live to a Cloudflare staging URL, here's what the tests showed:

• Google PageSpeed: 98% on desktop
• GTmetrix: blazing fast load times
• Schema markup: local business schema, service schema, breadcrumb schema, and FAQ schema all validated correctly, with only minor non-critical warnings

Mobile scores had room for improvement, but the foundations were solid across the board.

Pushing It Live to Cloudflare

If you already have Cloudflare connected to Claude Code, publishing is just one more prompt. Tell it to push to a staging site, and within a couple of minutes the site is live on a pages.dev URL no separate deployment workflow needed.

Once you're happy with it, it's just a matter of pointing a real domain at it and adding your analytics and tracking.

Want to Scale This Up?

For those who want to go further, there's a full local business builder agent available as a GitHub repo, a prompt based plugin that can generate sites of 80–100 pages or more, complete with SEO best practices baked in. It walks you through parameters interactively so you can customize each build.

Bottom Line

This isn't a gimmick. The combination of Astro's technical foundation, Claude's ability to plan and execute a full build, and Cloudflare's deployment pipeline produces sites that are genuinely competitive & fast, structured, and ready to rank.

For local businesses especially, this is a workflow worth learning.

Bonus: Add the Astro MCP Server to Your Project

Here's something most people building with Astro and Claude don't know about yet and it makes the whole workflow noticeably smarter.

Astro has an official MCP (Model Context Protocol) server. In plain English, that means you can plug Claude directly into the latest Astro documentation in real time, so instead of relying on training data that might be months out of date, Claude is actually reading the current docs while it builds your site.

The difference this makes is real. Astro moves fast. APIs change, new features drop, and some older patterns get deprecated. Without the MCP server, there's a chance your AI tool falls back on outdated methods. With it connected, you're always working against the latest version of the docs.

How to Connect It in Claude Code

If you're using Claude Code in the terminal (which is the recommended approach for this whole workflow), adding the Astro MCP server is a single command:

claude mcp add --transport http astro-docs https://mcp.docs.astro.build/mcp

That's it. Once it's added, Claude Code will automatically consult the Astro docs when it's building or modifying your project, no extra prompting needed.

Using It in Claude.ai or Claude Desktop

If you prefer working inside Claude.ai directly rather than the terminal, you can add it as a custom connector:

1. Go to your Claude.ai connector settings
2. Click "Add custom connector" (scroll down if you don't see it)
3. Enter the server URL: https://mcp.docs.astro.build/mcp
4. Name it "Astro docs" and save

Works With Other Tools Too

The Astro MCP server isn't limited to Claude. It works across a growing list of AI development tools including Cursor, VS Code with Copilot, Windsurf, Warp, and others. If your tool supports MCP servers, you can add it using this standard config:

{
  "mcpServers": {
    "Astro docs": {
      "type": "http",
      "url": "https://mcp.docs.astro.build/mcp"
    }
  }
}

Why This Matters for SEO Builds

When you're building sites where technical accuracy directly affects rankings, correct schema implementation, proper image handling, clean routing, and having Claude reference current Astro documentation rather than guessing is a meaningful advantage. It reduces the back-and-forth of fixing hallucinated APIs and keeps the build moving faster.

Think of it as giving Claude a live reference manual for the exact tool you're using. The combination of Astro's SEO first architecture, Claude's code generation, and up-to-date docs via MCP is genuinely hard to beat right now.

For the full list of supported tools and setup instructions, check out the official Astro Build with AI guide.