My New Website with Hugo and Workers Sites

Why and how I moved from using WordPress to Hugo and Cloudflare Workers Sites

April 20, 2020
cloudflare , website

All my websites used to run WordPress, this included my personal site over at domjh.com which incorporated my (not very active) blog! I like WordPress, it is relatively easy to set up and maintain and has a huge number of features and a nice panel to manage it all. I am not abandoning WordPress completely, many of my sites, including those that I build for charities or others where multiple people need to contribute content will continue running WordPress. There are a few reasons why I decided to move this site away from wordpress.

  • WordPress is fairly slow, even with cache everything page rules from Cloudflare, my old site was never that quick unless you happened to be lucky enough that some or all of it was in the cache at the Cloudflare data centre you were hitting, given the low traffic numbers.
  • WordPress is overkill for what I need, my personal sites are pretty much static, I rarely change content and don’t need the multitude of features that WordPress offers.
  • WordPress is a target for attacks, it needs updating almost constantly and bots and malicious actors target common flaws in it all the time. Cloudflare’s WAF is brilliant at blocking malicious requests, but can’t pick up everything and Cloudflare Access is great for locking down the admin area of the site, though.

So once I decided to move away from WordPress for static sites like these, the next question was what to move to, I wanted something fairly easy to set up and in the end, decided I would try Cloudflare Workers Sites. This is something I have looked at in the past, but never tried until now. I then looked at the different static site generators available that I could use with this and settled on Hugo. Thanks to this post on Sam Rhea’s Blog which contains the details of his own change from WordPress to Hugo and Workers Sites, I was able to get the Hugo site running fairly quickly. I really like Hugo, it is simple to use and configure and has some nice themes to choose from. This blog uses Cactus and my site over at domjh.com uses Coder. I like the fact that I can see the site in real-time as I am working on the files.

The Hugo Quick Start Guide and Sam Rhea’s post cover installation and basic usage nicely, so I won’t go into that here.

Up to this point, it had taken me just a few hours to work through and get a static site that I could test locally for my blog, and once I got the hang of it, even less time to set up my main site too.

Workers Sites

Once I had my static sites, it was time to try and get them working with Workers Sites, this took somewhat longer than expected!

For Workers Sites, you need Wrangler, so following the Wrangler Install Guide, I used cargo to install it (you can use npm).

cargo install wrangler

Then to configure Wrangler, I ran this command and followed the guide, generating a Cloudflare API token.

wrangler config

Working in the folder containing the Hugo site, I then used this command to create the workers site:

wrangler init --site name

I got thrown an error part way through this process and had to install one part manually, but it generally worked OK and prompted me on the issue. Although I spent some time looking at it, I couldn’t get the automated process to work fully.

This should create a workers-site directory within the Hugo project and a wrangler.toml file which needs to be configured with the account and zone ID from Cloudflare, along with the route domain.tld/* to look something like:

name = "blog"
type = "webpack"
account_id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
route = "domain.tld/*"
zone_id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

[site]
bucket = "public"
entry-point = "workers-site"

This command can be run in the project directory to check everything is working OK, I got error messages the first few times but eventually got it to work.

wrangler preview --watch

Finally, this is run to publish the site:

wrangler publish

This will publish the files from your public directory to Workers KV and create a worker for the specified route.

Updating the site is also easy, just running two commands. The first to regenerate the public files from Hugo and the second to upload these to Workers KV.

hugo
wrangler publish

Thank you again to Sam Rhea for publishing his post on this which got me going with it!

comments powered by Disqus