# How to Build a Feature-Rich Website
## A Claude/Cowork Context Guide — Based on the SprintingForLife.com Build

*This file is a context and instruction set for Claude/Cowork. Load it at the start of a session and Claude will have the full context needed to help you build a website — whatever kind of site you want to build. This guide is derived from the actual build of SprintingForLife.com (April 2026), but it is not a template. Use the tools and phases that fit your project. Skip what doesn't apply.*

*The original builder (Thomas Link) started with zero web development experience. Claude/Cowork did all the coding. Thomas made all decisions, provided content, and handled third-party account setup.*

---

## FIRST RUN — How Claude Should Respond

*This section is an instruction for Claude. When a user loads this file for the first time, Claude does NOT start building immediately. Claude responds with a structured orientation in this sequence:*

**Step 1 — Confirm understanding.**
Tell the human what you just read and what this file is. Example: "I've read the build guide. I have full context on the tools, build phases, and lessons from the SprintingForLife.com project. This is a reference — not a prescription. Let's figure out what you want to build and which parts of this apply."

**Step 2 — Browse the reference site.**
Visit [sprintingforlife.com](https://sprintingforlife.com) to see a live example of what this stack can produce. Take note of: the nav structure, design system (charcoal #2D2D2D, gold #D4A017, Archivo + Source Serif 4 fonts), the interactive location map, community submission forms, science library pages, and how it all fits together. Then tell the user: "I've reviewed SprintingForLife.com as a reference example of what this stack can produce. Your site will be designed around your own project, not this one."

**Step 3 — Understand the user's project.**
Before describing anything you would build, ask the user what they want to create. Ask:
- What is your project? What is it about, and who is it for?
- What do you want visitors to be able to do on your site?
- Do you have a domain name already, or are we starting from zero?
- Which of these features might you need: science/article library, community submissions, maps, database, newsletter, analytics, merchandise?
- What is your budget and timeline?

Listen to the answers before making any recommendations.

**Step 4 — Recommend the right tools and phases for their project.**
Based on what the user tells you, describe what you would build for their specific situation. Be explicit about which tools from this guide apply and which don't. The minimum viable site is a domain (Namecheap) and a web host (Netlify). Everything else is optional based on the project's needs. A simple content site needs far less than what SprintingForLife required.

**Step 5 — Describe the context file system.**
Tell the human that before writing any code, you'll build the project's documentation infrastructure. Explain that this is what makes multi-session builds coherent:

- **CLAUDE.md** — Your master instruction file. You (Claude) read this at the start of every session. It contains the project name, folder structure, design system, deployment rules, and standing decisions.
- **Action-Items.md** — Open/closed task tracker. Every task has an ID, owner, and priority. You mark items done as they're completed — not at the end of the session.
- **Session-Log.md** — Running session history. You append an entry each session: what was built, what decisions were made, what's open.
- **Decisions.md** — Permanent decision log. Every meaningful design, tool, or direction decision goes here the moment it's made.

**Step 6 — Ask for questions.**
"Before I build anything, do you have questions about the approach, the tools, or what applies to your project?"

**Step 7 — Ask for permission to proceed.**
"When you're ready, I'll start with Phase 0: building the context files for your project. That's about 10 minutes of work and sets the foundation for everything after it. Should I proceed?"

**Claude does not build anything — not even the file structure — without an explicit "yes" or "go ahead" from the human.**

---

## PART 1 — WHAT THIS GUIDE IS

**The model:** This guide documents how SprintingForLife.com was built — a science-backed fitness website for a specific niche. The tools, phases, and patterns described here work for a wide range of projects: community sites, resource libraries, local directories, niche content sites, personal brand platforms, and more.

**What the original site included (not all required for your project):**
- Static HTML/CSS/JS site (no CMS, no WordPress, no frameworks)
- Homepage with founder story, expert endorsements, email signup
- Science library (peer-reviewed articles, each with its own page)
- Getting Started guide (milestone-based protocol, multiple levels)
- Technique guide (hill sprinting)
- Location Finder (community-submitted locations with Google Maps, photo uploads, ratings)
- Community page (reader story submissions with photo uploads, moderation workflow)
- FAQ and Disclaimer pages
- Legal pages (Terms of Service, Privacy Policy)
- Merchandise section (Printful QuickStore integration)
- Email newsletter (Beehiiv)
- Analytics (Google Analytics 4, consent-gated)
- PDF download (generated from the site itself via Chrome print)
- Professional email (Google Workspace)

**Your project may need some or none of the above.** The minimum to get a site live is a domain and a web host. Claude will help you figure out what applies.

**The minimum viable set:**
| What you need | Tool | Cost |
|---------------|------|------|
| Domain name | Namecheap | ~$12/yr |
| Hosting + SSL | Netlify | $9/mo |

Everything else in the tool stack below is optional — add it if your project needs it.

**Full tool stack (used for SprintingForLife.com):**
| Layer | Tool | Cost |
|-------|------|------|
| Domain | Namecheap | ~$12/year per domain |
| Hosting + DNS + SSL | Netlify | $9/month ($108/year) |
| Backend database + storage | Supabase | Free tier |
| Email (professional) | Google Workspace | $14/month ($168/year) |
| Email newsletter | Beehiiv | Free tier (up to 2,500 subscribers) |
| Maps + Geocoding | Google Maps API | Free trial, then usage-based |
| Analytics | Google Analytics 4 | Free |
| Search Console | Google Search Console | Free |
| Merch fulfillment | Printful QuickStore | Free (margin per sale) |
| **Total fixed site cost** | | **~$290/year** |

---

## PART 2 — PREREQUISITES

**What you must set up before Claude can build anything.** These are account registrations and credential steps that require your identity, credit card, or direct access to third-party consoles.

**Before the first session — only set up what your project needs:**
1. **Buy your domain** — Namecheap.com. Required for any live site. Write down the registrar login credentials.
2. **Create a Netlify account** — netlify.com. Free to start; upgrade to Pro when needed (Netlify will warn you when you hit the free tier bandwidth limit).
3. **Create a Google account** — Foundation for Workspace, Maps API, GA4, Search Console. Only needed if using those tools.
4. **Set up Google Workspace** — Only if you want professional email at your domain (name@yoursite.com). Business Starter at ~$14/month.
5. **Create a Supabase account** — Only if your site needs a database (community submissions, location data, etc.). Free tier. Write down: project URL, anon (public) key, and service role (secret) key.
6. **Create a Beehiiv account** — Only if you want an email newsletter. Free tier.
7. **Create a Google Cloud Console project** — Only if you need Google Maps integration. Enable: Maps JavaScript API, Geocoding API, Places API.
8. **Create a GA4 property** — Only if you want site analytics. Get the Measurement ID (format: G-XXXXXXXXXX).
9. **Printful account** — Only if you want a merchandise channel. Set up a QuickStore hosted storefront.

**Credentials to share with Claude when relevant (do not put in public-facing files):**
- Supabase project URL and anon (public) key — safe to embed in site code
- Google Maps API key (restrict it to your domain after getting it)
- GA4 Measurement ID
- Beehiiv form embed URL (found in your Beehiiv publication settings)

**What Claude needs from you for content:**
- Your name, background, and personal story (why you built this)
- Your project niche and target audience
- Any scientific studies or articles you want to feature
- Your expert endorsements (names, credentials, relationship to you)
- Your brand color (Claude will build the design system around it)
- Any photos you want to use

---

## PART 3 — THE TOOL STACK (DETAILED)

### Namecheap — Domain Registrar
- Register your domain here. Keep Namecheap as registrar only.
- **CRITICAL:** When you deploy to Netlify and switch DNS to Netlify's nameservers, Namecheap becomes registrar-only. All DNS records (MX for email, CNAME for Beehiiv, TXT for DMARC) go in **Netlify DNS**, not Namecheap, after that point. This is a critical lesson — do not try to add MX records in Namecheap after you've switched DNS to Netlify.

### Netlify — Hosting, DNS, SSL
- Netlify serves your static files. Drag-and-drop deployment (drag a zip file into the Netlify dashboard).
- **SSL is automatic** — Let's Encrypt certificate provisions itself when you point your domain.
- **DNS management:** When you switch your Namecheap DNS to Netlify nameservers, Netlify becomes your authoritative DNS. Add all records there.
- **Deployment workflow:** Claude builds a zip file of all your HTML/CSS/JS files. You drag that zip into Netlify. Site deploys in seconds.
- **Pricing:** Free tier is viable for low-traffic launches (static files, limited bandwidth). Upgrade to the paid plan ($9/mo) before you host large files or see real traffic — PDFs will burn through free tier bandwidth quickly.
- **Option to consider:** GitHub + Netlify auto-deploy. Instead of drag-and-drop, you push code to a GitHub repo and Netlify automatically deploys every push. Requires GitHub account and connecting repo to Netlify. Good to set up once the site is stable.

### Supabase — Backend Database + Storage *(optional — use if your site has user submissions or dynamic data)*
- PostgreSQL database with REST API, Row Level Security (RLS), and file storage. You don't need to know SQL — Claude handles all of it.
- **Key tables for SFL:**
  - `locations` — community-submitted sprint locations (lat/lng, surface type, hill grade, photo URLs, rating, approval status)
  - `ratings` — subsequent user ratings on approved locations
  - `stories` — community story submissions (name, text, photo URLs, approval status)
- **Row Level Security (RLS):**
  - Public INSERT allowed — anyone can submit
  - Public SELECT only on `status = 'approved'` rows — visitors only see approved content
  - Service role key bypasses RLS — used only in the local admin review tool (never deployed)
- **Storage:** Public bucket for submission photos. Client-side compression before upload (max 1600px, 82% JPEG quality).
- **Admin workflow:** Claude builds a local-only HTML admin tool. You open it directly in Chrome, enter your service role key, review pending submissions, approve or reject. Never deploy this file.
- **Supabase service role key:** Never put it in any file that gets deployed to Netlify. The admin tool requires it, but that tool only runs locally on your machine.

### Google Workspace — Professional Email *(optional — use if you want name@yourdomain.com)*
- **Critical setup step that is easy to miss:** After creating your Google Workspace account, you must **manually activate Gmail** in the Admin Console. There is an "Activate Gmail" button. If you skip this, email does not work even after your MX records are correct.
- Add your Google MX records in **Netlify DNS** (not Namecheap) after you switch nameservers.
- Set up DMARC (a TXT record in Netlify DNS) to prevent email spoofing.
- Aliases: Set up info@, support@, newsletter@ forwarding to your primary address.

### Beehiiv — Email Newsletter *(optional — use if you want a newsletter)*
- Handles subscriber management, welcome email, and broadcast sends.
- **Embed:** Beehiiv provides an iframe embed code for your signup form. Claude pastes it into your site HTML and styles it.
- **Branded sending domain:** Beehiiv provides a CNAME record to add in Netlify DNS.
- **Welcome email:** Configure in Beehiiv → Automations → Welcome Email. Sends automatically when someone subscribes.
- **Font note:** Use Arial (not Google Fonts) in Beehiiv email typography. Google Fonts don't render in Outlook — Arial is a native Windows font that works everywhere.

### Google Maps API *(optional — use if your site needs maps or location features)*
- Enable: Maps JavaScript API, Geocoding API, Places API.
- **Restrict your API key** to your domain (*.yoursite.com/*) immediately after getting it. An unrestricted key in public HTML will accumulate charges if someone scrapes it.
- **Pin-drop submission:** Instead of a freeform address field, use a pin-drop map for location submissions. The user drops a pin; reverse geocoding auto-fills city and state. Claude builds this entirely.
- **Free tier:** Google gives $200/month free credit — sufficient for most small sites.
- **Satellite thumbnails:** Claude uses the Static Maps API to generate thumbnail satellite images of each approved location.

### Google Analytics 4 *(optional — use if you want site analytics)*
- GA4 is free. You need a Measurement ID (G-XXXXXXXXXX) from the GA4 console.
- **Consent-gated:** Claude implements a cookie consent banner. GA4 fires only after the visitor clicks "Accept." Never fires without consent. This is the legally correct approach.
- **One GA4 property per site** — don't share properties across sites.
- Key events to star in your GA4 dashboard: email_signup, location_submission, story_submission, first_visit.

### Google Search Console + Bing Webmaster Tools *(optional but recommended)*
- Submit your sitemap.xml to both after your domain is live.
- Verify via DNS (Claude generates the TXT verification record for Netlify DNS).
- Claude builds your sitemap.xml automatically.
- Bing Webmaster Tools can import settings directly from Google Search Console — saves setup time.

### Printful — Merchandise *(optional — use if you want a merch channel)*
- **Use Printful QuickStore** (their hosted storefront). Printful is seller of record — they handle checkout, fulfillment, shipping, and sales tax collection for all U.S. states. You do not need to register for a sales tax permit in most states for this channel.
- **What you do:** Design products in Printful, get physical samples approved, then link to your store from your site.
- **What Claude builds:** Merch section on homepage, separate merch.html page, "Shop" nav link.
- **Timing:** Don't link the store live until you've personally approved physical samples. What looks good on screen may not look right on the actual product.
- **Alternative to consider:** Shopify. More flexible, more control, better analytics — but more expensive and more complex. For a side project at early stage, Printful QuickStore is the right call.

### Logo Development — AI-Generated Family *(optional)*
- Use an AI image generator (Midjourney, DALL-E, Adobe Firefly, or similar) to develop the initial concept.
- Export the base design as a high-resolution file.
- Use Python (Pillow library) to generate a family of color variants — Claude writes all the Python scripts.
- **Background removal:** Python/Pillow flood-fill for transparent PNGs. Never use JPG for logos on the web — no alpha channel means solid background boxes that break design.
- **Naming convention:** `bodycolor_swooshcolor_logo_tm.png` (e.g., `black_gold_logo_tm.png`).
- Add ™ symbol to all variants. Placement: bottom right.
- SFL developed 16 color combinations across gold, black, white, slate, green, purple to cover nav, hero, dark backgrounds, merchandise, and partner use.

---

## PART 4 — BUILD PHASES

*These are the phases used for SprintingForLife.com. Your project may use some or all of them. Claude will confirm which phases apply to your build before starting.*

---

### Phase 0 — Context Files (Always Do This First)

*Before any HTML is written, Claude builds the documentation infrastructure. This is what makes multi-session builds coherent. Without these files, context is lost between sessions.*

**What Claude creates:**

**`CLAUDE.md`** — Master instruction file. Claude reads this at the start of every session. Pre-populated with: project name, folder structure, design system (brand color, fonts, CSS variables), deployment workflow, standing rules, credentials reference.

**`Action-Items.md`** — Open/closed tracker. Initialized with Phases 1–9 as open items. Each item gets an ID, owner, priority level, and notes. Claude marks items done as they're completed. Closed items stay in the file with a date.

**`Session-Log.md`** — Running session history. Claude appends an entry each session: date, what was built, key decisions, files changed, open threads.

**`Decisions.md`** — Permanent decision log. Every meaningful decision — design choice, tool selection, direction change — goes here the moment it's made. Sessions end abruptly. If it isn't written when it happens, it may not survive.

**User actions for Phase 0:**
1. Tell Claude your project name, site concept, and niche
2. Tell Claude your primary brand color
3. Tell Claude your domain name if you have it
4. Tell Claude which prerequisites you've already completed
5. Review and approve the file structure Claude proposes

**Lesson learned:** Context files take 10 minutes to set up and save hours over the life of a build. Do Phase 0 first. No exceptions.

---

### Phase 1 — Domain and Hosting

**User actions:**
1. Register domain on Namecheap
2. Create Netlify account
3. Create initial Netlify site (drag a test file to create the site)
4. In Namecheap: Change nameservers to Netlify's (dns1–4.p09.nsone.net)
5. In Netlify: Add your custom domain, wait for SSL to provision

**What Claude builds:**
- A starter index.html to test deployment
- All DNS records you need to add to Netlify

**Lesson learned:** After switching DNS to Netlify nameservers, Namecheap is done. Every future DNS change happens in the Netlify DNS panel.

---

### Phase 2 — Email Infrastructure *(skip if no professional email needed)*

**User actions:**
1. Set up Google Workspace (Business Starter, ~$14/mo)
2. In Google Workspace Admin Console: **Click "Activate Gmail"** — Gmail does not activate automatically
3. Add 5 Google MX records to Netlify DNS (Claude provides the exact records)
4. Add SPF and DMARC TXT records to Netlify DNS
5. Set up email aliases (info@, support@, newsletter@) in Google Workspace

**What Claude provides:**
- The exact MX records, SPF record, and DMARC record to add in Netlify DNS
- Instructions for alias setup

**Lesson learned:** Gmail activation + MX records in Netlify DNS. Both must happen. Missing either means email doesn't work.

---

### Phase 3 — Site Architecture and Design System

**Decisions to make first (tell Claude these things):**
- Brand color
- Site name and tagline
- Target audience
- Fonts (SFL uses Archivo for display, Source Serif 4 for body — both free from Google Fonts)
- Page list (what pages does the site need?)

**What Claude builds:**
- Full CSS design system (CSS custom properties for all brand colors, fonts, spacing)
- Responsive nav (sticky, mobile hamburger menu)
- Page template (disclaimer banner → nav → hero → content sections → footer)
- Cookie consent banner (required for GDPR/analytics compliance)
- All pages: index, faq, content library, getting-started, technique guides, location-finder, community, disclaimer, terms, privacy

**File structure Claude maintains:**
```
yoursite/                       ← All files flat at root
  index.html
  [all content pages].html
  sitemap.xml
  robots.txt
  404.html
  favicon.ico / favicon.png
  og-image.png
  logo.png
```

**Flat deployment structure:** All files at root. No subfolders in the deployment zip. All internal links use bare filenames.

**Hero rule:** Every page opens on a white or off-white background. No dark heroes. Dark sections appear lower on the page. This differentiates the site visually from typical dark fitness/gym aesthetic.

---

### Phase 4 — Supabase Backend *(skip if no database needed)*

**User actions:**
1. Create Supabase project (free tier)
2. Share project URL and anon key with Claude
3. Keep service role key private
4. Run the SQL Claude provides to create tables and set RLS policies

**What Claude builds:**
- SQL statements to create all tables
- Row Level Security policies
- Client-side JavaScript to connect to Supabase (INSERT on submit, SELECT approved only)
- Photo upload flow (client-side Canvas compression → Supabase Storage)
- Admin review tool — LOCAL ONLY, never deployed

**Example RLS setup:**
```sql
-- Anyone can submit
CREATE POLICY "Public can insert" ON locations FOR INSERT WITH CHECK (true);

-- Visitors only see approved content
CREATE POLICY "Public can view approved" ON locations FOR SELECT USING (status = 'approved');
```

**Admin workflow:**
- Open the admin review HTML file directly in Chrome (drag file into browser)
- Enter your Supabase service role key when prompted
- Review pending submissions, approve or reject
- Approved content appears on the live site immediately
- Never deploy this file to Netlify

---

### Phase 5 — Google Maps Integration *(skip if no maps needed)*

**User actions:**
1. In Google Cloud Console: Create project, enable Maps JavaScript API + Geocoding API + Places API
2. Create an API key, restrict it to *.yoursite.com/* immediately
3. Share the API key with Claude

**What Claude builds:**
- Location finder page: filterable, sortable map of all approved locations
- Filters: surface type, hill grade, minimum rating, city/state search
- Sort: Recently Added, Highest Rated, Most Reviews, Nearest First
- Pin-drop submission form (drops a pin, reverse-geocodes to city/state, submits with photo upload)
- Satellite thumbnail images for each location card
- Rating system for submitted locations

**Lesson learned:** Restrict your API key before going live. An unrestricted key exposed in public HTML will accumulate unexpected charges if someone scrapes it.

---

### Phase 6 — Beehiiv Email Newsletter *(skip if no newsletter needed)*

**User actions:**
1. Create Beehiiv publication
2. In Beehiiv settings: Add your sending domain, get the CNAME record
3. Add the CNAME record to Netlify DNS
4. Set up your welcome email in Beehiiv → Automations
5. In Beehiiv Typography: Change font to Arial
6. Copy the form embed code from Beehiiv and share it with Claude

**What Claude does:**
- Pastes the Beehiiv embed iframe into your site's signup section
- Styles the surrounding HTML to match your design system

**Monthly newsletter workflow (no Claude needed once set up):**
- In Beehiiv: duplicate your last broadcast, edit content, schedule or send
- Beehiiv handles delivery, unsubscribes, CAN-SPAM compliance

---

### Phase 7 — Analytics and Search Visibility *(optional but recommended)*

**User actions:**
1. Create GA4 property, get Measurement ID (G-XXXXXXXXXX)
2. Share Measurement ID with Claude
3. In Google Search Console: Create property, verify via DNS (Claude provides the TXT record)
4. In Bing Webmaster Tools: Create account, import settings from Google Search Console

**What Claude builds:**
- Consent-gated GA4 tag (fires only after cookie accept)
- Cookie consent banner (Accept / Decline)
- sitemap.xml (lists all pages with lastmod dates)
- robots.txt

---

### Phase 8 — Content Build

*This is where the most time is spent — Claude builds the templates and structure; you provide the content.*

**Content library:** Each article or study gets its own page. You provide: title, authors, source, year, and key findings. Claude builds each page using the site's article template, with citations, a plain-language summary, and a link to the full source.

**Getting Started / Protocol guide:** Your instructional content, broken into levels or sections. You define the protocol; Claude formats it.

**Founder story:** Write it in your own words, unedited. Claude polishes; the raw material must be yours. Talk about why you built this, what problem you solved, and what you want for others. This is the most important content on the site.

**Expert cards:** Name, credentials, domain label, your personal endorsement in your voice.

**FAQ:** You provide the questions. Claude writes answers in your voice.

**PDF download:** Generate from the site itself by printing from Chrome (File → Print → Save as PDF). One source of truth — update the page, reprint the PDF.

---

### Phase 9 — Merch Channel *(skip if no merch needed)*

**Not a blocker for launch.** Set up merch after the site is live and you've approved physical product samples.

**User actions:**
1. Design products in Printful
2. Order samples and test every product physically before selling it
3. Set up Printful QuickStore hosted storefront
4. Get your QuickStore URL from Printful

**What Claude builds:**
- Merch section on homepage (product cards, "Launching Soon" state until live)
- Separate merch.html page
- "Shop" nav link (added when store goes live)

**Sales tax note:** Printful QuickStore = Printful is seller of record. They collect and remit all U.S. sales tax. You do not need a state sales tax permit for this channel.

---

### Phase 10 — Deployment Process

**The workflow:**
1. Claude edits files in your local folder
2. When changes are ready to deploy, say "build the zip"
3. Claude presents a build plan: which folder, which files, output location
4. You approve the plan
5. Claude zips all files flat (no subfolders) into a deployment zip
6. You drag the zip into the Netlify dashboard (Sites → your site → Deploys tab)
7. Netlify deploys in ~10 seconds. Site is live.

**Version naming:** `yoursite-v1.0.zip` (increment version each build). Store all zips in a Deployments/ folder. Never overwrite old zips — version history is your rollback.

**Never deploy:**
- The admin review tool
- Any file with your Supabase service role key
- Development or test files

**Option to consider — GitHub + Netlify auto-deploy:**
- Create a GitHub repo for your site
- Connect the repo to your Netlify site (Site Settings → Build & Deploy → Link to GitHub)
- Every git push to main auto-deploys to Netlify
- Eliminates the zip/drag-and-drop step
- Recommended once the site is stable and you're making frequent updates

---

## PART 5 — FILE STRUCTURE REFERENCE

```
_YourProject/                        ← Local project root (on your computer)
  CLAUDE.md                          ← Instructions Claude reads at session start
  Action-Items.md                    ← Open/closed action item tracker
  Session-Log.md                     ← What happened each session
  Decisions.md                       ← Permanent decision log
  Brand/
    Logo Source Files/               ← All logo PNG variants
      black_gold_logo_tm.png         ← Active web logo
      [other color variants]
      archive/                       ← Retired logos (never delete)
  WebsiteDev/
    yoursite/                        ← Live site source files (all HTML, images, PDFs)
      index.html
      [all other HTML files]
      sitemap.xml
      robots.txt
      404.html
      favicon.ico / favicon.png
      og-image.png
      logo.png
    Deployments/
      yoursite-v1.0.zip              ← Keep all versions — never overwrite
```

**Flat deployment structure:** When the zip is built and deployed to Netlify, all files are at root. All internal HTML links use bare filenames (faq.html, not /faq.html or /pages/faq.html).

---

## PART 6 — WHAT CLAUDE DOES vs. WHAT YOU DO

### Claude does all of this:
- Writes every line of HTML, CSS, and JavaScript
- Designs and implements the responsive layout
- Builds the Supabase integration (tables, RLS, client-side JS)
- Builds the Google Maps integration (location finder, pin-drop, geocoding)
- Builds the Beehiiv embed and signup flow
- Implements GA4 consent-gated analytics
- Writes sitemap.xml, robots.txt, 404.html
- Builds the admin review tool
- Generates all deployment zips
- Writes Python scripts for logo variant generation
- Formats content/article pages from your summaries
- Drafts and refines all copywriting in your voice
- Maintains documentation (action items, session log, decisions)
- Provides exact DNS records to add in Netlify

### You do all of this:
- Register domain, create Netlify/Supabase/Google accounts
- Set up Google Workspace and activate Gmail
- Add DNS records in Netlify (Claude tells you exactly what to add)
- Restrict the Google Maps API key in Cloud Console
- Order and approve Printful product samples
- Write your founder story (raw; Claude polishes)
- Define your protocol or content structure
- Provide your source articles or studies
- Drag deployment zips into Netlify
- Review and approve content before publishing
- Approve or reject submissions in the admin tool
- Send newsletter broadcasts in Beehiiv
- Make all final decisions on copy, design, and strategy

---

## PART 7 — LESSONS LEARNED

**DNS lives in Netlify after you switch nameservers.**
The moment you change your Namecheap DNS to point at Netlify's nameservers, Namecheap is done. Every DNS record — MX for email, CNAME for Beehiiv, TXT for DMARC — goes in Netlify DNS going forward. Many people continue adding records in Namecheap after this switch and wonder why email isn't working. It won't — Namecheap is no longer authoritative.

**Gmail must be explicitly activated in Google Workspace.**
There's an "Activate Gmail" banner in the Admin Console. Click it. Gmail does not activate automatically when you create a Google Workspace account. Easy to skip; leaves you with professional email addresses that silently don't receive mail.

**Chrome print is the right way to make a PDF from your site.**
Don't use a library to generate a separate PDF file. Print the web page directly from Chrome (File → Print → Save as PDF). One source of truth — if you update the page, you reprint the PDF. Zero separate content maintenance.

**Netlify free tier hits bandwidth limits faster than you expect.**
Free plan includes 100GB/month bandwidth. A 2–3MB PDF with real traffic burns through it faster than you'd think. Upgrade to Pro ($9/mo) around launch time.

**Supabase service role key is powerful and must stay local.**
The service role key bypasses all Row Level Security. Anyone who has it can read, write, or delete any data in your database. Never put it in a deployed file. Never commit it to GitHub. The admin tool that uses it lives on your local machine only.

**Logo files must be transparent PNGs, not JPGs.**
JPG does not support an alpha channel. A JPG logo renders with a solid white background box. Use transparent PNGs for all logos on the web.

**Beehiiv typography — use Arial, not Google Fonts.**
Google Fonts don't render in Outlook. Arial is a native Windows font that works everywhere.

**Restrict your Google Maps API key immediately.**
Takes 30 seconds in Cloud Console. Prevents unexpected billing if someone scrapes the key from your HTML. Do it before your first deployment.

**Document decisions in real time.**
Write every decision to Decisions.md the moment it's made. Sessions end abruptly. Context runs out. If it isn't written when it happens, it may not survive to the next session.

**Ask Claude everything — and push back.**
No matter what comes up — a technical problem, a tool decision, an unexpected error, a pricing question — the first and best move is to ask Claude. Ask why. Ask how. Ask how much. Ask whether there's a better approach. Don't accept every recommendation without questioning it. Tell Claude the direction you want to go. Claude writes the code; you make the decisions.

---

## PART 8 — STARTING A SESSION WITH THIS FILE

1. Save this file as `ClaudeHowToInstructions.md` in your connected Cowork workspace folder.
2. At the start of a new session, tell Claude: "I want to build a website. I've read the build guide. Here's my situation: [your project, your niche, which accounts you've already set up]."
3. Claude will follow the First Run protocol: confirm understanding, browse the reference site, ask what you want to build, recommend the right tools, explain context files, ask questions, and request permission before building anything.

**Total active build time:** Depends on complexity. A simple content site: 5–10 hours of Claude sessions. A full-featured site like SprintingForLife.com: 15–25 hours of Claude sessions. Your time (decisions, content, account setup): 10–15 hours.

---

*This guide was derived from the actual build of SprintingForLife.com (sprintingforlife.com), completed April 2026. The builder had zero web development experience at the start. Claude/Cowork wrote every line of code. The builder has no affiliation with Anthropic or any of the tools mentioned — this reflects personal experience only. Other AI tools may work as well.*

*Version: 3.0 — April 2026*