How to Use Hugo with Cloudflare Pages

By Greg Vedders

I have migrated https://gregvedders.com to a Hugo CMS backend which is then hosted in Cloudflare Pages. This is a great no-cost option to host your site. For those who are unfamiliar, Hugo is a static site generator written in Go. Hugo is well known for its speed, and Hugo’s official website states it is “the world’s fastest framework for building websites.” The content within Hugo is created using Markdown. Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites. The nice thing about this integration, is that you post your website to GitHub which then posts your site to Cloudflare.

Getting started is easy…to connect your Hugo site to Cloudflare Pages, you can follow these general steps:

  1. Build your Hugo site: First, make sure you have a Hugo site ready to deploy. If you haven’t already built your site, you can do so by running Hugo in your project directory to generate the static files.

  2. Create a Cloudflare account: If you don’t already have one, sign up for a Cloudflare account at https://dash.cloudflare.com/sign-up.

  3. Add your site to Cloudflare Pages:

    • Go to the Cloudflare dashboard and navigate to the Pages tab.
    • Click on “Create a project” and select the repository where your Hugo site is hosted (GitHub, GitLab, or Bitbucket).
    • Choose the branch you want to deploy from.
    • Configure the build settings for your Hugo site. You might need to specify the build command (usually hugo) and the output directory (typically public for Hugo sites).

  4. Configure your DNS settings:

    • Go to your domain registrar’s website and set your domain’s nameservers to Cloudflare’s nameservers.
    • In the Cloudflare dashboard, add a CNAME record for your domain pointing to the Cloudflare Pages domain (e.g., your-site-name.pages.dev).

  5. Set up custom domains (optional): If you want to use a custom domain for your site:

    • In the Cloudflare Pages dashboard, go to your project settings and add your custom domain.
    • Update your DNS settings to point your custom domain to the Cloudflare Pages domain.

  6. Deploy your site:

    • Once everything is configured, trigger a manual deployment in the Cloudflare Pages dashboard. Cloudflare will build and deploy your Hugo site.

  7. SSL/TLS Configuration: Cloudflare provides SSL/TLS encryption for your site by default. You can configure SSL settings in the Cloudflare dashboard under the SSL/TLS tab.

  8. Testing: After deployment, test your site by visiting your custom domain or the Cloudflare Pages domain to ensure everything is working correctly.

The thing I love most about using this setup is that upgrades are painless. My site remains the same, the static HTML remains. I hope this guide makes deploying your site with Hugo a breeze! Have a blast building your websitee!