# Start Here: Setting Up and Running Your Website

You now own your website. You can change anything on it (text, phone number, headlines, pages) and publish those changes live yourself, just by talking in plain English to an AI assistant called **Claude Code**. There is no coding involved.

This guide gets your computer ready (about 30 minutes, one time), then shows you the simple everyday routine: **edit, then publish.**

Read this whole document once before you start.

---

## What you received

Your site has **two landing pages**, all feeding the same lead form:

- **Home** (`/`) — your main long-form page, ending in the quiz.
- **Cash Offer** (`/cash-offer`) — a quiz-first page built for paid ads.

Plus the standard About, Contact, Privacy, Terms, DMCA, thank-you (`/offer-confirmation`), and 404 pages. There is no standalone `/offer` page.

Right now the site is a **template**: it's full of `[[PLACEHOLDER]]` values (your company name, owner name, etc.) that need to be filled in with your real information before you go live. The file **`SETUP - fill these in.md`** is your checklist. The easiest path: do Part 1 below to install your tools, then open the folder with Claude and say *"Read the setup file and help me fill everything in."*

---

## Watch this first (recommended)

If you've never used Claude Code, this short video shows how it works inside VS Code. It builds a different example than your website, so watch it for the **interface and the rhythm** of working with the AI, not for the exact steps — your site already includes its own publish step.

- **"How to Use Claude Code in VS Code in 3 Minutes"** — Nic Conley
  https://www.youtube.com/watch?v=ph5DRCX_g6s

Your website's own install and publish steps are all written below.

---

## Part 1: One-time setup

You will install four free tools, then open your website folder. Do these in order.

### Step 1: Install VS Code
VS Code is the workspace where everything happens.
- Go to **https://code.visualstudio.com**
- Download the version for your computer (Mac or Windows) and install it like any normal app.

### Step 2: Install Node.js
This runs quietly in the background and is what lets your website publish.
- Go to **https://nodejs.org**
- Download the **LTS** version (the one labeled "LTS," not "Current") and install it.

### Step 3: Install Claude Code (your AI assistant)
1. Open VS Code.
2. From the top menu choose **Terminal > New Terminal**. A panel opens at the bottom.
3. Type this and press Enter:
   ```
   npm install -g @anthropic-ai/claude-code
   ```
4. When it finishes, type `claude` and press Enter. It walks you through signing in. You need a paid Claude plan (Pro or Max).

If you get stuck, the official guide is at **https://claude.com/claude-code**.

### Step 4: Install Wrangler (the publish tool)
In that same terminal, type this and press Enter:
```
npm install -g wrangler
```
You will never run this by hand — the publish step uses it for you.

### Step 5: Open your website folder
- In VS Code, choose **File > Open Folder**, then select your website folder.
- Open a terminal (**Terminal > New Terminal**) and type `claude` to start your assistant inside that folder.

Claude automatically reads the instruction file that came with your site, so it already knows how to edit and publish it. You're ready.

