# 🚀 Cloudflare Pages Setup Guide This guide takes you from zero to a live site on Cloudflare Pages in about 30 minutes. You'll end up with a URL like `dr-sameh-bcnp.pages.dev` (you can later change it to a custom subdomain like `bcnp.dr-sameh.net`). --- ## 📋 What you need before starting - ✅ A Cloudflare account (free) — sign up at https://dash.cloudflare.com/sign-up - ✅ Your Anthropic API key (the one already saved in your password manager) - ✅ The file `dr-sameh-cloudflare.zip` (provided) --- ## Step 1: Sign up for Cloudflare (if you haven't yet) 1. Go to https://dash.cloudflare.com/sign-up 2. Enter your email and a password 3. Verify your email when the confirmation arrives 4. **Skip** any prompts to add a domain or website — we don't need to add dr-sameh.net to Cloudflare for this to work --- ## Step 2: Create a Pages project 1. In the Cloudflare dashboard, look at the **left sidebar** 2. Click **Compute (Workers)** or **Workers & Pages** (the name varies) 3. Click the **Pages** tab at the top 4. Click **Create a Pages project** → choose **Upload assets** 5. Give it a name: `dr-sameh-bcnp` (this becomes part of your URL) 6. Click **Create project** --- ## Step 3: Upload the files 1. You'll now see a screen asking you to upload your project files 2. **Unzip** `dr-sameh-cloudflare.zip` on your computer first 3. Inside the unzipped folder you should see: - `index.html` - `IMG_1491.jpeg` - `functions` folder (containing `api/chat.js` and `api/generate-plan.js`) 4. **Drag the unzipped folder** (or all its contents) onto the Cloudflare upload area ⚠️ Cloudflare's uploader may want you to drag the contents (not the wrapper folder). If it doesn't work, try dragging just the items inside the folder instead. 5. Click **Deploy site** 6. Wait ~30 seconds for the upload and deployment to finish 7. You'll see a URL like `https://dr-sameh-bcnp.pages.dev` — this is your new live site! ⚠️ At this point, **the AI chat won't work yet** because we haven't added the API key. That's the next step. --- ## Step 4: Add your API key as an environment variable This is the critical security step that keeps your API key hidden. 1. In Cloudflare, go to your new project (`dr-sameh-bcnp`) 2. Click the **Settings** tab 3. Find **Environment variables** in the left menu (or scroll down to it) 4. Click **Add variable** 5. Fill in: - **Variable name**: `CLAUDE_API_KEY` *(exactly that — all caps, with underscores)* - **Value**: paste your Anthropic API key (the one starting with `sk-ant-api03-...`) - **Environment**: select **Production** (and **Preview** if asked) - **Type**: select **Secret** (this hides the value from the dashboard) 6. Click **Save** --- ## Step 5: Trigger a redeploy so the API key takes effect Environment variables only apply to NEW deployments, not existing ones. So: 1. Go back to the **Deployments** tab in your project 2. Find your latest deployment 3. Click the **⋯** menu (three dots) → **Retry deployment** *Or alternatively:* re-upload the zip again to trigger a fresh deploy. 4. Wait ~30 seconds 5. When it shows "Success", you're done --- ## Step 6: Test it 1. Open a **new incognito/private window** 2. Go to your URL (`https://dr-sameh-bcnp.pages.dev`) 3. You should see the navy/gold BCNP site with your photo 4. Complete a quick assessment (fill in the required fields — they have red asterisks now) 5. Click **Generate plan** 6. You should see the loading spinner for ~20 seconds, then a real personalized AI plan 7. Try the chat: ask **"ما أفضل إفطار لمريض السكري؟"** — should get a real BCNP response --- ## 🎯 Optional: Custom subdomain (recommended after testing) Once you confirm everything works on `dr-sameh-bcnp.pages.dev`, you can give it a branded URL like `bcnp.dr-sameh.net`: 1. In your Cloudflare project, go to **Custom domains** tab 2. Click **Set up a custom domain** 3. Enter `bcnp.dr-sameh.net` 4. Cloudflare will tell you what DNS record to add at your domain registrar 5. Send that DNS instruction to your engineer (or do it yourself if you have access to dr-sameh.net's domain settings) 6. Wait 10-60 minutes for DNS propagation 7. Done — your site now lives at `bcnp.dr-sameh.net` with free SSL --- ## 🛠️ Troubleshooting ### "AI service unavailable" or chat fallback every time - The API key isn't set, or the variable name is wrong - Go back to **Settings → Environment variables** and verify the name is exactly `CLAUDE_API_KEY` - After fixing, you MUST redeploy (Step 5) ### Photo doesn't show - It shouldn't — the photo is embedded as base64 inside the HTML - Try a hard refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac) ### Page looks unstyled / weird - Hard refresh the page (Ctrl+F5) - Or open in incognito mode ### Functions tab is empty - The `functions` folder didn't upload - Re-zip and re-upload, making sure the `functions/api/` folder is included --- ## 💰 Cost reminders - **Cloudflare Pages**: Free, no credit card required, no "credits" trick - **Cloudflare Workers (powering the functions)**: Free up to 100,000 requests/day = ~3 million/month - **Anthropic API**: ~$0.005 per chat message, ~$0.02 per AI meal plan. Capped at $20/month by your existing limit. For typical doctor-with-Facebook-audience traffic, you'll pay $0–$5/month total to Anthropic and $0 to Cloudflare. --- ## 🗑️ After Cloudflare works — clean up Netlify Once Cloudflare is live and tested: 1. Update Facebook posts to point to the new Cloudflare URL (or wait for the custom subdomain) 2. In Netlify, you can **delete** the `drsamehdietadvanced` site to stop the credit-limit nag - Go to Netlify → drsamehdietadvanced → Project configuration → Danger zone → Delete project 3. Keep the Anthropic API key — it's the same one Cloudflare uses now 4. Keep the $20/month spending cap on Anthropic --- ## 📌 Important reminder The medical disclaimers are built into the AI's system prompt and the page itself. They appear in 5+ places. Don't remove them — they protect both your patients and you. If you have any issues during setup, take a screenshot of where you got stuck and ask for help. Don't paste your API key in any message.