I’ve been testing Cloudflare Pages for a bit now and I’ve been pretty impressed with it so far. So much so that instead of publishing the same site to two different domains hosted on two different platforms, I decided to delete my GitHub pages deployment and only use Cloudflare. My reasons for moving to Cloudflare:

• Consolidation Since I’m already using Cloudflare to manage my DNS, it made sense to use the same platform for hosting.
• Flexibility The GitHub pages deployment seemed to be a bit focused on Jekyll while Cloudflare seems to be more flexible in terms of what you use to build your site. GitHub also forces you to make your site repository public on the free tier.
• Multiple Environments Cloudflare supports multiple environments like preview and production which is very useful. The preview environment builds all non master branches and deploys it so you can catch any errors before publishing it to production.
• Repository Support Cloudflare pages is independent of where you actually store your site data like GitHub and GitLab and I liked the idea of being able to switch repository hosts. Cloudflare also supports private repositories.
• Analytics Cloudflare provides page specific analytics which GitHub doesn’t. I still use Google Analytics but it’s useful to have another set of data.

Cloudflare Pages

Setting up Pages is pretty straightforward if you just follow the guide. I had to make a couple of minor changes. My build command for Pages was

hugo --environment cloudflare --minify -b $CF_PAGES_URL

I used the cloudflare environment to set up Cloudflare specific configuration like Google Analytics etc.

Custom Domain

After getting the site built, I added a custom domain to point to the deployed Cloudflare Pages site. I noticed that the site appeared broken when using the custom domain. To fix it, I had to add an additional variable in the build settings for Production

$CF_PAGES_URL https://www.pkharel.com

The reason I had to do this is because Cloudflare deploys to a location like https://pkharel-github-io.pages.dev/ and if you use a custom domain, the base URL will will not match up when building the site e.g https://pkharel-github-io.pages.dev/ vs https://www.pkharel.com . So we have to override the $CF_PAGES_URL with the correct URL for production. Note that this variable should only be present in the Production settings and not the preview settings because we want to use the default $CF_PAGES_URL for the preview sites.

TL;DR (auto-generated with llama3.2:1b)

The post discusses migrating a GitHub Pages site to Cloudflare Pages, specifically highlighting advantages of using Cloudflare such as consolidation with existing DNS setup, flexibility in choosing hosting platform, multiple environment support, and independent repository management. The author also provides step-by-step instructions on setting up Cloudflare Pages, including custom domain configuration for issues encountered during deployment.