> **Windows note:** also install **Git for Windows** (free, https://git-scm.com/download/win) — the publish step needs it, and Claude Code uses it on Windows. Then the simplest path is to ask Claude to "publish my site" and let it handle everything; if you prefer to run commands yourself, use the **Git Bash** terminal it provides.

---

## Part 2: Fill in your information + connect your accounts

Do this once, before going live. Open the folder with Claude and say *"Read the setup file and help me fill everything in."* Claude works through **`SETUP - fill these in.md`** with you. In short, you will:

1. **Set three publishing values** in `deploy.sh` (your Cloudflare project name, account ID, API token). These are the only settings that live in a file.
2. **Add your form settings** in the Cloudflare dashboard (your CRM webhook and alert email) — these live in the dashboard, not a file, so they stay put every time you publish.
3. **Choose your brand style** — the template ships as a *personal brand* (you, by name and photo). If you'd rather the site speak as "we"/your company with no individual pictured, tell Claude *"set this site up as a company brand"* and it applies the documented swap.
4. **Replace the `[[TOKENS]]`** with your business name, owner name, contact email, address, and legal state/county, and add your logo and photos. This is a single find-and-replace per value across the site. (The publish step refuses to go live while any `[[TOKEN]]` is unfilled or a referenced image is missing, so nothing half-finished can slip out.)
5. **Add your Google Maps key** (required for the address box — see below).
6. **Set up the lead backup database** (required — it saves a second copy of every lead on your own Cloudflare account, so a lead can never be lost), and optionally turn on **Resend** failure-alert emails.

One thing **not** to break: the quiz's **required** "I agree to be contacted…" checkbox on the contact step (SMS/TCPA consent). It must stay unchecked by default, block submit until checked, and send `sms_consent: yes` on every successful lead. Details are in the setup file, section 7b.

### Google Maps key (required)
This powers the address autocomplete and house-photo preview on your form. Without it, the address box still accepts typed addresses and the form still submits — you just lose the autocomplete and the photo preview, which are worth having.
1. Go to **https://console.cloud.google.com** and sign in (create a free account if needed).
2. Create a project, then under **APIs & Services** enable **Maps JavaScript API**, **Places API**, and **Street View Static API**.
3. Under **Billing**, link a card to the project. Google requires this for Maps to work at all — normal form traffic stays well inside the free monthly credit, so it typically costs nothing.
4. Under **Credentials**, create an **API key** and copy it.
5. **Restrict it to your domain**: edit the key → **Application restrictions → HTTP referrers** → add `https://yourdomain.com/*` and `https://www.yourdomain.com/*` (include the `https://`). Then under **API restrictions**, limit the key to just the three APIs from step 2. This stops anyone else from using your key and running up your bill.

Then tell Claude: *"Here is my Google Maps API key: [paste it]. Please add it to the site."* Claude knows exactly where it goes (it's the `[[GOOGLE_MAPS_KEY]]` value on both landing pages).

If any of these Google steps feel confusing, don't worry — see **Part 5: Getting help**. You can add the Claude browser extension and have Claude walk you through the exact screen you're looking at.

### Resend, for failure alerts (optional)
Resend sends you an email **only if** a lead ever fails to reach your CRM — with the lead's full contact details in it, so you can follow up by hand. The lead is also saved in your backup database (see Part 4); the email is what tells you to go get it.

If you want these alerts:
1. Sign up at **https://resend.com**.
2. Verify your own domain in Resend (so alert emails can be sent from an address like `alerts@yourdomain.com`).
3. Create an API key and copy it.
4. Decide which email address should receive the alerts.

Then tell Claude:
> "Set up Resend. My API key is [paste it], send from alerts@yourdomain.com, and notify me at [your email]."

If you skip Resend, nothing breaks. Leads are still sent to your CRM and saved to your backup database. You simply won't get the alert email if a CRM delivery ever fails.

---

## Part 3: The everyday routine

### Editing your site
1. Open your website folder in VS Code and start Claude (`claude` in the terminal).
2. Tell it what you want, in plain English. Examples:
   - "Change the phone number everywhere to (757) 555-1234."
   - "Update the home page headline to 'We Buy Houses Fast in [City].'"
   - "Fix the typo on the About page."
3. Claude makes the change and shows you what it did. Nothing is live yet.

### Publishing your changes
When you are happy, tell Claude:
> "Publish my site."

It publishes everything and confirms when it is live, usually within a minute. Make several edits, look them over, then publish once — you do not need to publish after every change. (If any `[[TOKEN]]` is still unfilled, the publish step stops and tells you which one — fill it in, then publish again.)

---

## Part 4: Where your leads go

Every form submission is sent to **your CRM** (your main destination), and a copy is also saved to your **Cloudflare D1 backup database** — a required part of your setup — so a lead can never silently disappear. To see backup copies, just ask Claude:
> "Show me my most recent leads from the backup database."

### Why the failure email matters (the alarm)

Picture this: Facebook reports a lead came in, but nothing shows up in your CRM. Facebook only tells you a lead *happened* (a count) — it never hands you the person's name or phone number. The actual contact details are sitting safely in your backup database, but only if you go look.

That is the gap the optional Resend email (Part 2) closes. Instead of you having to *notice* that Facebook's count and your CRM don't match, the alarm emails you the moment a lead fails to reach your CRM — with the contact info and a backup ID to pull it. Two layers working together:

- **The backup database** means a lead is never *lost*.
- **The failure email** means someone is actually *told* to go get it.

Your CRM can usually also email you on every *successful* new lead, which is worth turning on. The difference: the CRM notification fires on success; the Resend alarm fires on failure. They cover different moments, so they are not the same thing.

> **Note:** the backup database is a **required** part of setup, not an optional extra. The smoke test in the setup file fails until it's in place, because it's what guarantees the "never lost" safety net — the Resend alarm is what tells you when to reach for it.

---

## Part 5: Getting help

When anything is unclear or something breaks, describe it to Claude in plain English. It can read your files, explain what is happening, and fix it. For example: "the address box on my form stopped working, can you check it?"

### Get help right on the screen you are looking at
Some steps happen on other websites (for example, setting up your Google Maps key in Google Cloud). For those, install the **Claude browser extension**:
1. Open the Chrome Web Store and search for **Claude**.
2. Add the extension to your Chrome browser.
3. When you get stuck on a page, open Claude and ask it what to do. It can look at the screen you are on and walk you through it step by step.

### A note on which AI to use
This guide and your website are built around **Claude**. Claude Code is what edits and publishes your site, and the help above assumes Claude. If you prefer a different AI tool (such as ChatGPT or Gemini), it may be able to help, but we do not provide instructions or support for those. To keep things simple and fully supported, use Claude.

That is everything. Welcome to running your own site.
