BlogBlog Reboot with Hugo and CloudFlare Pages
A Change of Focus
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.
A Change of Platform
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. |
A Change of Process
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!
- Create a new post. For example this post
hugo new posts/2021/10/start-blogging-hugo.md- I add the date ranges for organisation. You can organise how you like.
- Smash out content…
- See how it looks on the fly with
hugo server -Dbefore 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 --helpfor more details.
- 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!
Steps
Cloudflare provides well documented instructions
https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site
Tips
However, I ran into some issues and will hopefully save you some time with a couple of tips.
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.
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!