Skip to content

Using a Custom Host on Cloudflare Pages

If you’re on Cloudflare Pages, proxying requests through your domain is as simple as creating a new file with a few lines of JavaScript.

Creating a Function

Inside your functions directory, create a new /jamcomments/[[anything]].ts file. You’ll end up with the following directory structure:

├── 🌳 functions
   └── 🌳 jamcomments
        └── 🍃 [[anything]].ts

In that [[anything]].ts file, place the following:

functions/jamcomments/[[anything]].ts
export function onRequest(context) {
  return fetch(
    context.request.url.replace(
      "https://your-custom-host.com",
      "https://go.jamcomments.com",
    ),
    context.request,
  );
}

Using Middleware

As an alternative, you can also use middleware by placing this inside a /functions/_middleware.ts file. Since this would run on every request, you’ll need to ensure you only rewrite when handling a /jamcomments/ path:

functions/_middlware.ts
export async function onRequest(context) {
  if (context.request.url.includes("/jamcomments/")) {
    return fetch(
      context.request.url.replace(
        "https://your-custom-host.com",
        "https://go.jamcomments.com",
      ),
      context.request,
    );
  }


  return context.next();
}

Once deployed, either of these approaches will cause Cloudflare to rewrite /jamcomments/* requests, loading assets and submitting through comments through the JamComments service.

More Information

See Cloudflare’s Functions documentation for more information.