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 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. Hugo 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. How I Setup This Blog for Free (Domain, Hosting, SSL) Complete Guide Getting Started Guide Goals for Using Hugo With Obsidian My goals for the setup are: Using a single obsidian vault.
Have an easy-to-use obsidian template that I can use for my blog posts.
Keep my personal vault folders private.
Auto-publish using obsidian hotkeys.
Have all markdown files in a public GitHub repository, so that people can propose changes Using a single obsidian vault. obsidian vault Have an easy-to-use obsidian template that I can use for my blog posts. obsidian template Keep my personal vault folders private. Auto-publish using obsidian hotkeys. Have all markdown files in a public GitHub repository, so that people can propose changes public GitHub repository Existing Setup Here’s how my current workflow with Obsidian and Hugo looks: I write and edit articles directly in Obsidian, within the content folder of my Hugo project.


I run the Hugo command to generate the static site.


I push the changes to GitHub.


Render.com automatically picks up the changes and deploys the updated site. I write and edit articles directly in Obsidian, within the content folder of my Hugo project. I write and edit articles directly in Obsidian, within the content folder of my Hugo project. content I run the Hugo command to generate the static site. I run the Hugo command to generate the static site. I push the changes to GitHub. I push the changes to GitHub. Render.com automatically picks up the changes and deploys the updated site. Render.com automatically picks up the changes and deploys the updated site. Render.com Journey If you want to skip the journey part, you can go straight to The Sauce. If you want to skip the journey part, you can go straight to The Sauce. 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/ 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 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. the problem 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 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 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. 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 Templates - obsidian.md I created a file called Blog Post in my templates folder. Blog Post My Blog Post template contains the following: Blog Post ---
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)** ---
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. obsidian-shellcommands 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. NOTE: It allows you to run shell commands in the background with a hotkey. The steps to set this up are the following: Install the plugin
Enable the plugin
Go to the plugin options
Click on New shell command
Now, you will need to enter a shell command to copy the files from one folder to the other. Install the plugin Install the plugin Enable the plugin Go to the plugin options Click on New shell command New shell command 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/ cp -a ~/folder1/. ~/folder2/ In my case, that is cp -a ~/Documents/vault/Blog/. ~/Documents/blog/content/ cp -a ~/Documents/vault/Blog/. ~/Documents/blog/content/ On Windows, it most probably is: robocopy "%USERPROFILE%\folder1" "%USERPROFILE%\folder2" /E /COPYALL 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. CTR + 0 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 #!/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. How I set up this blog for free (domain, hosting, ssl) Complete Guide Don’t forget to make the script executable by running. chmod +x ./YOURSCRIPT.sh 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 ~/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. If you enjoyed this article consider supporting me. supporting me Subscribe: Subscribe to my free newsletter: https://newsletter.4rkal.com/subscription/form https://newsletter.4rkal.com/subscription/form

This story contains new, firsthand information uncovered by the writer.

How to Build a URL Shortener in Go: A Short Guide

How To Deploy Django to Production

My Obsidian + Hugo Blogging Setup: A Smooth Blogging Workflow

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to Build a URL Shortener in Go: A Short Guide

100 Stories To Learn About Blogging

10 Online Activities To Do During Quarantine

13 reasons why I blog

3 Easy And Powerful Link Building Strategies

16 Best Crypto Blogs to Read in 2022

How to Build a URL Shortener in Go: A Short Guide

100 Stories To Learn About Blogging

10 Online Activities To Do During Quarantine

13 reasons why I blog

3 Easy And Powerful Link Building Strategies

16 Best Crypto Blogs to Read in 2022

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps