02 — First Deploy

Deploy your first site in under 5 minutes. Two paths: automated Git-connected deploy, or direct upload. Choose the one that fits your workflow.

Path A: Git-Connected Auto-Deploy (Recommended)

If your code lives on GitHub, this is the fastest path. Every push triggers a new deployment.

Step 1: Add Your GitHub Repository

Go to the Cloudflare Dashboard: dash.cloudflare.com
Click Pages in the left menu
Click Connect to Git
Authorize your GitHub account (one-time)
Select the repository and branch to deploy (e.g., main)
Click Begin setup

Step 2: Configure Build Settings

Cloudflare will detect your project type automatically (React, Vue, Next.js, etc.). If it doesn't:

Framework	Build Command	Build Output Directory
React (CRA)	`npm run build`	`build`
Next.js	`npm run build`	`.next`
Vue	`npm run build`	`dist`
Static HTML	(none)	`public` or `.`
Vite	`npm run build`	`dist`

Critical: If you're using Create React App, add this env var before deploying:

SKIP_PREFLIGHT_CHECK=true

Step 3: Deploy

Click Save and deploy. Cloudflare builds your code and deploys it within 1–3 minutes. You'll see:

✓ Build complete
✓ Deployment successful
Live at: https://drklynx-m-abc123def456.pages.dev

That's it. Your site is live. Every push to main (or your chosen branch) auto-deploys.

Watching Deployments

Go to your Pages project in the Dashboard to see real-time build logs:

[13:22:14] Cloning repository...
[13:22:18] Installing dependencies...
[13:23:05] Running build command...
[13:23:42] Build complete
[13:23:45] Uploading files...
[13:23:52] Deployment complete

Path B: Direct Upload (Wrangler CLI)

Use this if your code isn't on GitHub yet, or you prefer to deploy from your local machine without Git.

Step 1: Install Wrangler

npm install -g @cloudflare/wrangler@3.x

Verify installation:

wrangler --version
# Output: wrangler 3.x.x

Step 2: Authenticate

wrangler login

This opens a browser to authenticate. You'll see:

✓ Credentials saved successfully

Step 3: Initialize Your Project

In your project directory:

wrangler pages project create drklynx-m-abc123def456

This creates a local wrangler.toml config file.

Step 4: Build (If Needed)

If your project needs a build step:

npm run build

The output should be in a folder like build, dist, or public.

Step 5: Deploy

wrangler pages deploy ./build

You'll see:

✓ Uploading files...
✓ Deploying...
✓ Environment: production
✓ URL: https://drklynx-m-abc123def456.pages.dev

Your site is live. To redeploy, just run wrangler pages deploy ./build again.

Optional: Deploy on Every Commit

Create a GitHub Actions workflow (.github/workflows/deploy.yml):

name: Deploy to Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci && npm run build
      - uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy ./build

Then add your CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID as GitHub Secrets.

Common Issues & Fixes

"Missing `<div id="root">` Error"

If you see an AJV validation error about missing HTML structure, your build output likely isn't being detected. Make sure:

Your build output directory contains an index.html
That index.html has <div id="root"></div> (for React apps)

Check your build settings in the Cloudflare Dashboard and make sure the output directory is correct.

Build Fails with "SKIP_PREFLIGHT_CHECK"

If using Create React App:

SKIP_PREFLIGHT_CHECK=true npm run build

Or add it as an env var in the Cloudflare Dashboard under Settings > Environment variables.

Deployment Succeeds but Site Shows Blank

After a successful Pages deploy, Cloudflare caches the old version at the edge for up to 60 seconds. Refresh your browser in 1–2 minutes, or purge the cache manually (see 03 — Custom Domain for the purge process).

"404: Not Found" on Subdirectory Routes

If you're using client-side routing (React Router, Vue Router, etc.), you need to configure a fallback to index.html. In your wrangler.toml:

[env.production]
routes = [
  { pattern = "example.com/*", zone_name = "example.com" }
]

[[routes]]
pattern = "/*"
custom_domain = "example.com"

Or if you're on Pages with a custom domain, go to Settings > Routing and enable "Pretty URLs / SPA mode".