Setting Up Hugo and Cloudflare Pages

My weekend project has been to set change my personal website from a Wordpress install to a static site. There are a bunch of static site generators out there, and a bunch of content delivery networks allow hosting of those sites for free. Serving up HTML and CSS seems to be basically free, since it doesn’t require a bunch of storage, bandwidth, or compute. All of that is handled in the viewer’s browser, you’re not having to run webapps and databases and all of those sorts of things. The overhead is a lot less.

I would assume this is also a loss leader from these CDNs and other static site hosters. Cloudflare, Netlify, GitHub, GitLab, and others all want you to use their services, and so they give you the carrot of free hosting which is, for now, a rounding error for their fleets of servers, and if they can get you in their door hopefully you’ll start using more of their products.

Hugo is the SSG framework that I’ve started with, and Cloudflare is the CDN that I’m using to deploy and serve the site. GitHub Pages is a very popular option for serving these kinds of sites, and is easy to set-up. However, while I’m storing the website files on GitHub, I’m serving the website on Cloudflare pages. On GitHub, you have to have your whole repository public in order to use GitHub Pages with a free account. Using Cloudflare Pages, however, you can connect a private GitHub repository and it will build your website and make it public, all for free. I may be writing content on a couple of different computers, so I’d like to be able to sync drafts and themes and other working documents between computers, but I don’t want folks to be seeing stuff that isn’t ready for public view. Also, I don’t think you can use a custom URL on GitHub Pages with a free account, whereas you can on Cloudflare. Hence, the Cloudflare/GitHub solution.

Cloudflare makes it pretty easy to connect your private repo, and then you can select Hugo as the product that you want to use. It then will automatically rebuild your site with brand new content as soon as you push it to your GitHub repo. A little closer to the “hit the publish button” simplicity that Wordpress gives you (though definitely still more fiddly).

Also, Cloudflare just takes any branch that isn’t your main one and publishes those as previews. So now that I’m in more of the moment of theming and tweaking, I don’t have to be messing with my live site. I can do it on a branch and then merge those changes in when I’m ready, even while Cloudflare is still building and letting me see the preview branch just as it would be deployed. It is pretty good so far.

Soon, I’ll post some more information about why I’m moving to an SSG, and talk more about the journey as it goes.