# Build a site like this - a prompt you can hand to Claude (or any coding AI) Copy everything inside the box below into Claude Code (or Cursor, etc.) to scaffold a site built the same way as team400.ai - but for *your* business, not ours. It's a **meta prompt**: instead of building immediately, it first interviews you about your business, goals, services, locations, and brand, then uses your answers to drive all the content. Under the box are notes on the two things that took the longest to get right: **SEO** and **blogging**. Read those - they're the difference between a site that ranks and one that doesn't. --- ## The prompt ``` I want you to build me a marketing/content website using the stack and approach described below. But DO NOT start building yet. FIRST, interview me about MY business and MY website. We are NOT building a copy of any example site - we're building one for me. Ask me the questions below (a few at a time, conversationally), wait for my answers, then briefly play back what you heard and confirm before you write any code: 1. BUSINESS BASICS - What's the business/brand name, and what do you do in one sentence? - Who's the ideal customer, and what problem do you solve for them? - What's the domain (or planned domain)? 2. GOAL OF THE SITE - What's the #1 action you want a visitor to take (book a call, buy, sign up, enquire)? - How will you measure success? 3. SERVICES / OFFERS - List the main services or products that should each get their own page. 4. LOCATIONS (for the programmatic SEO pages) - Which cities/regions do you serve? (We'll generate one landing page per service × location.) 5. CONTENT & PROOF - Do you have testimonials, case studies, logos, pricing, or an FAQ to include? - Will you blog? If so, what topics/search intents matter to you? 6. BRAND & TONE - Any existing logo, brand colours, or fonts? If not, describe the vibe in 3 words. - Formal or casual? Any competitors whose style you like (or want to avoid)? 7. PAGES - Beyond home / about / services / blog / contact, any other pages you need? 8. PRACTICAL - Contact details (email, phone, social links) to put in the footer? - Where will it be hosted, and do you have a deadline? If I don't know an answer, suggest a sensible default and move on - don't block. Once I've confirmed, use MY answers to drive all the page content, copy, service pages, locations, tone, and SEO metadata below. Substitute my details everywhere the template would otherwise be generic. THEN build the site with this stack and approach: STACK - React 18 + TypeScript - Vite as the bundler - vite-react-ssg for static site generation (this is the important bit - every page pre-renders to real HTML at build time, so search engines and social scrapers get full content, not an empty JS shell) - Tailwind CSS for styling - react-router-dom for routing - react-helmet-async for per-page / meta tags - framer-motion for animation, lucide-react for icons (optional) - marked for rendering blog markdown - Deploy to Cloudflare Pages (or Netlify/Vercel - any static host works) STRUCTURE - src/pages/*.tsx one component per page/route - src/routes.tsx route table; src/ssg-routes.ts lists every path to prerender - src/components/ shared UI - content/blog/*.md blog posts as markdown files (see BLOGGING below) - scripts/generate-sitemap.js builds public/sitemap.xml from the route list + blog files - build script: "vite-react-ssg build && node scripts/generate-sitemap.js" SEO (do this properly from day one - see notes) - Every page gets a block with: unique , meta description, canonical URL, Open Graph (og:title/description/type/url), and twitter:card tags. - For pages targeting a place, add geo.region / geo.placename and og:locale. - Add JSON-LD structured data (Organization on the home page, Article on blog posts, FAQPage where you have FAQs). - Generate a sitemap.xml at build time and reference it in robots.txt. - Create "programmatic" landing pages: one page per (service × city) combination, e.g. /ai-consultants-sydney, /ai-consultants-melbourne. Same template, localised copy and title. This is the main organic-traffic engine. BLOGGING - Posts are plain markdown files in content/blog/ named YYYY-MM-descriptive-slug.md. The filename (minus .md) becomes the URL slug: /blog/descriptive-slug. - Each file starts with frontmatter: --- title: ... date: YYYY-MM-DD description: ... (this becomes the meta description) tags: [Tag One, Tag Two] author: ... --- Body in markdown... - Load every post at build time with Vite's import.meta.glob('../../content/blog/*.md', { query: '?raw', eager: true }), parse the frontmatter, render the body with marked, and compute a reading time (~200 words/min). No CMS, no database - just files. - /blog lists posts newest-first; /blog/:slug renders one. Set up the project, a home page, an about page, a service page per service I gave you, programmatic landing pages for each service × location I gave you, the blog system, and the sitemap script - all using MY business name, copy, tone, and details from the interview above. Wire SSG so `npm run build` outputs static HTML for every route. ``` --- ## Why this stack (the short version) It's a **static site that happens to be written in React**. You get the nice component model and a real dev experience, but the thing you ship is plain HTML/CSS/JS that loads fast and ranks well. No server, no database, near-zero hosting cost on Cloudflare Pages. Content lives as markdown files in the repo, so writing a post is just adding a file and pushing - Git is your CMS. ## The SEO that took a while to get right This is where most React sites quietly fail, so it's worth being deliberate. 1. **Pre-render everything (SSG).** A normal Vite/React build ships an empty `<div id="root">` and fills it in with JavaScript. Google can sometimes execute that, but it's slow and unreliable, and social/link scrapers usually can't. `vite-react-ssg` runs your app at build time and writes a real HTML file for each route. View-source shows the actual content. This single decision does more for ranking than anything else. 2. **Unique `<head>` per page via Helmet.** Every page sets its own title, meta description, canonical URL, and Open Graph / Twitter tags. Don't reuse one global title. Title and description are what Google shows in results, so write them like ads. 3. **Programmatic landing pages.** The biggest traffic driver is a matrix of pages: one template rendered once per (service × location), e.g. `/react-consultants-sydney`, `/react-consultants-melbourne`, `/react-consultants-brisbane`. Each has its own URL, title, and localised copy. List every one of these paths in `ssg-routes.ts` so they get pre-rendered, and add them to the sitemap. 4. **Structured data (JSON-LD).** Add an `Organization` block on the home page, `Article` on blog posts, and `FAQPage` where you list FAQs. This is what earns the rich results (stars, FAQ dropdowns) in Google. 5. **A real sitemap, regenerated on every build.** `scripts/generate-sitemap.js` holds a static list of routes and *also* scans `content/blog/` so new posts appear automatically. It writes `public/sitemap.xml` (dev) and `dist/sitemap.xml` (prod). Wire it into the build script so it never goes stale: `vite-react-ssg build && node scripts/generate-sitemap.js`. ⚠️ The sitemap is static - if you add or remove pages/posts outside a build, rerun the script (`npm run sitemap`) or the sitemap lies to Google. 6. **Once a page ranks, leave its title/H1/meta alone.** Improve the body copy, not the elements Google is using to rank it. Changing a ranking page's title can cost you the position. ## The blogging system (deliberately boring) No CMS. A post is a markdown file in `content/blog/` named `YYYY-MM-descriptive-slug.md`. The filename becomes the slug, so `2026-06-power-bi-tactical-planning.md` → `/blog/power-bi-tactical-planning`. Each file opens with frontmatter: ```markdown --- title: BI Tactical Planning in Power BI date: 2026-06-22 description: How tactical planning bridges the gap between a BI strategy and real delivery. tags: [Power BI] author: Your Name --- Your post body in plain markdown. Internal links like [Power BI strategy](/business-ai/strategy) help SEO - link posts to your service pages and to each other. ``` At build time the app globs every `.md` file (`import.meta.glob(..., { eager: true })`), parses the frontmatter, renders the body with `marked`, and works out a reading time. The `description` field doubles as the post's meta description. To publish: add the file, run a build (which regenerates the sitemap), and deploy. That's the whole workflow. **Tips that matter more than the tooling:** write for one specific search intent per post, use a clear `##` heading structure, link internally to related posts and service pages, and keep the `description` punchy because it's both the search snippet and the social preview. ```