Create An SEO Optimized, Ultra Fast Blog Website

# Build a World-Class Static Astro Site with Claude Code

Reusable Prompt & Workflow — Copy, Fill In, Ship

---

HOW TO USE THIS

1. Open Claude Code (terminal: claude or the desktop app)

2. Copy the Master Prompt below

3. Fill in your [VARIABLES] — takes 2 minutes

4. Paste it and let Claude build your entire site

5. Run npm install && npm run dev to launch locally

6. Deploy to Netlify/Vercel/Cloudflare Pages in one drag-and-drop

---

THE MASTER PROMPT

> Copy everything between the lines and paste it into Claude Code

---

I want you to build a complete, production-ready static website using Astro.
Do the full manual setup (no create-astro wizard). Build everything from scratch.

---

SITE OVERVIEW
- Site name: [YOUR SITE NAME]
- Domain (or placeholder): [yoursite.com]
- Tagline: [ONE LINE — what the site is about]
- Content categories: [CATEGORY 1], [CATEGORY 2], [CATEGORY 3]
  (examples: News / Tutorials / Workflows — or — Reviews / Guides / Tools — or — Blog / Portfolio / Projects)
- Target audience: [WHO IS THIS FOR]
- Tone: [e.g. technical & direct / warm & educational / professional & clean]

---

