A relatively new product from Cloudflare - Cloudflare Pages - allows you to easily deploy static sites. With this new product, Cloudflare joins other popular services, such as GitHub Pages and Netlify. These services allow you to host static sites (no server-side).

The free plan of Cloudflare Pages is more than enough for most users, and allows them, as for this moment, to host unlimited sites and enjoy unlimited bandwidth.

In this guide, we’ll cover the deployment process of a new Hugo website (if you’re new to Hugo, check out How to build a static site with Hugo). However, Cloudflare has organized and detailed documentation that includes relevant guides for other popular static site generators.

Create a project and deploy

  1. Log in to your Cloudflare account.
  2. On the Cloudflare homepage, click the “Pages” tab in the left menu.
  3. Click “Create a project”.
  4. Select the GitHub repository of your Hugo site. If you don’t have a Git repository for your site, you can read more here about integrating Git with a Hugo project. Cloudflare Pages will integrate directly with the GitHub repository to automatically deploy your site with any changes.
  5. Fill in the details and configure the deployment process.
    • Set main as your “production branch”.
    • Select Hugo as the “Framework preset”.
    • Make sure the “Build command” is set to hugo.
    • Make sure the “Build output directory” is set to /public.
    • Important: Click on the “Environment variables” tab under the “Settings” screen. Add a new variable: Set HUGO_VERSION as the “Variable name”. Enter the Hugo version that you use for your site as the “Value”, for example: 0.92.0. If you’re not sure which version you’re using, navigate (cd) to your site folder via the terminal and type hugo version. Adding this variable tells Cloudflare Pages builder the exact Hugo version to use when building your site. Using the same version as the one that you use locally to build your site will prevent various errors. Before I added this variable I got an error during the deployment process and the deployment failed. Setting the Hugo version variable immediately solved the issue.
    • It is also recommended to set another variable: HUGO_ENV and production as its value, since there are various features, depending on your theme and site configuration, that will be enabled in the production environment only.
  6. Click “Save and Deploy”. Cloudflare will start building your site and will show you detailed logs about the deployment process.
  7. If it all went successfully, you should see a confirmation message after the deployment is done. Your site will be available under a unique subdomain that Cloudflare created for it: projectname.pages.dev.

Set up a custom domain (optional)

  1. Under your site’s project in Cloudflare pages, click the “Custom domains” tab.
  2. Click the “Set up a custom domain” button.
  3. Type in your domain and follow the instructions to configure the DNS settings.

References