My coding experience has mostly been away from website development, so I decided to set up a simple personal website to play around with some web technologies. The multitude of different web frameworks, CMSs, hosting providers etc is pretty overwhelming, and after a not particularly rigorous or systematic search I settled on a Jamstack approach with the Hugo static site generator hosted on Cloudflare Pages.

What drew me to this stack was:

• Using a static site generator should give good loading performance
• Hugo is open source and seems to be well maintained with plenty of nice looking themes available
• Hugo is written in and uses Go templates which I was interested in learning about
• There won’t be lots of dependencies on third party libraries or plugins.
• I can write content using Markdown.
• I don’t need to pay anything for hosting as the Cloudflare Pages free tier is very generous.
• Cloudflare seems to be well regarded as a registrar, so I can use them for both hosting and domain registration.

I decided on the Ananke theme, and to not use any headless CMS as it will just be me updating the website.

The verdict

I am happy with the technology choices I made and the resulting website. It didn’t take too long to get everything set up and I can see that Hugo can be very powerful and flexible. The Ananke theme fitted my needs well, it looks nice and is responsive, while being pretty easy to make some tweaks.

Pain points

There were a couple of things that held me up:

You need to set the specify the Hugo version in Cloudflare pages

When I first tried to build on Cloudflare, I got the following error:

00:27:16.349	Executing user command: hugo
000:27:16.420	Error: "/opt/buildhome/repo/themes/ananke/layouts/robots.txt:3:1": parse failed: template: robots.txt:3: illegal number syntax: "-"
000:27:16.428	Failed: build command exited with code: 255
000:27:17.294	Failed: an internal error occurred

There was no problem with the robots.txt from the theme, the issue was that Cloudflare pages was trying to build using an old version of Hugo that my theme wasn’t compatible with. The fix is to explicitly set the version of Hugo to use rather than leaving it as the Cloudflare default which is a very old version.

baseURL Issues with preview deployments

I had a issue where on the production website, the header image of my website showed fine on my computer, but didn’t when I looked on my phone. The problem was I had turned on preview deployments with restricted access. The header image URL was set to be the location of the image in the the preview deployment website e.g. https://6dfcc017.tomcarroll.pages.dev/images/image.jpg. My computer had the access to this so it loaded there, but my phone did not.

This was happening because I had followed this part of the Cloudflare tutorial so had a build command of hugo -b $CF_PAGES_URL. Cloudflare pages sets CF_PAGES_URL as the unique deployment website URL, so where the theme used absURL to get the URL for the image header, it was getting https://6dfcc017.tomcarroll.pages.dev/images/image.jpg rather than the expected https://tomcarroll.uk/images/image.jpg

The simple solution was to change the build command to hugo -b https://tomcarroll.uk
This does mean in the unique deployment websites, the image headers are pointing to the main production URL, but this is not a problem for me.

You also need to make sure that if you are passing the baseURL in the build command, then in the config.toml you have baseURL = ""

• development
• web