Blogging using Hugo and ox-hugo
Apr 8, 2018
Allard Hendriksen
2 minute read

Org-mode is a mode in Emacs that makes writing and organizing text a breeze. I use it to keep track of my tasks, bibliography, journal, lab notebook, and notes. I now have a significant volume of notes on topics ranging from sed command-line options, to how to install Anaconda, to reviews of articles I have read. I keep track of quite a few blogs myself, and I find them invaluable for collecting tips and tricks for using Emacs and org mode. Therefore, I want to publish my own set of notes in the hope that others might find it helpful.

Hugo is a static site generator written in Go. It is used by two blogs that I especially like, A scripter’s notes and or emacs. Hugo has great themes, also for academics, and it is well supported by org-mode. There is an org-mode package, ox-hugo, that supports exporting an org-mode file or subtree to a Hugo-compatible directory tree.

I have followed the following steps to create my own blog.

  1. Install Hugo from https://github.com/gohugoio/hugo/releases.

  2. Follow Hugo quick start

  3. Create a site:

    cd ~/projects/
    hugo new site blog
    
  4. Add a theme

    cd blog
    git init
    git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
    echo 'theme = "ananke"' >> config.toml
    
  5. Add content

    hugo new posts/my-first-post.md
    
  6. Start server

    hugo server -D
    
  7. Add academic and refined theme:

    git submodule add https://github.com/gcushen/hugo-academic themes/academic
    git submodule add https://gitlab.com/kaushalmodi/hugo-theme-refined themes/refined
    
  8. Change theme to refined in config.toml. (See step 4). Mine looks like

    baseURL = "http://example.org/"
    languageCode = "en-us"
    title = "Allard Hendriksen, Researcher | CI @ CWI"
    theme = "refined"
    
    [Taxonomies]
      category = "categories" # SINGULAR = "PLURAL"
      tag = "tags"
    
  9. Create org-content/blog.org with the following content:

    
    #+hugo_base_dir: ../
    #+hugo_section: posts
    
    #+seq_todo: TODO DRAFT DONE
    #+property: header-args :eval no
    
    #+startup: indent
    #+author: YOUR NAME
    ​* Drafts
    ** First post
    SCHEDULED<2018-04-08 Sun>
    :PROPERTIES:
    :EXPORT_FILE_NAMEfirst-post
    :END:
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
    
  10. Install ox-hugo (M-x package-install ox-hugo).

  11. Go to the first blog post and export to Hugo (C-c C-e H H).

  12. Now you should see your first blog post pop up on http://localhost:1313!