Switching to Hugo
Welp, I switched this website from Gatsby to Hugo.
This reminds me of my distro-hoppin’ days, when I used to spend nights installing different Linux distributions and then meticulously configuring them to my liking. “Oh man, I can get so much done with this distro!”, I’d say. I spent so mush time trying to find that perfect setup, that I didn’t spend much time actually using them to get things done.
Well, I guess I haven’t changed much. After writing a single post, I decided to try something else for this website. Let’s at least talk about the notable changes in a second post…
Go-ing There with package.json⌗
Hugo doesn’t need a package.json
but I couldn’t bring myself to delete it. Old habits die hard I guess. I added a couple things to it to make it feel worthwhile:
-
I use yarn workspaces to install dependencies for the theme when I run
yarn install
from the repo’s base directory. All I had to do was add this to the package.json:"workspaces": [ "themes/terminal" ],
-
I added this cool npm module that installs a hugo binary to the dev dependencies. If I want to work on this website on a new computer, I only have to run
yarn install
!
Github Actions: Rewind It Back⌗
With Gatsby, I used this action to deploy it. But this time around, I felt like I had a better understanding of what was going on here. With a little help from this article, I (mostly) wrote it by hand. The process is simple:
- Checkout the website’s git repository
- Run
yarn install
to install the theme’s npm dependencies - Run
hugo
to build the website - Publish the contents of the
public
directory (wherehugo
builds to) to thegh-pages
branch.
Those package.json
changes I mentioned earlier came in handy here. Here’s what it looks like:
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
with:
submodules: true
fetch-depth: 0
- name: Use Node.js
uses: actions/setup-node@v1
with:
node-version: 12.x
# This also installs Hugo since it's in my dependencies!
- name: Install dependencies
run: yarn install
- name: Build
run: yarn build
- name: Create CNAME file
run: cp CNAME public/CNAME
- name: Publish
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
user_name: 'github-actions[bot]'
user_email: 'github-actions[bot]@users.noreply.github.com'
commit_message: ${{ github.event.head_commit.message }}
Using Timestamps in Folder Names⌗
I really like the idea of prefixing post names with YYYY-MM-DD
so they’re listed in date order when listed alphabetically. Like this:
$ ls content/posts
2020-08-02-creating-this-website/
2020-10-03-switching-to-hugo/
Hugo has a way to get the creation date from those timestamps! See the :filename
date handler here. In my config.toml
, I have:
[frontmatter]
date = [":filename", ":default"]
You can also get the date that it was last updated from git by enabling gitinfo:
enableGitInfo = true
I don’t think I’ve ever been so excited about creation and updated dates before! These changes give me the file structure I want, keep the creation dates in a single place, and make the updated dates entirely automatic! 💃
Remove Timestamp from Title⌗
At this point, if you run
$ hugo new posts/2020-10-03-switching-to-hugo
It gets the creation date from the folder name as expected, but the new post has the title “2020 10 03 Switching To Hugo”. How do I get that timestamp out of there? After plenty of trial and error, I finally came up with this template for the post archetype:
title: "{{ replace ( replaceRE "^\\d+-\\d+-\\d+-" "" .Name 1 ) "-" " " | title }}"
That template removes the timestamp, then replaces hyphens with spaces, then capitalizes the first letters of each word. Note that you can nest templates with parentheses.
Now when I run the same command, the title is “Switching To Hugo”. Ahh much better.
That’s All Folks⌗
That’s it for now, we’ll see how Hugo works out. If I switch again, I’ll be sure to post some updates!