I Let Claude Build My SEO-Ready Astro Blog From Scratch

In part 1 I explained why I moved from Lovable.dev to Astro for SEO. Lovable builds React apps that serve empty HTML to Googlebot — Astro builds static HTML that Google can read instantly, no JavaScript required.

This post is part 2: actually building the blog. But instead of walking you through every command manually, I handed it to Claude.

The Prompt

One prompt. That’s it.

Build me an SEO-ready Astro blog from scratch with Tailwind, MDX, RSS feed, sitemap, and fonts

From that, Claude installed everything, built the full project structure, and had a working blog ready to deploy. Here’s exactly what happened.

What Claude Installed

Claude ran the following commands in sequence:

npm create astro@latest astro-demo

When prompted:

Template: Empty
TypeScript: Yes, strict
Install dependencies: Yes
Initialize git repo: Yes

Then added the integrations:

npx astro add tailwind
npx astro add mdx

Then fonts and RSS:

npm install @fontsource-variable/inter @fontsource/jetbrains-mono
npm install @astrojs/rss

No @astrojs/sitemap — it crashes on Astro 4.16+. Claude built a manual sitemap endpoint instead.

What Claude Built

The full project structure:

src/
├── components/       # reusable UI pieces
├── content/
│   └── posts/        # your .md/.mdx files go here
├── layouts/
│   └── BaseLayout.astro   # html shell, meta tags, JSON-LD
├── pages/
│   ├── index.astro        # homepage, lists all posts
│   ├── posts/[slug].astro # dynamic post pages
│   ├── tags/[tag].astro   # posts by tag
│   ├── rss.xml.ts         # RSS feed endpoint
│   └── sitemap.xml.ts     # manual sitemap
└── styles/

Every post page gets full SEO automatically — <title>, <meta name="description">, canonical URL, Open Graph tags, and JSON-LD Article schema. All baked into BaseLayout.astro so you never have to think about it.

Push to GitHub

Claude handled this too:

gh repo create astro-demo --public --source=. --remote=origin --push

One command. Creates the repo on GitHub, links it as origin, and pushes everything.

Deploy on Vercel

Once the repo was on GitHub, I went to vercel.com, clicked Add New Project, imported the astro-demo repo, and hit Deploy. Vercel detects Astro automatically — no config needed.

Within a minute the site was live at a Vercel URL. No custom domain needed for a demo.

The Result

A fully working, SEO-ready blog — deployed on Vercel, live on the internet — from a single prompt. The whole session took just over 7 minutes.

Live demo: astro-demo-theta-tawny.vercel.app

Why This Works for SEO

When Google crawls your Astro blog it gets real HTML — your title, your content, your structured data — on the first request. No JavaScript to run, no second crawl wave, no waiting days to get indexed.

Compare that to a CSR React app where Googlebot sees an empty <div id="root"> and has to come back later to render it.

Astro’s build step does the heavy lifting once at deploy time. Every visitor and every crawler gets the same fast, complete HTML.

Write Your First Post

Drop a .md file in src/content/posts/:

---
title: "My First Post"
description: "A short description for Google."
publishDate: "2026-04-27"
tags: ["astro", "seo"]
draft: false
---

Your content here.

Push to GitHub. Vercel redeploys automatically. Done.