Creating a Hugo blog and writing posts in Orgmode

I’ve wanted a more streamlined process of writing and publishing content for my blog. While WordPress has powered my site for a long time, I want something more tailored to my Emacs writing workflow.

After reading through the Hugo QuickStart guide and adjusting the installed theme, I created a new site that allows me to write the content using Emacs Org-mode.

The process I followed boiled down to:

Create a sandbox folder and a new Hugo project
Add a theme as a git submodule
Add a Hugo Archetype for Org-mode files
Create content!

I followed the specific process to get a new Hugo site using the Poison theme.

Create the project and add a theme

# Create a sandbox for this site
mkdir -p ~/Desktop/hugo-sandbox && cd ~/Desktop/hugo-sandbox

# initialize a new hugo site
site_slug="pp"
hugo new site ${site_slug}
cd ${site_slug}
git init --quiet && \
  git branch -m "main" --quiet && \
  git add . && \
  git commit -m "Initial Commit from \"hugo new site ${site_slug}\""

# Add the Poison theme along with minimal config to the config.toml file
git submodule add --quiet https://github.com/lukeorth/poison.git themes/poison
cat << EOF >> config.toml
theme = 'poison'

[params]
    brand = "PassionsPlay"
EOF

git add . && \
  git commit -m "Add Poison Theme"

With that in place, we can start the dev server, but there won’t be much to look at until we get some actual content in place:


hugo server

Creating content

Following the Quickstart guide directs you to create a markdown file for your first piece of content.


hugo new posts/hello-world.md
cat << EOF >> content/posts/hello-world.md
# ~~Old~~ New
It's a new world, *filled* with _markup_.
EOF
cat content/posts/hello-world.md


Content "/home/benjamin/Desktop/hugo-sandbox/pp/content/posts/hello-world.md" created
---
title: "Hello World"
date: 2024-11-07T21:04:48-08:00
draft: true
---

# ~~Old~~ New
It's a new world, *filled* with _markup_.

That’s neat, and we can easily fire up our editor to add some actual content. But having the post set to “draft” (the draft: true part), none of that content will show unless you adjust how you launch the dev server. Since we started the dev server with hugo server, those draft posts won’t display. Stop the server with C-c and start a new instance that includes drafts with this command:


hugo server --buildDrafts

Org-mode Archetype

That looks good, but we want to write in Org-mode. We could just try using an org filename:


hugo new posts/hello-org-mode.org
cat content/posts/hello-org-mode.org


Content "/home/benjamin/Desktop/hugo-sandbox/new-blog/content/posts/hello-org-mode.org" created
---
title: "Hello Org Mode"
date: 2024-05-08T21:42:29-07:00
draft: true
---

Running the script created the file in the correct location. However, the Front Matter is using markdown! What we need is a Hugo Archetype for Org-mode files. Adding a file at archetypes/default.org means we can automatically generate the front matter using the same Hugo create command:


cat << EOF > archetypes/default.org
#+TITLE: {{ replace .Name "-" " " | title }}
#+DATE: {{ .Date }}
#+DRAFT: true
#+AUTHOR:
#+CATEGORY:
#+TAGS[]:
EOF
cat archetypes/default.org


#+TITLE: {{ replace .Name "-" " " | title }}
#+DATE: {{ .Date }}
#+DRAFT: true
#+AUTHOR:
#+CATEGORY:
#+TAGS[]:

With the archetypes/default.org file in place, we can create new posts, in org-mode format, by using the .org suffix:


hugo new posts/hello-org-mode-2.org
cat content/posts/hello-org-mode-2.org


Content "/home/benjamin/Desktop/hugo-sandbox/pp/content/posts/hello-org-mode-2.org" created
#+TITLE: Hello Org Mode 2
#+DATE: 2024-11-07T21:17:25-08:00
#+DRAFT: true
#+AUTHOR:
#+CATEGORY:
#+TAGS[]: