Since I started using Obsidian as my knowledge management and writing tool, it is a pain for me to manage my posts for my blog. I used to write it in the Obsidian and copied it over to the repo of my blog. If I make changes, I need to update it twice which is very tedious and error-prone. So I started to find a solution allowing me to write and store my posts at one place and continue to use Hugo to build my blog.

What I want

1. Edit and Store my posts in Obsidian
2. Build my blog using Hugo
3. Host it on Github pages

How to achieve

1. We need to move the content folder to the obsidian vault like your/vault/Blog, and mount the content folder to it as below:

   module:
     mounts:
       - source: "`/your/vault/Blog`"
         target: "content"
   

2. Clear the base url in the hugo.yaml

   baseURL: ""
   

3. Remove the build step and the installation of dependencies from the Github workflow

   # Sample workflow for building and deploying a Hugo site to GitHub Pages
   name: Deploy Hugo site to Pages
   
   on:
     # Runs on pushes targeting the default branch
     push:
       branches:
         - main
   
     # Allows you to run this workflow manually from the Actions tab
     workflow_dispatch:
   
   # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
   permissions:
     contents: read
     pages: write
     id-token: write
   
   # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
   # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
   concurrency:
     group: "pages"
     cancel-in-progress: false
   
   # Default to bash
   defaults:
     run:
       shell: bash
   
   jobs:
     # Build job
     build:
       runs-on: ubuntu-latest
       env:
         HUGO_VERSION: 0.142.0
       steps:
         - name: Checkout
           uses: actions/checkout@v4
           with:
             submodules: recursive
             fetch-depth: 0
         - name: Setup Pages
           id: pages
           uses: actions/configure-pages@v5
         - name: Upload artifact
           uses: actions/upload-pages-artifact@v3
           with:
             path: ./public
   
     # Deployment job
     deploy:
       environment:
         name: github-pages
         url: ${{ steps.deployment.outputs.page_url }}
       runs-on: ubuntu-latest
       needs: build
       steps:
         - name: Deploy to GitHub Pages
           id: deployment
           uses: actions/deploy-pages@v4
   

4. Add a pre-commit hook to facilitate the update of whole website (which runs before you make any commits and it will generate public folder for us)

   #!/bin/bash
   
   echo "Running Hugo build..."
   hugo
   
   if [ $? -eq 0 ]; then
       echo "Hugo build successful, adding public directory..."
       git add public/
   
       # Check if there are changes to commit in these directories
       if git diff --cached --quiet public/; then
           echo "No changes in public/"
       else
           echo "Changes in public/ have been staged"
       fi
   
       exit 0
   else
       echo "Hugo build failed! Aborting commit."
       exit 1
   fi
   

5. Add a template using the plugin Templator in obsidian when creating new posts

   ---
   date: <% tp.file.creation_date("YYYY-MM-DDTHH:mm:ss+03:00") %>
   draft: "true"
   title: <% tp.file.title %>
   categories:
   ---
   

6. Using Imgur plugin in Obsidian to upload images to Imgur otherwise the local link will break when deployed to github pages. And you could disable auto upload in case your personal data is uploaded accidentally.

7. (Optional) Change minifyOutput to false if you are using paperMod for Hugo as there is a potential bug when running hugo command with minify

   minify:
     disableXML: true
     minifyOutput: false
   

What doesn’t work

Obsidian automatically utilizes the same tags as Hugo, and I couldn’t find a way to exclude a specific folder from the tag view. Since I don’t want to reveal my Obsidian tags on the blog—as they are unrelated—I decided to remove all tags from my posts and eliminate the tag page from my blog site.

My workflow

While writing this post, I created a new post using the template I mentioned earlier. Once it was ready, I simply changed the draft variable to false. After that, I went to the repo where my blog lives, made a commit, and that was it—everything was set up and complete.