AI-Native Website Setup — Quick Reference
Companion to
ai-native-website-setup-playbook.mdUse this to prep before starting a new client site build.
Pre-Build Checklist (Gather Before Starting)
Client Must Provide
- Company name + legal entity name
- Domain name (purchased and ready)
- Tagline / one-line description
- Primary contact email
- Phone number
- Physical location (city, state)
- Brand colors (primary, accent, background at minimum; ideally full palette)
- Font choice (Google Fonts name)
- Logo files (horizontal, PNG + SVG)
- Headshots for team members (500x500 min)
- Social media links (LinkedIn, X/Twitter)
- Service descriptions (3-8 services)
- FAQ content (6-15 questions)
- Legal disclaimer text (if regulated industry)
- Cal.com (or other scheduler) booking link
- Content/copy for key pages (or a brief to write from)
Accounts to Create (Section 1)
| Account | URL | What You Need |
|---|---|---|
| GitHub | github.com | Repo for code |
| Cloudflare | cloudflare.com | Hosting + DNS + security |
| Brevo | brevo.com | Transactional email (free tier) |
| Cloudflare Turnstile | dash.cloudflare.com | CAPTCHA (free, privacy-respecting) |
| Cal.com | cal.com | Scheduling (free tier) |
| Umami | cloud.umami.is | Analytics (free tier, GDPR-friendly) |
Credentials to Collect
| Credential | Where to Find |
|---|---|
TURNSTILE_SITE_KEY | Cloudflare > Turnstile > Widget settings |
TURNSTILE_SECRET_KEY | Same (secret key) |
BREVO_API_KEY | Brevo > Settings > SMTP & API |
BREVO_LIST_ID | Brevo > Contacts > Lists (usually “2”) |
CLOUDFLARE_ACCOUNT_ID | Cloudflare dashboard URL bar |
CLOUDFLARE_API_TOKEN | Cloudflare > Profile > API Tokens |
UMAMI_WEBSITE_ID | Umami > Settings > Websites |
Build Phases (13 Sections)
| Phase | Section | What Gets Built | Key Files |
|---|---|---|---|
| 1 | Prerequisites | Accounts, DNS, credentials | .env, .dev.vars |
| 2 | Scaffolding | Astro project, config, design tokens | astro.config.mjs, tailwind.config.mjs, wrangler.toml |
| 3 | Components | All reusable UI components + layouts | BaseLayout, Nav, Footer, ContactForm, + 8 more |
| 4 | API Routes | Contact form, newsletter, middleware | send-email.ts, newsletter-subscribe.ts, middleware.ts |
| 5 | Content | Blog system, pages, verticals, resources | content.config.ts, blog pages, /for/*, PrintLayout |
| 6 | Security | Headers, CSP, WAF, security.txt, SRI | _headers, .well-known/security.txt |
| 7 | Testing | Full E2E test suite | 10+ spec files in tests/e2e/ |
| 8 | CI/CD | Deploy, test, scheduled publish | 3 workflow files + dependabot |
| 9 | Assets | Images, favicons, PDFs | generate-pdfs.mjs, CREDITS.md |
| 10 | Deploy | First deploy, custom domain, monitoring | Cloudflare Pages dashboard |
| 11 | WP Migration | (Optional) WordPress to Astro conversion | wordpress-export-to-markdown |
| 12 | QA | Lighthouse, a11y, cross-browser, reviewer | Senior Reviewer workflow |
| 13 | Post-Launch | DNS verify, SEO submission, docs | CLAUDE.md, .env.example |
Run This First (After Section 1 is Complete)
# 1. Scaffold
mkdir project-name && cd project-name
npm create astro@latest . -- --template minimal --typescript strict --install --git
# 2. Install dependencies
npm install @astrojs/cloudflare @astrojs/tailwind @astrojs/sitemap @astrojs/rss tailwindcss @tailwindcss/typography lucide-astro sharp @fontsource/inter
npm install -D @playwright/test typescript
# 3. Install test browsers
npx playwright install chromium
# 4. Copy .dev.vars from template and fill in credentials
# 5. Start dev server
npm run devCritical Files (Must Exist Before Deploy)
src/lib/constants.ts # Site-wide constants (NEVER hardcode URLs)
src/lib/api-helpers.ts # Shared validation + security utilities
src/layouts/BaseLayout.astro # Base layout with meta tags, OG, analytics
src/components/Nav.astro # Sticky nav with mobile hamburger
src/components/Footer.astro # Footer with newsletter + email obfuscation
src/components/ContactForm.astro # Contact form with honeypot + Turnstile
public/_headers # Security headers (CSP, HSTS, etc.)
wrangler.toml # Cloudflare config with public vars
playwright.config.ts # Test config with build+preview webServer
.github/workflows/deploy.yml # Push-to-main auto-deploy
.dev.vars # Local secrets (NEVER commit)
Quality Gates
After every major section:
npm run build(must succeed)npx playwright test(must pass)- Commit with descriptive message
- Senior Reviewer audit (for final deploy)
Target: 90+ on all four Lighthouse categories (Performance, Accessibility, Best Practices, SEO)
Key Patterns to Remember
| Pattern | Why |
|---|---|
BOOKING_URL from constants.ts, never hardcoded | Single source of truth for booking link |
data-cal-link + href={BOOKING_URL} on every CTA | Cal.com modal + no-JS fallback |
<picture> with WebP source + JPG fallback | Performance + browser compatibility |
escapeHtml() on all user input in emails | XSS prevention |
MAX_LENGTHS validation on all API inputs | Input boundary protection |
export const prerender = false on API routes | Required for Cloudflare SSR |
| Turnstile test key in playwright.config.ts | Tests pass without real CAPTCHA |
data.date <= new Date() for blog filtering | Future-dated posts hidden until publish date |
| Daily cron deploy for blog auto-publish | Future posts go live automatically |
Template Variables Quick Count
| Category | Count |
|---|---|
| Company identity | 6 |
| Contact info | 5 |
| Booking/scheduling | 3 |
| Social media | 2 |
| Brand colors | 10 |
| Typography | 2 |
| Infrastructure | 4 |
| Content | 3 |
| Structure (JSON) | 9 |
| Total | 44 |
All variables defined in Section 0.1 of the main playbook.
Generated by Solanasis LLC.