DESIGN
- Style: Dark matrix/terminal aesthetic — deep dark background (#070709),
  green accent (#00dc82), subtle CSS grid pattern overlay, glowing cards,
  monospace terminal elements, radial hero glow. Clean, modern, world-class.
  (If you want a different look, describe it here instead)
- Fonts: Space Grotesk (headings) + JetBrains Mono (code/mono) from Google Fonts
- Must feel premium — not a template, not generic. Every detail intentional.

---

TECH STACK
Packages to install:
- astro (latest)
- @astrojs/tailwind
- @astrojs/sitemap
- @astrojs/mdx
- @astrojs/rss
- tailwindcss
- @tailwindcss/typography

---

PROJECT STRUCTURE TO BUILD

src/
  content/
    config.ts              ← Zod schemas for all content collections
    [category-1]/          ← Markdown/MDX posts
    [category-2]/
    [category-3]/
  components/
    SEO.astro              ← Full meta/OG/Twitter/JSON-LD component
    Header.astro           ← Sticky nav with mobile menu
    Footer.astro
    Hero.astro             ← Homepage hero with stats strip
    ArticleCard.astro      ← Reusable card for all post types
    CategorySection.astro  ← Section with header + card grid
  layouts/
    BaseLayout.astro       ← Wraps every page, includes SEO + Header + Footer
    PostLayout.astro       ← Article layout with breadcrumb, meta, prose, tags
  pages/
    index.astro            ← Homepage
    [category-1]/index.astro
    [category-1]/[slug].astro
    [category-2]/index.astro
    [category-2]/[slug].astro
    [category-3]/index.astro
    [category-3]/[slug].astro
    rss.xml.ts             ← RSS feed combining all collections
  styles/
    global.css             ← Tailwind + Google Fonts + custom design tokens
public/
  robots.txt
  favicon.svg

---

SEO — WIRE ALL OF THIS UP FROM DAY ONE

Every page must have:
- <title> tag: "Post Title | Site Name" format
- <meta name="description"> (unique per page)
- <link rel="canonical"> (self-referencing)
- Open Graph: og:title, og:description, og:image (1200x630), og:type, og:url, og:site_name
- Twitter Card: summary_large_image with all required tags
- Article pages: article:published_time, article:modified_time, article:tag
- JSON-LD structured data:
    - WebSite schema on homepage (with SearchAction potentialAction)
    - Article schema on every post (with author, publisher, datePublished, dateModified)
    - BreadcrumbList schema on every post and category page
- <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1">
- RSS feed at /rss.xml with all categories combined, sorted by date
- sitemap via @astrojs/sitemap (configure in astro.config.mjs with site URL)
- robots.txt pointing to sitemap

Content schema fields for every post type:
- title (string, max 100 chars)
- description (string, max 200 chars)
- pubDate (date)
- updatedDate (date, optional)
- author (string, default to site name)
- tags (string array)
- featured (boolean)
- draft (boolean — drafts excluded from all pages)
- readingTime (number, optional)

Auto-calculate reading time from word count in [slug].astro pages.

---

CONTENT COLLECTION SCHEMAS

[CATEGORY 1] specific fields:
[ADD ANY EXTRA FIELDS — e.g. for news: source, sourceUrl, breaking: boolean]

[CATEGORY 2] specific fields:
[ADD ANY EXTRA FIELDS — e.g. for tutorials: difficulty (beginner/intermediate/advanced), duration, tools: string[]]

[CATEGORY 3] specific fields:
[ADD ANY EXTRA FIELDS — e.g. for workflows: category enum, tools: string[], steps: number]

---

COMPONENT REQUIREMENTS

ArticleCard.astro:
- Shows category badge (color-coded per category), date, title, description (line-clamp-2)
- Tags as small pills, reading time, arrow icon
- Hover: card lifts 2px, border glows accent color, arrow shifts right
- featured prop makes card slightly larger

Hero.astro (homepage only):
- Live indicator dot + date + post count
- Large gradient headline (site name + tagline)
- 3 CTA buttons linking to each category
- Stat strip showing each category label

Header.astro:
- Sticky, backdrop-blur, border-bottom
- Logo (icon + site name + mono tagline)
- Nav links highlight active page
- RSS icon link
- Mobile hamburger menu (CSS + vanilla JS toggle)

PostLayout.astro:
- Breadcrumb: Home → Category → Post Title
- Category badge, H1, description with left border accent
- Meta row: date (with glow dot), reading time, author
- Tailwind Typography prose for body content
- Tag pills at bottom
- Back to category button

---

DESIGN SYSTEM (implement in global.css and tailwind.config.mjs)

CSS custom properties:
--accent: #00dc82
--bg: #070709
--bg-card: #10101a
--border: rgba(255,255,255,0.06)

Body background: CSS grid pattern using linear-gradient at rgba(0,220,130,0.025), 60px x 60px
Selection color: accent/20 background

Utility classes to define:
.np-card — dark card with shadow, hover lifts + glows
.np-badge — small monospace uppercase pill
.np-badge-[category] — per-category color variant
.np-btn-primary — accent background button with glow on hover
.np-btn-ghost — outlined button
.np-section-label — tiny mono uppercase tracking-wide label
.np-heading — font-bold white text with tight tracking
.np-glow-dot — 1.5px pulsing accent dot
.np-link — accent underline link
.tag-pill — small dim pill, hoverable
.text-gradient-green — green-to-cyan gradient text
.text-gradient-hero — white fade gradient text
.prose-dark — dark theme prose override for article body

---

SAMPLE CONTENT

Create 3 real, well-written sample posts for EACH category (9 posts total).
Each post should:
- Be genuinely useful — not lorem ipsum
- Have a descriptive slug (e.g. build-rag-pipeline-2026)
- Include real markdown: headers, code blocks (where relevant), tables, bullet lists
- Fill in all frontmatter fields
- Be 400-800 words minimum
- Match the site's topic and audience

---

ASTRO CONFIG

astro.config.mjs:
- site: "https://[yourdomain.com]"
- integrations: tailwind(), sitemap({ changefreq: "daily", priority: 0.7 }), mdx()
- markdown shiki theme: "github-dark"

tailwind.config.mjs:
- Extend colors with full design token set (bg, accent, np.green/cyan/purple/red)
- Extend with custom backgroundImage for grid patterns, hero glow, card shine
- Extend boxShadow with glow-sm/md/lg and card/card-hover variants
- Extend animation with pulse-slow, fade-in, slide-up, blink
- @tailwindcss/typography plugin, with prose-invert overrides

tsconfig.json:
- Extend astro/tsconfigs/strict
- Path alias: @/* → src/*

---

DEPLOYMENT READY

Make sure:
- All pages build with astro build (zero errors)
- No TypeScript errors
- Draft posts are filtered from all collection queries
- RSS feed includes all categories sorted by pubDate descending
- sitemap auto-generates at /sitemap-index.xml
- robots.txt references sitemap URL

When done, tell me:
1. Full file tree of what was created
2. Command to install and run locally
3. What to change before going live (domain, colors, etc.)

---

CUSTOMIZATION GUIDE

Change the color palette

Replace these values everywhere in global.css and tailwind.config.mjs:

Change the design style entirely

Replace the DESIGN section in the prompt with one of these:

Light minimal:

Style: Clean white/gray minimal — white background, subtle gray borders,
black text, blue accent (#2563eb). Think Linear or Vercel docs.
No dark mode. Maximum whitespace. Grid-free.

Bold editorial:

Style: Bold editorial — cream background (#faf9f7), black ink text,
serif headings (Playfair Display), red accent (#dc2626).
Newspaper meets modern web. High contrast. No gradients.

Glassmorphism:

Style: Glassmorphism dark — near-black background, frosted glass cards
with backdrop-blur, purple/pink gradient accents, subtle noise texture overlay.

---

ADDING A CMS (Post content without touching code)

Option A — Decap CMS (free, Git-based, no backend)

Add this after your site is live:

Add Decap CMS to my Astro site so I can write and publish posts
from a web UI without touching code.

- Install via CDN (no npm package needed)
- Create public/admin/index.html and public/admin/config.yml
- Configure collections to match my existing content schemas:
  news (with title, description, pubDate, tags, breaking, featured)
  tutorials (with title, description, pubDate, tags, difficulty, tools)
  workflows (with title, description, pubDate, tags, category, tools)
- Auth via Netlify Identity (I'm hosting on Netlify)
- CMS should be accessible at /admin
- New posts saved as markdown files in the correct src/content/ folder

Option B — Keystatic (file-based, beautiful UI)

Integrate Keystatic CMS into my Astro site.
- npm install @keystatic/core @keystatic/astro
- Create keystatic.config.ts matching my content collections
- Add the Keystatic integration to astro.config.mjs
- Enable local mode for development
- I want a /keystatic admin panel to write and edit posts

Option C — Notion as CMS (write in Notion, auto-publish)

Set up a workflow where I write posts in Notion and they
automatically sync to my Astro site as markdown files.
Use the Notion API and a GitHub Action that runs on a schedule
to pull new/updated pages and commit them to src/content/.

---

QUICK ITERATION PROMPTS

Use these in Claude Code after your initial build to extend the site:

Add a search page:

Add a client-side search page at /search to my Astro site.
Use Pagefind (astro-pagefind) — it runs at build time and
adds a fast, zero-JS-dependency search over all content.
Style the search input and results to match the existing design system.

Add tag pages:

Add dynamic tag pages at /tags/[tag] that list all posts
across all three collections that share that tag.
Also add a /tags index page showing all tags with post counts.
Style with the existing design tokens.

Add an About page:

Add an About page at /about with:
- Hero section with site mission
- Team/author section (placeholder)
- Stats strip (posts published, categories, etc.)
- Newsletter CTA section
Match the existing dark matrix design exactly.

Add related posts:

At the bottom of every post layout, add a "Related Posts" section.
Find 3 posts from the same collection that share at least one tag.
Fall back to most recent posts if no tag matches.
Use the existing ArticleCard component.

Add Open Graph image generation:

Add dynamic OG image generation using @vercel/og or satori.
Create a route at /og/[...slug].png that renders a branded
1200x630 image with the post title, category badge, and site logo.
Wire it into the SEO component automatically.

---

DEPLOYMENT CHECKLIST

Before going live, update these:

• [ ] astro.config.mjs → change site: to your real domain
• [ ] src/components/SEO.astro → update SITE_URL, SITE_NAME, TWITTER_HANDLE
• [ ] src/components/Footer.astro → update copyright name
• [ ] public/robots.txt → update sitemap URL to real domain
• [ ] Replace placeholder sample posts with real content
• [ ] Add a real public/og-default.png (1200x630) for social sharing
• [ ] Add real public/favicon-32.png and public/apple-touch-icon.png

Deploy commands:

npm run build        # builds to dist/
# then drag dist/ to Netlify, or:
npx netlify deploy --prod --dir=dist

---

WHAT MAKES THIS SITE RANK

1. Zero JS by default — Astro ships no JavaScript unless you add it. Fastest possible Core Web Vitals.

2. Static HTML — Every page is pre-rendered. Google can crawl without executing JS.

3. Structured data — JSON-LD schemas on every page tell Google exactly what the content is.

4. Sitemap + RSS — Auto-generated. Submit sitemap to Google Search Console on day 1.

5. Semantic HTML — Proper

6. Self-referencing canonicals — Prevents duplicate content penalties.

7. Unique meta per page — Title and description crafted per post, not templated.

8. Clean URL structure — /news/my-post-title — keyword-rich, readable, no query strings.

9. Fast hosting — Deploy to Cloudflare Pages for free global CDN edge delivery.

10. Real content — The most important factor. Post consistently. Go deep on topics.

---

---

WORDROCKET INTEGRATION — AUTOMATE ARTICLE WRITING & PUBLISHING

WordRocket is an AI article generation platform with a public API and MCP server.

Connect it to Claude Code and you can research keywords, generate full SEO articles,

and auto-publish them to your Astro site (or WordPress/Ghost) — all from natural language

inside Claude.

Requires: WordRocket Premium ($49.99/mo) or Agency Ultimate plan.

---

OPTION A — Connect via MCP (Recommended — Works Inside Claude Code)

This is the fastest setup. Claude Code gets WordRocket as a native tool — no scripts needed.

Step 1 — Add to Claude Desktop config

Open this file in a text editor:

~/Library/Application Support/Claude/claude_desktop_config.json

Add the WordRocket MCP server:

{
  "mcpServers": {
    "wordrocket": {
      "url": "https://wordrocketapi.com/mcp"
    }
  }
}

Save and restart Claude Desktop. A browser window opens → log in to WordRocket → click Approve.

All 15 WordRocket tools appear automatically. Done.

Alternative — API Key auth (if OAuth doesn't work):

{
  "mcpServers": {
    "wordrocket": {
      "url": "https://wordrocketapi.com/mcp",
      "headers": {
        "Authorization": "Bearer wrk_live_YOUR_KEY_HERE"
      }
    }
  }
}

Get your key from WordRocket → Settings → API Keys.

---

OPTION B — Use the WordRocket API Directly (Python Script)

Generate articles via API and save them as Markdown files in your Astro content folder.

This fully automates the write → save → push → deploy pipeline.

Install dependencies:

pip install requests python-frontmatter

The automation script — save as wordrocket_to_astro.py:

import requests
import time
import re
import os
from datetime import datetime

WR_API_KEY = "wrk_live_YOUR_KEY_HERE"
BASE_URL = "https://zsxkvszxbhpwnvzxdydv.supabase.co/functions/v1/api-gateway/v1"
HEADERS = {"Authorization": f"Bearer {WR_API_KEY}", "Content-Type": "application/json"}

# Path to your Astro content folder
ASTRO_CONTENT_PATH = "/Users/yourname/yoursite/src/content"

def generate_article(keyword, category="news", **kwargs):
    """Generate an article and save it to the correct Astro content folder."""

    print(f"Generating article for: {keyword}")

    # Start generation job
    payload = {
        "keyword": keyword,
        "word_count": kwargs.get("word_count", 1500),
        "tone": kwargs.get("tone", "professional"),
        "template": kwargs.get("template", "blog"),
        "model": "anthropic/claude-sonnet-4-6",
        "include_faq": True,
        "include_toc": True,
        "enable_research": kwargs.get("enable_research", True),
        "include_images": False,
    }

    resp = requests.post(f"{BASE_URL}/articles/generate", headers=HEADERS, json=payload)
    resp.raise_for_status()
    job_id = resp.json()["data"]["job_id"]
    print(f"Job started: {job_id}")

    # Poll until complete
    while True:
        time.sleep(10)
        status_resp = requests.get(f"{BASE_URL}/jobs/{job_id}", headers=HEADERS)
        status = status_resp.json()["data"]["status"]
        print(f"Status: {status}")

        if status == "completed":
            article_id = status_resp.json()["data"]["result"]["article_id"]
            break
        elif status == "failed":
            raise Exception("Article generation failed")

    # Fetch the article
    article_resp = requests.get(f"{BASE_URL}/articles/{article_id}", headers=HEADERS)
    article = article_resp.json()["data"]

    # Build the Astro frontmatter + markdown file
    slug = slugify(article["title"])
    today = datetime.now().strftime("%Y-%m-%d")

    content = f"""---
title: "{article['title'][:100]}"
description: "{article.get('meta_description', '')[:200]}"
pubDate: {today}
author: "NeuralPulse Staff"
tags: {extract_tags(keyword)}
featured: false
draft: false
readingTime: {estimate_reading_time(article.get('markdown', ''))}
---

{article.get('markdown', article.get('content', ''))}
"""

    # Save to correct category folder
    folder = os.path.join(ASTRO_CONTENT_PATH, category)
    os.makedirs(folder, exist_ok=True)
    filepath = os.path.join(folder, f"{slug}.md")

    with open(filepath, "w") as f:
        f.write(content)

    print(f"Saved: {filepath}")
    return filepath


def slugify(text):
    text = text.lower().strip()
    text = re.sub(r"[^\w\s-]", "", text)
    text = re.sub(r"[\s_-]+", "-", text)
    return text[:60]


def extract_tags(keyword):
    tags = [w.strip() for w in keyword.split() if len(w) > 3]
    return str(tags[:5])


def estimate_reading_time(text):
    words = len(text.split())
    return max(1, round(words / 200))


def research_keyword(keyword):
    """Check search volume and difficulty before generating."""
    resp = requests.post(
        f"{BASE_URL}/research/keyword",
        headers=HEADERS,
        json={"keyword": keyword, "country": "US"}
    )
    data = resp.json()["data"]
    print(f"Volume: {data.get('search_volume')} | Difficulty: {data.get('keyword_difficulty')}")
    return data


# --- RUN IT ---
if __name__ == "__main__":
    # Research first (optional)
    research_keyword("ai prompt engineering guide")

    # Generate and save to your Astro site
    generate_article(
        keyword="ai prompt engineering guide",
        category="tutorials",   # saves to src/content/tutorials/
        word_count=2000,
        tone="professional",
        enable_research=True,
    )

    # Then push to GitHub and Netlify auto-deploys:
    os.system('cd /path/to/your/site && git add . && git commit -m "auto: new article" && git push')

---

OPTION C — Full Automation via Claude Code (Natural Language)

Once the MCP is connected, just talk to Claude Code naturally:

Research + Generate + Save to Astro:

Using WordRocket, research the keyword "best AI coding tools 2026",
then generate a 2000-word article with web research enabled.
When it's done, save it as a markdown file in
src/content/news/best-ai-coding-tools-2026.md with proper Astro frontmatter
(title, description, pubDate today, tags, featured: false, draft: false).

Bulk content calendar:

Using WordRocket, generate 5 articles for my AI news site on these topics:
1. "GPT-5 coding assistant review"
2. "Claude vs GPT-5 comparison 2026"
3. "best AI image generators 2026"
4. "how to fine-tune llama 3"
5. "AI automation tools for small business"

Use 1500 words each, professional tone, web research on.
Save each one to src/content/news/ with proper frontmatter.
When all 5 are done, run: git add . && git commit -m "batch: 5 new articles" && git push

Research → Write → Deploy pipeline:

Using WordRocket:
1. Research "prompt engineering techniques" — show me volume and difficulty
2. If difficulty is under 60, generate a 2500-word how-to article with research enabled
3. Save it to src/content/tutorials/ with today's date in frontmatter
4. Run npm run build to verify it builds clean
5. Then git add, commit, and push to trigger Netlify deploy

---

WORDROCKET QUICK REFERENCE

API Base URL:

https://zsxkvszxbhpwnvzxdydv.supabase.co/functions/v1/api-gateway/v1

Key endpoints:

Key generate_article params:

Rate limits: 10 articles/min · 60 research/min · 120 job polls/min

---

THE FULL AUTOMATED WORKFLOW

Claude Code + WordRocket MCP
         ↓
  research_keyword("topic")
         ↓
  generate_article(keyword, params)
         ↓
  poll get_job_status until complete
         ↓
  save as .md to src/content/[category]/
         ↓
  git add . && git commit && git push
         ↓
  Netlify auto-rebuilds in ~30 seconds
         ↓
  Article is live at yoursite.com/[category]/[slug]

Zero manual steps once the pipeline is set up. Research → write → live in under 5 minutes per article.

---

Built with Astro · Tailwind · MDX · @astrojs/sitemap · @astrojs/rss

Content automation via WordRocket API + MCP

Workflow created by NeuralPulse — neuralpulse.ai