Deploying a Hugo Site with Cloudflare Pages: Custom Domains, Redirects, and CI/CD

I’ve used Cloudflare for what feels like ages - first for accessing my home lab (which at the time was a Raspberry Pi updating the ip address with DDNS), later at work to protect applications. Today, I use it for domains, DNS, tunnels, security, and more. It’s a very versatile tool for both hobby and business.

This is the first time I’ve used Cloudflare Pages. I thought about self-hosting a static site, and just using my Caddy reverse proxy or Nginx to serve up the static site. However, I thought I’d give Cloudflare Pages a shot because

1. It’s free, and
2. I don’t have to manage anything!

I’ve found through the years that I like to pick and choose what I self-host and what I host on existing services. This was something simple that I didn’t have to pay for and it takes one more thing off my plate.

And it was stupid easy to get up and running.

I’d like to give credit where credit is due - the documentation for deploying a Hugo site to Cloudflare Pages was well written and can be found here: Deploy Hugo Site with Cloudflare pages

Prerequisites

First and foremost you need to have the Git repository available online. It can be a public or private repo, but I’d recommend hosting it in either GitHub or GitLab. Cloudflare Pages offers support for both and makes this process move along smoothly. For the purpose of this article, I have my project hosted in a private Git repo on GitHub, and that’s the path I will describe.

Cloudflare will give you a custom subdomain on the <project>.pages.dev domain, however my domain is also registered with Cloudflare. I’ll describe what is needed to only allow traffic to your purchased domain instead of the custom domain.

Connecting Your Repo with Pages

To connect your GitHub repository with Cloudflare pages:

1. First need to log in to the Cloudflare Dashboard.
2. Within the sidebar menu, expand Compute (Workers) and navigate to Workers and Pages. Alternatively, you can use the search box and search for pages. You may see a few results, but click on the Compute (Workers) | Workers and Pages link in the Account-level Pages section.
3. Next, click on the Pages tab
4. Continue by clicking the Import an existing Git repository button
5. Connect your Github repository,
6. Select your Hugo project repository
7. Click Begin Setup
8. In the Build Settings section, select Hugo as the framework preset.
9. Finally, click Save and Deploy and you’re off!

My first release failed, and yours probably will too. Don’t sweat it, that’s all part of it. You’ve just got to do what you usually do - check the logs and do a little debugging 🙅.

After looking at the Cloudflare logs for my release, my issue was pretty apparent. I discovered the issue was related to the version of Hugo that Cloudflare defaulted to. To fix this issue if you come across it, we first need to figure out which version of Hugo you are developing with. On your machine you’ve been using for development, run the following command:

hugo version

It should output something similar to:

hugo v0.147.8-10da2bd765d227761641f94d713d094e88b920ae+extended linux/amd64 BuildDate=2025-06-07T12:59:52Z VendorInfo=snap:0.147.8

Now you can define the version of Hugo for Cloudflare to use by going to Settings > Environment variables within your Pages project. Provide the environment variable HUGO_VERSION and give it a value of 0.147.8, or whatever version you are actually using. You don’t need to provide the entire string that was outputted in your console, you just need the version number.

After changing this setting, my deployment worked and I could visit my site by going to the provided URL of:

https://dadstechlab.pages.dev

Custom Domain Setup and Redirection

Since I already had my domain in Cloudflare, setting my project to use my domain was pretty simple. Navigate to the Custom Settings tab within your Pages project and choose your domain. That was it! Cloudflare will add the necessary CNAME DNS record to your site for you.

If you are like me, you probably don’t want visitors accessing your <project>.pages.dev URL. I only wanted visitors on my custom domain. The official Cloudflare Hugo deployment guide has an excellent guide on how to do this, but I’ll describe my experience as well since you are already here.

1. On the account level menu (or you can search for it, just make sure you choose account level settings), navigate to Bulk Redirects.
2. Create a Bulk Redirect List. This allows you to define a source URL, which should be the <project>.pages.dev URL of your site, and set the target URL to your custom domain. I left the status response as 301. I didn’t change any of the additional parameters.
3. Next create a Bulk Redirect Rule using the Bulk Redirect List that you just created, click Save and Deploy, and you’re done!

To test, try navigating to your <project>.pages.dev domain and make sure it redirects as expected to your custom domain.

Deploying Updates

I haven’t played around with the Preview environment, only Production, so if you have experience with this please let me know how it’s going in the comments below!

What does come out of the box is an automatic trigger defined on your production branch so that any commits on that branch will trigger a redeploy of your website. Just remember to test and review changes in PRs before merging into your production branch. You aren’t committing to directly to master/main are you? 😂

Now you have your own Hugo website with automatic deployments set up. Start writing your content and tell the world your story!