In this guide I’m going to explain how to host your Hugo Static Site using Cloudflare Pages and GitHub for free.

Feel free to use the Table of Contents above to skip ahead.

Introduction

In a previous blog post “Building a Hugo Static Site” I explained how to use Hugo to create a Static Website.

In this guide I’m going to explain how I use Cloudflare Pages and GitHub to host and deploy my blog

Cloudflare Pages and GitHub

I explained in a previous post, you can use hosting providers like Cloudflare Pages to generate your static site for you as part of their deployment process when deploying your site. This means you don’t need to generate the site yourself every time you update/add new site content.

You put your Hugo site on GitHub and tell Cloudflare Pages to use that GitHub repository when generating the site for you. When you then update/add new content to the site, you just upload the changes to the GitHub repository. Cloudflare then detects the change and regenerates the static site for you.

There are many hosting providers that do this, I chose Cloudflare Pages as I use Cloudflare as my Domain registrar so it made sense to use them, plus their free plan was more than enough for my needs.

Cloudflare have some really good documentation explaining how to deploy a Hugo Site with Cloudflare Pages, but I’ll do a quick overview below.

Push Hugo Site to GitHub

Before using Cloudflare Pages to deploy your Hugo Site. You need to put your Site on GitHub.

If you have never uploaded files/content to a GitHub repository before, there are a few ways explained here

I use Visual Studio Code as well as Git to edit and upload my site to my GitHub repository. There is a more detailed guide here.

A quick overview:

  • Install Git and Visual Studio Code
  • In Visual Studio Code open “Source Control” and login to your GitHub profile
  • “Clone repository” to GitHub and select the “GitHub repository” you want to upload your site too
  • You can then “commit and push” the site to your GitHub repository
  • Go to your GitHub account and check your content is there in the right repository

Info

Please make sure to read the detailed guides above. My steps above are just a quick overview.

Deploy with Cloudflare

Now that the site is on GitHub we need to log in to Cloudflare, connect it to the GitHub repository and deploy the site.

  • Log in to Cloudflare with your account or sign up if you don’t have one already

  • Select ‘Pages’ on the left tab

  • Create a “Project” and “Connect to Git”

  • Log in to GitHub and authorize Cloudflare access

  • Select the repository you want Cloudflare to deploy and begin setup

  • Fill in the needed information

    • Give the Project a name
    • “Production Branch” set as main
    • “Framework preset” set to Hugo
    • Make sure “Build output directory” is set as /public
    • Expand Environment variables and “Add variable”. In the “Variable name” enter HUGO_VERSION and under “Value” enter the version of Hugo you are currently using. I’m using 0.110.0

    I explain how to find out the version of Hugo you are using in the Setting up Hugo section of this post.

  • Hit ‘Save and Deploy’. Cloudflare will now start to build and deploy your site

  • If all goes well you will get a confirmation message all was done.

  • You should now have a unique subdomain that links to your site projectname.pages.dev

Warning

It’s really important to expand “Environment variables” and set the “Variable name” and “Value” above. If not you may get errors when trying to deploy

Using a custom domain (Optional)

If you own your own domain and don’t want to use the subdomain *.pages.dev Cloudflare assigns to your project. You can setup your own custom domain or subdomain.

  • On your project page select the project
  • Under the project select “Custom domains”
  • Select “Setup a custom domain”
  • Enter your “custom domain” and follow the instructions

I hope you found this post useful.

Colin

Also published on Medium