Framer Reverse Proxy: Host Your Blog on a Custom Domain with Cloudflare

┌──────────────────────────────────────────────────┐
│                   Visitor                         │
│          https://yourdomain.com/blog/post-1       │
└──────────────┬───────────────────────────────────┘
               │
               ▼
┌──────────────────────────────────────────────────┐
│            Cloudflare Edge Network                │
│                                                   │
│  ┌─────────────────────────────────────────────┐  │
│  │         Cloudflare Worker                   │  │
│  │                                             │  │
│  │  if (path starts with "/blog")              │  │
│  │    → proxy to customer42.framer.site        │  │
│  │  else                                       │  │
│  │    → proxy to WordPress origin              │  │
│  └─────────────────────────────────────────────┘  │
└──────────┬────────────────────┬──────────────────┘
           │                    │
     ┌─────▼─────┐      ┌──────▼──────┐
     │ WordPress  │      │   Framer    │
     │  Server    │      │   Sites     │
     │  (origin)  │      │ .framer.site│
     └───────────┘      └─────────────┘

# Your existing WordPress DNS records should look like:

Type    Name              Content              Proxy
─────   ───────────────   ──────────────────   ──────
A       yourdomain.com    203.0.113.50         Proxied ☁️
CNAME   www               yourdomain.com       Proxied ☁️
MX      yourdomain.com    mail.yourdomain.com  DNS only

# Make sure the A record and www CNAME
# are set to "Proxied" (orange cloud icon)
# This is required for the Worker to intercept requests

Cloudflare Worker — framer-reverse-proxy.js

// Cloudflare Worker: Framer Reverse Proxy
// Routes /blog/* to your Framer site

const FRAMER_SITE = "customer42.framer.site";
const BLOG_PREFIX = "/blog";

export default {
  async fetch(request) {
    const url = new URL(request.url);

    // Only intercept /blog paths
    if (!url.pathname.startsWith(BLOG_PREFIX)) {
      // Let everything else pass through to origin (WordPress)
      return fetch(request);
    }

    // Construct the Framer URL
    // /blog/my-post → customer42.framer.site/blog/my-post
    const framerUrl = new URL(url.pathname + url.search,
      "https://" + FRAMER_SITE
    );

    // Fetch from Framer with modified headers
    const framerResponse = await fetch(framerUrl.toString(), {
      method: request.method,
      headers: {
        ...Object.fromEntries(request.headers),
        "Host": FRAMER_SITE,
        "X-Forwarded-Host": url.hostname,
        "X-Forwarded-Proto": "https",
      },
      redirect: "manual",
    });

    // Create response with modified headers
    const response = new Response(framerResponse.body, {
      status: framerResponse.status,
      statusText: framerResponse.statusText,
      headers: framerResponse.headers,
    });

    // Rewrite any Framer URLs in the response
    // to use your domain instead
    const contentType = response.headers.get("content-type") || "";
    if (contentType.includes("text/html")) {
      let html = await response.text();

      // Replace Framer site references with your domain
      html = html.replaceAll(
        FRAMER_SITE,
        url.hostname
      );

      return new Response(html, {
        status: response.status,
        headers: {
          ...Object.fromEntries(response.headers),
          "Content-Type": "text/html; charset=utf-8",
          // Add security headers
          "X-Frame-Options": "SAMEORIGIN",
          "X-Content-Type-Options": "nosniff",
        },
      });
    }

    return response;
  },
};

# Install Wrangler CLI
npm install -g wrangler

# Login to Cloudflare
wrangler login

# Create wrangler.toml
cat > wrangler.toml << 'EOF'
name = "framer-reverse-proxy"
main = "src/index.js"
compatibility_date = "2026-03-01"

[triggers]
routes = [
  { pattern = "yourdomain.com/blog/*", zone_name = "yourdomain.com" }
]
EOF

# Deploy
wrangler deploy

// Add caching to your Worker for better performance

const CACHE_TTL = 3600; // 1 hour

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    if (!url.pathname.startsWith("/blog")) {
      return fetch(request);
    }

    // Check cache first
    const cache = caches.default;
    const cacheKey = new Request(url.toString(), request);
    let response = await cache.match(cacheKey);

    if (response) {
      return response; // Cache hit
    }

    // Cache miss — fetch from Framer
    response = await fetchFromFramer(request, url);

    // Cache the response
    response = new Response(response.body, response);
    response.headers.set("Cache-Control",
      "public, max-age=" + CACHE_TTL
    );
    ctx.waitUntil(cache.put(cacheKey, response.clone()));

    return response;
  },
};

# Test WordPress (should return your WordPress site)
curl -I https://yourdomain.com/
# Expected: HTTP/2 200, WordPress headers

# Test Framer blog (should return Framer content)
curl -I https://yourdomain.com/blog/
# Expected: HTTP/2 200, Framer content

# Test a specific blog post
curl -I https://yourdomain.com/blog/my-first-post
# Expected: HTTP/2 200

# Verify no Framer branding leaks
curl -s https://yourdomain.com/blog/ | grep "framer.site"
# Expected: No output (all references rewritten)

# Test SSL
curl -vI https://yourdomain.com/blog/ 2>&1 | grep "SSL certificate"
# Expected: Valid SSL for yourdomain.com

// Advanced: Multiple proxy targets

const ROUTES = {
  "/blog": "customer42.framer.site",
  "/help": "help-center.framer.site",
  "/changelog": "updates.framer.site",
};

export default {
  async fetch(request) {
    const url = new URL(request.url);

    // Find matching route
    for (const [prefix, target] of Object.entries(ROUTES)) {
      if (url.pathname.startsWith(prefix)) {
        return proxyToTarget(request, url, target);
      }
    }

    // Default: pass through to origin
    return fetch(request);
  },
};

async function proxyToTarget(request, url, targetHost) {
  const targetUrl = new URL(
    url.pathname + url.search,
    "https://" + targetHost
  );

  const response = await fetch(targetUrl.toString(), {
    method: request.method,
    headers: {
      ...Object.fromEntries(request.headers),
      Host: targetHost,
      "X-Forwarded-Host": url.hostname,
    },
    redirect: "manual",
  });

  // Rewrite target host references in HTML
  const contentType = response.headers.get("content-type") || "";
  if (contentType.includes("text/html")) {
    let html = await response.text();
    html = html.replaceAll(targetHost, url.hostname);
    return new Response(html, {
      status: response.status,
      headers: response.headers,
    });
  }

  return response;
}