Introduction

My previous post detailed my migration from WordPress to Hugo for static site generation. It covered local hosting within a Docker container and using a reverse proxy for public access. This post will guide you through hosting your Hugo site on Cloudflare’s free platform. This approach eliminates the need for self-hosting, port exposure, and SSL certificate management. Cloudflare automates these tasks and even offers automatic site builds from Git repositories.

This guide assumes you have a Git repository containing your functional Hugo static site and a Cloudflare account with DNS management capabilities for your custom domain. Technically, a custom domain isn’t mandatory as Cloudflare can generate a development URL.

Cloudflare Setup

The setup process is straightforward, particularly compared to setting up Cloudflare tunnels.

Within your Cloudflare account, navigate to Pages in the left panel and choose Create a project. Select the option to Connect to Git. Log in to your preferred Git host (e.g., GitHub or GitLab) through Cloudflare and grant the requested account permissions. Refresh the page to see your Git user and repositories. Choose the relevant repository and proceed.

Select the primary branch (usually “master” or “main”) of your repository in the Production branch dropdown. Under Build settings, select Hugo as the Framework preset. This automatically populates the Build command and Build output directory fields. Click Save and Deploy; your site deployment will begin immediately.

A failed build might indicate that Cloudflare is using an outdated Hugo version. You can rectify this by going back to Pages, selecting your site, and clicking Settings. Navigate to Environment variables, click Edit variables, and choose Add variable. Input HUGO_VERSION as the Variable name and specify the desired version (e.g., 0.101.0) as the Value. Save your changes.

Return to the Deployments tab, locate your failed deployment, and select Retry deployment.

Once the deployment succeeds, your site will be accessible at the provided link under Deployment.

To set up a custom domain, go to Custom domains at the top, click Set up a custom domain, and enter your desired root domain or subdomain. You’ll be prompted to add a DNS record directing your domain to the Cloudflare deployment URL. Cloudflare might offer to add this record automatically. After adding the DNS record, verify it and allow time for propagation.