Featured image of post How This Blog Works

How This Blog Works

Automating a Hugo blog to publish to Cloudflare, and more.

This serves as documentation for my future self as well as an explanation that might be useful for others. If you want to set up a Hugo-based blog that creates a nice static site and publishes without too much work, then this is one way to do it.

There are a few components:

  • The Blogging Framework (how posts get created)
  • The UI
  • Automatic Publishing
  • Automatic Deployment

The Blogging Framework

I’m using Hugo. It allows me to write blog posts as Markdown (in my favorite text editor). Using that Markdown, it builds all of the HTML in my chosen theme, along with all of the menu navigation, tagging, RSS feeds, etc. It’s quite nice!

I also keep everything in version control via git. That allows me to track changes over time. All of the files used to generate the site are on GitHub which serves as both a backup and a way to automate publishing and deployment (more about that below).

The UI

I’m using Hugo Theme Stack by Jimmy Cai. It looks nice, and I’m generally terrible at front-end design.

Automated Publishing

When you write content for Hugo, there’s a build step that you run to generate the site. The simplest way to do this is to just run it locally and copy the resulting files somewhere (like Cloudfront or Amazon S3). If you do this, you need to remember the build command, any specific parameters for your build, etc. I got into programming because I hate tedium, and that, my friend, is tedious.

I’ve been spoiled by modern build systems where I need only push my changes to the main branch on GitHub and the robots do the rest. So let’s do that!

I used an existing action in the GitHub Marketplace and forked it to my own repo to make a slight modification in order to override which branch we’re pushing the published works to. In this case, I didn’t want to use gh-pages because I want to publish the static site to Cloudflare using the static branch.

Automated Deployment

Cloudflare has a very generous free tier that makes it really easy to publish static content from GitHub to a domain. Once you have an account, you’ll find it under “Compute (Workers)” and then “Workers & Pages.” From there, you can create a Page and hook it up to a specific GitHub repository and branch. In this case, I hooked it up to the static branch. Once you assign all of the permissions and get the custom domain set up, Cloudflare takes care of the rest.

Wrapping It All

So that’s it! Now when I want to publish a new post, I edit the files locally, commit the changes and push them to the main branch on GitHub. From there, GitHub builds the files and publishes to another branch, where Cloudflare picks it up to host on their free tier.

Bonus: Automated RSS Ingestion for “Weekly Posts”

Inspired by the “assorted links” on Marginal Revolution and the “Highlights” on Simon Willison’s blog, I wanted to aggregate interesting things I found during the week into a single post. To do this, I wrote a really terrible little script to accumulate links that I post to Pinboard with the “interesting” tag. You can see what the first post created in this manner here.

comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy