How to redirect the Cloudflare Pages URL (*.pages.dev) to your custom domain

When I moved a site from Netlify to Cloudflare Pages, I wondered how to redirect the *.pages.dev URL you are given as default for a Pages site to the custom domain I had set up.

But it was a little tricky to find out how to do it.

A couple of forum posts from 2021 suggested it wasn't possible:

• Is it possible to redirect Cloudflare's pages url to the main domain (from someurl.pages.dev to someurl.com)?
• Pages redirect or remove pages.dev domain to custom domain

And at the time of those discussions, it wasn't possible. But in December 2021 Cloudflare launched Bulk Redirects. And with it came the power to redirect your *.pages.dev URL to your custom domain.

In this blog post, I'll show you how I set it up.

Why you should redirect your *.pages.dev URL

You don't have to redirect your *.pages.dev URL. But if you are using a custom URL, I think it's best to only have your website available at that custom URL.

It's not necessarily an SEO thing, because you can use the rel="canonical" link element to tell search engines your preferred URL. I just want to make sure users use my custom URL for branding and consistency reasons.

And yes, if the *.pages.dev isn't in search engines, are people really going to find it? Probably not. But why take that chance?

So, the way I see it, I really have two choices:

1. Password protect the *.pages.dev URL
2. Redirect the *.pages.dev URL

If you go for option 1, Cloudflare has instructions for enabling Access on your *.pages.devdomain.

Or let's go ahead with option number two!

Attempt 1: Using _redirects (❌ fail!)

In Netlify, this can be achieved in the _redirects file, with the following rule:

https://sitename.netlify.app/* https://www.sitename.com/:splat 301!

And while the Cloudflare Pages _redirect file shares many similarities with the Netlify one, from my testing, the same kind of rule won't work on Cloudflare.

# This won't work
https://sitename.pages.dev/* https://www.sitename.com/:splat 301!

Attempt 2: Using bulk redirects (✅ success!)

So how did I finally get my *.pages.dev domain to redirect to my custom domain? Bulk Redirects!

This feature is available on all Cloudflare plans - so you can get this to work even if you are on the free plan.

If you head over to the main Cloudflare dashboard, you'll see Bulk Redirects (beta)* in the menu.

*Bulk Redirects may or may not still be in beta by the time you are reading this post.

Create a Bulk Redirect List

Start by creating a Bulk Redirect List. Click the Create Bulk Redirect List button, and add the following (with your site name where it says yoursite).

Source URL: yoursite.pages.dev/
Target URL: https://www.yoursite.com
Status: 302 (I always start with a temporary redirect in case I mess things up - only move to permanent if/when you are happy there will be no future changes)
☑️ Preserve query string
☑️ Subpath matching
☑️ Preserve path suffix

If you're bulk redirect list status isn't showing as active yet, don't worry. It will do after you create the bulk redirect rule, which we will do next.

Create a Bulk Redirect Rule

Now you have your list - you can create the rule. Up in the Bulk Redirects > Bulk Redirect Rules section, click the Create Bulk Redirect Rule button.

For the rule name, I went for pages.dev redirects.

And then for Redirect incoming requests based on the URL redirects in the following list: you can select the bulk redirect list we just set up.

Click Save, and you are done*!

Make sure your Bulk Redirect Rule is enabled (with the green tick) so you know it is activated.

Now if you visit your *.pages.dev URL in the browser, it will redirect to your custom domain. And your website is no longer visible in two places.