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.