jameskerr.blog

How to Optimize Your Hugo Blogging Workflow on Mac

#writing

I love this quote by John Cutler from his post on disincentives.

“Good things can happen when you make it easier to do good things.” –John Cutler

He advises to focus less on incentivizing desired behavior, and more on removing disincentives from desired behavior. It’s brilliant.

My desired behavior is to write more posts on my Hugo blog.

I like Hugo because it’s free, fast, and fun to develop. But look at all these hurdles I had to jump when publishing!

  1. Open a terminal
  2. Type hugo new posts/my-interesting-post
  3. Remember 👆 syntax since I don’t do it frequently
  4. Open the new file in a markdown editor
  5. 🌟 WRITE THE WORDS (desired behavior)
  6. Back to the terminal
  7. Run hugo serve to preview
  8. Open up the browser
  9. Navigate to localhost:1313
  10. Back to the terminal to git add . git push
  11. Thankfully, Netlify will automatically deploy on push

Here’s how I removed all that friction.

macOS Shortcuts

I used the macOS Shortcuts app to automate the steps above. Then I put the shortcut icons in my dock for a “one-click” experience.

Here’s my new workflow.

  1. One click to start writing a new post.
  2. One click to preview it a browser.
  3. One click to publish.

It Worked!

I’m writing much more now that I’ve got these buttons. Here are screenshots showing you how to set these up for yourself.

1. ‘New Post Bundle’ Shortcut

What's going on here?
  1. The first action prompts me for the title text
  2. Then the second action has my response in the $1 variable
  3. Change directory in my blog
  4. Run hugo new posts/$1
  5. Open my markdown editor iA Writer

Notice I had to write the full path to the hugo binary. Not sure why.

2. ‘Preview Blog’ Shortcut

What's going on here?
  1. First I kill all exisiting hugo processes
  2. Change directory into the blog
  3. Run hugo serve & putting the server process in the background 4. Then I open localhost:1313 in the default browser

3. ‘Publish Blog’ Shortcut

What's going on here?
  1. Changes directory into blog
  2. Git add everything
  3. Push it to main

Is there an app that makes confetti fall from the top of the screen? That’s the missing piece of this shortcut.

Video Demo

To see this all in action, here’s a video of me creating, writing, and publishing this exact post that you’re reading!

Thanks for Reading

Email me your thoughts at kerr@hey.com or give me a mention on Mastodon.