Deploying a Hugo Blog to Cloudflare Pages
As I wrote about in my previous post I’ve recently built my blog in Hugo. This post details how to deploy a Hugo blog to Cloudflare Pages, using my own site as an example. I will be assuming that you’re using Github, but this should also work the same for other supported Git providers.
Connecting Cloudflare to Your Domain
The first thing I did was connect Cloudflare to my domain thomasvogelaar.me. Cloudflare will find all the existing DNS records that are linked to your domain.
Cloudflare will instruct you to update your DNS records to make them your nameserver. This allows all traffic to be routed via Cloudflare. On my DNS provider Namecheap this can be done under Domain List > {Domain Name} > Nameservers. Updating this is usually pretty quick, but it can take up to 2 days. Cloudflare will email you when this change is done.
Connecting Cloudflare to Github
Once your domain is connected, the next step is to connect your github repo to Cloudflare. To do this, load the dashboard and then navigate to Workers & Pages > Pages and click Connect to Git. Connect your git provider account to Cloudflare, ensuring that it at least has access to the repository you’re looking to deploy.
Select the repository and click Begin Setup. Select the branch you want to use for production and then select Hugo under Framework preset. The rest of the default commands (see below) should be sufficient unless you need to add more build arguments. Once you’re ready, click Save and Deploy.
Linking Your Cloudflare Pages Site to Your Domain
Cloudflare will automatically build and deploy your site to a randomly generated subdomain on their servers. Once you see the success screen, press Add custom domain to link it up to your connected domain from the previous step.
Enter the domain you set up previously and then confirm the DNS changes. Click Activate Domain. You’ll be taken to the Custom Domains screen, and will have to wait some time for your domain to be verified as ready on Cloudflare Pages.
Once this is done, congrats! Your site is now live on Cloudflare Pages. Cloudflare Pages automatically handles caching, so you don’t need to (and shouldn’t) set up any additional caching in or out of Cloudflare.