My Obsidian + Hugo Blogging Setup: A Smooth Blogging Workflow

In this post, I go through how I have set up my Obsidian and Hugo blogging workflow. I use a single vault and auto-publish my articles with hotkeys.

\ If you clicked on this article, you probably know what Obsidian and Hugo are, but if you don’t, here’s a quick explanation:

Obsidian

Obsidian is a feature-packed markdown editor. But it’s not just a markdown editor. It’s a way to manage knowledge. It’s great for organizing your thoughts in a flexible, non-linear way.

\ Obsidian works on all platforms. So, you can write articles from basically any platform.

\ I have been taking all of my notes in it for a couple of months now, and it’s amazing!

Hugo

Hugo is an ultra-fast static website generator made in Golang. I have been using Hugo for my blog for almost 2 years now. I recently switched the theme of my blog. Read more about the change New Look, new start.

Using Obsidian with Hugo

In this guide, I’ll show you how to get Obsidian and Hugo working together. I won’t cover the initial setup of either tool, but I’ll explain how to integrate them for a smooth blogging workflow.

\ If you need help setting up Hugo, check out my guide: How I Setup This Blog for Free (Domain, Hosting, SSL) Complete Guide. And if you’re new to Obsidian, check out this Getting Started Guide.

Goals for Using Hugo With Obsidian

My goals for the setup are:

1. Using a single obsidian vault.
2. Have an easy-to-use obsidian template that I can use for my blog posts.
3. Keep my personal vault folders private.
4. Auto-publish using obsidian hotkeys.
5. Have all markdown files in a public GitHub repository, so that people can propose changes

Existing Setup

Here’s how my current workflow with Obsidian and Hugo looks:

1. I write and edit articles directly in Obsidian, within the content folder of my Hugo project.

   \

2. I run the Hugo command to generate the static site.

   \

3. I push the changes to GitHub.

   \

4. Render.com automatically picks up the changes and deploys the updated site.

Journey

If you want to skip the journey part, you can go straight to The Sauce.

\ I will be going through a couple of mistakes that I made while setting this up.

Mistake #1

The first idea that I had was to create a simple symlink (I use Linux btw) that would link the two folders together.

\ Basically, I have two folders:

blog/ vault/

The blog folder contains all the blog folders, and the vault is my personal vault.

\ The symlink would link these folders.

blog/content vault/Blog

However, the problem with a symlink is that the folder content is not visible in my git repo. This means that people can not propose changes to any of my articles.

Mistake #2

I wanted to have my folders synced. I tried writing a couple of bash scripts that automatically synced the two folders using a cronjob. However, having that constantly running in the background is a waste of resources when I am not writing. Simply running the scripts via CLI is just not that smooth.

The Sauce

Basically, the way that I have set this up is I have two folders:

blog vault

The blog folder contains all the necessary Hugo files and also has a sub-directory called content that houses all of the markdown blog files.

\ I created a new folder inside my vault called Blog.

blog/content vault/Blog

After that, I copied all of my files from the content directory to the Blog.

\ I then started writing this very article.

Obsidian Templates

I needed some way to set up a simple obsidian template to contain all of the required hugo front matter.

\ That is quite easy.

\ Read about how to set templates Templates - obsidian.md

\ I created a file called Blog Post in my templates folder.

\ My Blog Post template contains the following:

--- title: "{{Title}}" description: date: "{{date:YYYY-MM-DD}}T{{time:HH:mm:ss}}+00:00" draft: true --- **If you enjoyed this article consider [supporting me](https://4rkal.com/donate)**

I have all the required front matter including a title, description, and a date in the format that Hugo asks.

\ I also added a small donation text that I include at the bottom of every article.

\ This means that I can automatically insert this template into any file and start writing!

Folder Syncing

Now, I want all of my files in my vault/Blog directory to be copied over to the blog/content. Essentially connecting Hugo and Obsidian.

Thanks to a helpful Discord user, I found the obsidian-shellcommands plugin.

\ NOTE: This plugin does not currently work very well with the flatpak version of Obsidian (since flatpak isolates the environment). Using another alternative (.deb or appimage) seems to work.

\ It allows you to run shell commands in the background with a hotkey.

\ The steps to set this up are the following:

1. Install the plugin
2. Enable the plugin
3. Go to the plugin options
4. Click on New shell command
5. Now, you will need to enter a shell command to copy the files from one folder to the other.

\ On Linux/MacOS, that is:

cp -a ~/folder1/. ~/folder2/

\ In my case, that is cp -a ~/Documents/vault/Blog/. ~/Documents/blog/content/

\ On Windows, it most probably is:

robocopy "%USERPROFILE%\folder1" "%USERPROFILE%\folder2" /E /COPYALL

\ After that, we need to set a hotkey that will run the command.

\ Click on the (+) icon to go to the hotkey settings and assign a hotkey.

\ My hotkey is CTR + 0, simply because that was available.

\ Now, every time that I run the hotkey it copies all of my files to the Hugo folder ready to be published.

Auto-Publishing Scripts

I also want to be able to automatically publish my articles. But I want it to happen when hitting a hotkey.

\ I wrote a small script that does exactly that:

#!/bin/bash cd ~/Documents/blog hugo git add . git commit -m "new" git push -u origin main

This script will build my website, commit it, and push it to my GitHub repo, where it is picked up and published. Read How I set up this blog for free (domain, hosting, ssl) Complete Guide to learn how to set up your own blog for free.

\ Don’t forget to make the script executable by running.

chmod +x ./YOURSCRIPT.sh

\ Then create a new shell command for the shellcommand plugin (as we did before) and enter the path to your script.

\ In my case, that is:

~/Documents/blog/push.sh

\ Then enter a hotkey, and you’re done!

Conclusion

I can now simply open my obsidian vault, create a new file, insert my template, and have all the info automatically entered.

I then write my article inside of obsidian.

\ Run my hotkey and copy all the files into the Hugo directory.

\ Hit another key, and my blog is published!

\ If you enjoyed this article consider supporting me.

Subscribe:

Subscribe to my free newsletter: https://newsletter.4rkal.com/subscription/form