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 onRequestGet(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 from the JamComments CDN.

More Information

See Cloudflare’s Functions documentation for more information.