Blog Reboot with Hugo and CloudFlare Pages

After finally swinging back round to do some blogging, the decision was made to scrap the Ghost site and the content, as the content was aged and the code would be written differently now. More emphasis will be placed on these areas: Azure, DevOps, Automation, and PowerShell. The blog serves as a reminder for me and will hopefully be of some use to the reader.

With day to day activity in the cloud and devops space it makes sense to leverage tools and processes within that arena. So, the blog has now moved to Hugo and Cloudflare Pages and consists of the following components:

Component Description
Hugo Hugo is one of the most popular open-source static site generators. Its also very fast.
DoIt DoIt is a clean, elegant and advanced blog theme for Hugo.
Cloudflare Pages Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites.
GitHub Git Repository for Cloudflare to hook in to. I do hope they add other sources!
VSCodium VSCodium is a community-driven, freely-licensed binary distribution of Microsoft’s editor VSCode
giscus A comments system powered by GitHub Discussions.
EDIT 22/10/2021
Shifted from PaperMod theme to the DoIt theme as it provides some more advanced features and builtin support for giscus for commenting. PaperMod is still a fantastic and recommended theme. I just found that the code centric posts were easier to read with DoIt.

This means content can be created within one place and utilise Markdown and Git for simple creation and version control. No logging into the Ghost Admin portal and working within the browser! Upgrades are also simplified and jeepers its very fast!

  1. Create a new post. For example this post hugo new posts/2021/10/
    • I add the date ranges for organisation. You can organise how you like.
  2. Smash out content…
  3. See how it looks on the fly with hugo server -D before commit.
    • This presents me with a local version of the site. The ‘-D’ represent also serving drafts so you can review your work.
    • Check out the full command list or type hugo --help for more details.
  4. Commit and push the changes to the blog GitHub repo main branch (production)
    • Cloudflare Pages automatically picks up the change and deploys the production site.

Very nice!


Cloudflare provides well documented instructions

However, I ran into some issues and will hopefully save you some time with a couple of tips.

Add the Hugo Version Environment Variable

Please ensure you add the Hugo Version Environment Variable For example: HUGO_VERSION v0.88.1

In the guid this step appears optional. Its not.

Avoid 'git submodule'
The guide shows adding themes using git submodule. This broke the build with testing. The Cloudflare Workers Discord mentioned that git submodules are not currently supported.

There is a wealth of information on that Discord channel. The channel is active and responsive - almost overwhelmingly so. I recommend checking it out when you are ready to dig deeper into Cloudflare Pages.

For me, I am loving the new workflow and the sheer speed that Hugo provides.

Hope that helps!