How I made my blog with emacs and hugo

2 minute read

I have been using emacs most of the time for writting, and of course when I started to make my blog I have been use it (emacs) since of it. In the beginig when I start writing I was using some scripts and tips from system crafters he use htmlize and some lisp scripting. It was ok but then I have been watching some lukesmith videos and see this video about him switching to HUGO, so I decided to check HUGO too.

Figure 1: A overview of how my org file looks like.

Figure 1: A overview of how my org file looks like.

What software and packages do I use?.

Yep! I use emacs 🤓 and ox-hugo.

And to build the static web I use HUGO and git.

1(use-package ox-hugo
2  :ensure t
3  :after ox)

Org and its configuration.

HUGO uses markdown to manage the sites, posts, etc. but because we where using emacs, (we don’t like others than org syntax), so there are a lot of variables that ox-hugo handle in order to been exported to markdown syntax.

In my case I like to develop my whole blog into a single org-file

 1#+begin_src org
 2#+TITLE: jpacheco.xyz
 3#+AUTHOR: Javier Pacheco
 4#+DESCRIPTION: My website posts & projects.
 5#+hugo_base_dir: ~/webdev/blog/
 6#+startup: content
 7#+hugo_custom_front_matter: toc true
 8#+hugo_auto_set_lastmod: t
 9#+date: 2024-07-04
10#+seq_todo: TODO(t) WAIT(w@/!) | DONE(d!)

These are the most important and relevant to use within HUGO:

  • #+HUGO_BASE_DIR:

This declare where you HUGO site is located, basically in the path where you run hugo new site my-site.

  • #+HUGO_CUSTOM_FRONT_MATTER:

This is for enable/disable the toc of the posts when ox-hugo exported to md format.

Writing the posts.

Write a post is very easy to start, you only need to add a org lvl-1 header, and add a more metadata (properties). The sub-headers of the post are going to be org-lvl-3 headers, and so on.

1* TODO How I made my blog with emacs and hugo               :emacs:blog:hugo:
2   :PROPERTIES:
3   :EXPORT_FILE_NAME: my-blog-in-emacs
4   :EXPORT_DESCRIPTION: A overview of how I write and develop my web blog using emacs & hugo
5   :DATE:     08-14-2024
6   :EXPORT_HUGO_SECTION: posts
7   :END:

  • :EXPORT_FILE_NAME:

This is how your file is going to be stored, you may or not add the .md extension.

  • :EXPORT_HUGO_SECTION:

Here is the tricky part, if you have multiple sections like: post, projects, topics, etc. this is where the file is going to be stored.

If the sub-header starts with a TODO, when exported the md metadata is going to have draftt: true, which means even the archive is going to be created when you run hugo to create your site that md archive is going to be ignored until you finish (remove the TODO or change it to DONE.).

And that’s it, you can search more options for manage the front matter in hugo in this page.

Thanks for reading.