Auto-export on Saving

Wouldn’t it be awesome if you can see the live-preview of your Hugo-rendered post each time you saved your post in Org?

Well.. you can do that with these steps, which apply to both per-subtree and per-file flows:

First time setup #

Step 1: Enable minor mode org-hugo-auto-export-mode #

This minor mode is disabled by default. It can be enabled separately at project level or file level.

Enable for the whole project #

If you want to enable auto-exporting for the whole project, add this to the .dir-locals.el file in the project root:

(("content-org/"
  . ((org-mode . ((eval . (org-hugo-auto-export-mode)))))))

Above assumes that the Org files are in the “content-org”/ directory (at any nested level in there) relative to that .dir-locals.el file:

<HUGO_BASE_DIR>
  ├── config.toml
  ├── content
  ├── content-org      <-- Org files in there
  ├── static
  ├── themes
  └── .dir-locals.el

If you have the Org file directly in the project root or in the same directory as the .dir-locals.el, add this in that file instead:

((org-mode . ((eval . (org-hugo-auto-export-mode)))))

Note that with above, org-hugo-auto-export-mode will be enabled for all Org files in the project. If you do not want that, see Enable only for an Org file.

Enabling for multiple projects #

To enable auto-exporting for multiple projects, simply add similar .dir-locals.el files to the root directories of those projects. Just ensure that the relative Org file directories, like the “content-org”/ in above example, are set correctly.

Enable only for an Org file #

Add below to the very-end of your Org file and save the file:

* Footnotes
* COMMENT Local Variables                          :ARCHIVE:
# Local Variables:
# eval: (org-hugo-auto-export-mode)
# End:

About Footnotes: Here I recommend adding the * Footnotes header¹ too so that in case you add any Org footnotes, they go directly to that section you created. Otherwise, Org will auto-create a new Footnotes heading at the end of the file.. and the Local Variables heading would then no longer be at the end of the file.

Enable for the whole project except for few Org files #

1. Enable the auto-exporting for the whole project as explained above.
2. Then add below to the end of the Org file where you need to disable the auto-exporting:

   ​* Footnotes
   ​* COMMENT Local Variables                          :ARCHIVE:
   # Local Variables:
   # eval: (org-hugo-auto-export-mode -1)
   # End:
   

   Note that this time, org-hugo-auto-export-mode is disabled to override its enabled state in .dir-locals.el.

Steps that might need to be taken every time #

Once the initial setup is done, the following steps apply to both blogging flows.

Step 2: Start the engines (Hugo Server) #

We start the hugo server so that we can see the live-preview each time the Org file is saved².

Run below in your Hugo site root (the directory that contains the site config.toml) to start the server:

hugo server -D --navigateToChanged

Step 3: Open your browser #

By default the site is served locally on port 1313 on localhost. So the above step would have printed something like below at the end:

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

So open your favorite browser pointing to that address.

FINAL step that needs to be taken every time #

Step 4: Save and be in awe #

If you are like me, you might not need to repeat steps 3 and 4 above, as you can leave the hugo server running in a separate terminal, and have a browser tab pinned to that localhost.

So with that, have the Emacs and browser frames set up side-by-side, and edit your Org post.

Hit C-x C-s and be in awe as the browser auto-refreshes to the exact post you modified!