Cloudflare Setup Guide
Step-by-step instructions for connecting your domain, configuring DNS, creating an API token, and deploying Cruise Crews via Cloudflare Pages — even if you've never used Cloudflare before.
& Proxy
(CF Pages)
Cloudflare sits between your visitors and your app. It handles HTTPS/SSL automatically, caches assets globally for speed, protects against attacks, and provides the DNS layer where you'll point your QR code URL.
Create a Cloudflare Account
Free forever for the features you need. No credit card required.
Visit dash.cloudflare.com/sign-up — use the same email you'll use to manage your app.
Cloudflare will send a verification email. Click the link inside — you won't be able to add a domain without verifying.
On the plan selection page choose Free ($0/month). This includes unlimited DNS, SSL, CDN, and Cloudflare Pages — everything you need.
Add Your Domain to Cloudflare
If you already have a domain (e.g. mycruiseapp.com) you'll point it to Cloudflare. Don't have one yet? See the note below.
cruise-crews.pages.dev) — no domain purchase needed. Jump to Step 7.
From the home page click the + Add a domain button (top right) or select Websites → Add a site.
Enter your root domain exactly as purchased — e.g. cruisecrews.com — without www or https://.
Cloudflare will scan your existing DNS records automatically. Review them — they're usually imported correctly.
You'll see something like aria.ns.cloudflare.com and bob.ns.cloudflare.com. Copy these — you'll need them in Step 3.
Save your nameservers here so you don't lose them:
Update Nameservers at Your Registrar
Tell the company you bought your domain from to route DNS through Cloudflare.
Common registrars: GoDaddy, Namecheap, Google Domains (now Squarespace), Porkbun, Cloudflare Registrar. Go to their DNS or Domain Management section.
Look for a section called Nameservers, Custom Nameservers, or DNS Servers. Select "Custom" or "Use custom nameservers".
Delete any existing nameservers and enter the two Cloudflare nameservers from Step 2. Save the changes.
Usually takes 5–30 minutes. Cloudflare will email you once it detects the change. You can check at dnschecker.org.
My Products → DNS → Manage DNS → Nameservers → Change → I'll use my own nameservers → enter both → Save
Domain List → Manage → Nameservers dropdown → Custom DNS → enter both → green tick to save
Manage → DNS → Name servers → Use custom name servers → enter both → Save
Domain → Details → Authoritative Nameservers → edit → paste both NS values → Update
Configure DNS Records
Point your domain to Cloudflare Pages. These are the exact records you need.
In the Cloudflare dashboard → your domain → DNS → Records → Add record
your-project.pages.dev with the actual .pages.dev URL Cloudflare Pages gives you in Step 7. You can come back and update this record once you have it.
Select your domain from the home page, then click DNS in the left sidebar → Records.
Type: CNAME · Name: @ · Target: your-project.pages.dev · Proxy: Proxied (orange cloud ON)
Type: CNAME · Name: www · Target: your-project.pages.dev · Proxy: Proxied (orange cloud ON)
The orange cloud icon means Cloudflare is proxying the traffic — this enables SSL, caching, and protection. Do NOT set to DNS Only (grey cloud) for Pages.
Create a Cloudflare API Token
An API token lets external tools (CI/CD, deploy scripts) interact with Cloudflare securely without exposing your password.
Click your avatar (top-right) → My Profile → API Tokens tab → Create Token.
For Cloudflare Pages deployments, click Use template next to "Edit Cloudflare Workers" — it includes the Pages permissions.
Minimum permissions needed:
Account · Cloudflare Pages · Edit Account · Account Settings · Read Zone · DNS · Edit (only if managing DNS via API) Zone · Zone · Read
Under Account Resources, select the specific account the token should apply to (not "All accounts" unless necessary).
Review the permissions summary and click Create Token.
Cloudflare shows the token value only once. Copy it immediately and save it in a password manager or your deployment environment's secret store.
Save your token reference here (this field is local — never sent anywhere):
# In the Cloudflare dashboard URL: https://dash.cloudflare.com/YOUR_ACCOUNT_ID/ # Or: Right sidebar of any domain page: API → Account ID (click to copy)
Run this in your terminal to verify the token works:
curl -X GET "https://api.cloudflare.com/client/v4/user/tokens/verify" \
-H "Authorization: Bearer YOUR_API_TOKEN_HERE" \
-H "Content-Type: application/json"
# Expected response if valid:
{
"result": { "id": "...", "status": "active" },
"success": true
}
Configure SSL / HTTPS
Cruise Crews must be served over HTTPS — service workers and PWA install prompts won't work over HTTP.
SSL/TLS Encryption Mode → Full (Strict)
Dashboard → your domain → SSL/TLS → Overview → set to Full (strict)
Always Use HTTPS
SSL/TLS → Edge Certificates → "Always Use HTTPS" → ON
Automatic HTTPS Rewrites
SSL/TLS → Edge Certificates → "Automatic HTTPS Rewrites" → ON
Minimum TLS Version → TLS 1.2
SSL/TLS → Edge Certificates → "Minimum TLS Version" → TLS 1.2
.pages.dev domain and any custom domain you add to the project. No manual certificate setup needed.
Cause: SSL mode set to "Full (Strict)" but your origin has no valid cert. Fix: Switch SSL mode to Full (not strict) or make sure your origin cert is valid. For Pages this shouldn't happen — use Full (Strict).
Cause: Cloudflare can't verify the cert on your origin. Fix: Use Cloudflare Origin CA certificate on your origin, or switch to Full (not strict).
Cause: Page loaded over HTTPS but some resources use HTTP. Fix: Enable Automatic HTTPS Rewrites in SSL/TLS → Edge Certificates, or fix the HTTP URLs in your HTML.
Cause: Page not served over HTTPS (service workers require secure context). Fix: Ensure the domain is proxied through Cloudflare with "Always Use HTTPS" ON.
Deploy to Cloudflare Pages
Host Cruise Crews on Cloudflare's global CDN — free, with 500 builds/month on the free plan.
In the Cloudflare dashboard, click Workers & Pages (left sidebar) → Create → Pages tab → Connect to Git.
Click Connect GitHub (or GitLab), authorize the integration, then select the repository containing your Cruise Crews files.
For a plain HTML/CSS/JS project (no build step):
Framework preset: None Build command: (leave empty) Build output dir: / ← root of repo Root directory: (leave empty)
Cloudflare will deploy your site in ~30 seconds. You'll get a URL like cruise-crews-abc.pages.dev.
In your Pages project → Custom domains → Set up a custom domain → enter cruisecrews.com → Cloudflare auto-creates the CNAME record.
Choose Upload assets instead of "Connect to Git". Give your project a name (e.g. cruise-crews).
Drag the entire project folder (containing index.html, manifest.json, service-worker.js, icons/ etc.) onto the upload area.
Your site goes live in seconds at your-name.pages.dev. Update your QR code URL on qr.html with this new URL.
# 1. Install Wrangler npm install -g wrangler # 2. Authenticate with your API token wrangler login # OR use token directly: export CLOUDFLARE_API_TOKEN=your_token_here # 3. Deploy your project folder wrangler pages deploy ./ --project-name=cruise-crews # Expected output: ✨ Success! Deployed to https://cruise-crews.pages.dev
CLOUDFLARE_API_TOKEN as an env variable, make sure the token has Cloudflare Pages: Edit permission (Step 5).
Verify & Test Everything
Run through this checklist before sharing your QR code with the crew.
Open https://yourdomain.com — confirm the padlock 🔒 is green and no mixed-content warnings appear.
Open DevTools → Application → Service Workers — confirm the SW shows status activated and running.
Visit on Android Chrome — the "Add to Home Screen" banner or install icon in the address bar should appear within a few seconds.
Open in Safari on iPhone → Share → Add to Home Screen → confirm it installs and launches full-screen.
In DevTools → Network → set to Offline → reload the page — it should load from cache (not show a Chrome dino).
Go to qr.html → update the URL to your live domain → scan with a phone camera — confirm it opens the app.
DevTools → Lighthouse → select Progressive Web App → Generate report. Aim for a green PWA badge ✅.
Check that https://www.yourdomain.com redirects to https://yourdomain.com (or stays on www — just be consistent).
dnschecker.org — check DNS propagation from 20+ global locations
ssllabs.com/ssltest — verify your SSL certificate grade (aim for A or A+)
pwabuilder.com — validates your PWA manifest, SW, and generates app store packages
curl https://api.cloudflare.com/client/v4/user/tokens/verify \
-H "Authorization: Bearer YOUR_TOKEN"
qr.html, update the URL to your live domain, download the QR code and share it with your crew before boarding. 🚢