CloudFlare Dashboard setup

Go to the dashboard and then the Pages section.

Add a site and connect to your GitHub account and select the repo. Click on Begin setup.

Choose the production branch, you might just want to use main or alternatively create a long-lived prod branch that you merge up from main.

Build settings

In the Framework preset select Astro so that the recommended settings are prefilled.

By default to build command will be npm run build unless you’ve changed the default command in package.json and the build output directory will be /dist.

Set up any Environment variables you need here also.

Click Save and Deploy then sit back and see how it goes. All going well you’ll have some green success ticks and can then continue to your project section.

Now whenever you push to your git repository on the selected branch you’ll get automatic builds and deployments.

Migrate a custom domain

So my old Gatsby site was running on Github pages and funnily enough already using CloudFlare for DNS (although my domain was through another registrar). I needed to update the CNAME record for my domain to point to <my-pages-site>.pages.dev, replacing <username>.github.io.

In your CloudFlare dashboard go to Workers & Pages - then your site - then the Custom domains tab. Because my domain was already with CloudFlare I had a message showing that it would be migrated to my Pages site. The redacted bits are just my old github pages URL and my new CloudFlare pages domain .pages.dev

This will set up the www. domain.

You will need to do the same thing but this time for the zone / domain apex. CloudFlare should update your DNS records automatically for you but you can verify under the Website > DNS > Records section. You should see a couple of CNAME entries for the root and www respectively. CloudFlare uses CNAME flattening to make this possible as normally you can’t have a CNAME record on a zone apex.

Finally just check that any records left over from github pages are cleaned up / deleted. I had a bunch of A records that were no longer needed.

Redirect www to domain apex

Go to your CloudFlare dashboard and scroll down to “Bulk Redirects” (in beta at the time of writing). Click on Create new bulk redirect list and then give it a name and short description.

Click “Next” and on the next screen open up the section, “Or, manually add URL redirects”. Enter your www domain as the Source URL and the apex root domain as the Target URL (include the protocol, e.g. https://example.com) with 301 Status (permanently redirect). Expand the “Edit parameters” section and ensure the following are ticked:

• “Preserve query string”
• “Subpath matching”
• “Preserve path suffix”

Click “Next” to review and finally “Continue to Redirect Rules”. Ensure the rule has a descriptive name and then click on “Save and Deploy”.

Test out your rule is working properly by going to the www domain, if you select the URL (or F6 on some browsers) it should hopefully have gone straight to the apex domain. The CloudFlare documentation as a reference is here

Redirect the pages.dev domain to your custom domain

This is almost the same as the previous section. The purpose is to prevent serving your site publically on the *.pages.dev domain so you’re not dilution your SEO results.

Follow the same steps to add a new bulk redirect list, this time with the <your-subdomain>.pages.dev as the source with the same target and parameters as before. The CloudFlare documentation as a reference is here