How to integrate Obsidian vault with SPA
After my initial blog post, I found myself considering what my next steps should be in terms of content. I have a plethora of topics I am interested in exploring and writing about, and I thought it would be beneficial to create a separate post that delves into this topic in more detail.
After some contemplation, the decision to integrate Obsidian with my Astro project seemed like the logical choice.
Obsidian is a powerful writing tool that specializes in working with Markdown files, and it offers a wide range of features such as language and grammar checking, tables, calendars, and more. Additionally, it allows users to preview the final product while writing in Markdown.
I already had an Obsidian vault set up and connected to GitHub, where I keep all of my personal and work-related notes. This allows me to synchronize my notes across multiple devices without having to pay a monthly subscription for Obsidian sync.
How could I integrate this great tool into my Astro blog so that I could utilize on it while writing new blog posts? You can find the answer below.
My initial idea was to have a separate GitHub repository with all of my Obsidian files/notes, and then use something like GitHub Actions in that repository to push certain files over to the Astro/blog repository. And by using the Markdown frontmatter, I could tell the GitHub Actions workflow that a certain file was ready to be published to the Astro repository. For instance, by having an attribute called draft and scan through all the files in the Obsidian repository and copy the ones that didn’t have draft: true.
There would of course be some things to consider:
I’m pretty sure I could’ve figured all of these things out (especially with all the great community packages/actions on the marketplace), but it would definitely have taken some time to add all that logic in the GitHub Actions workflow.
Would all of that work really be worth the time? I’m pretty sure you can guess the answer to that question.
The second option I thought about was splitting the posts’ folder (in the Astro project) into a separate repository and then referencing it as a Git submodule instead. This way, I could use it as a separate Obsidian vault and whenever I do some changes there it would only affect the separate repository/submodule.
This sounds good and all to begin with, but there is an issue – whenever I push a change to the submodule, it won’t automatically update the “parent” repository, which in this case would be the Astro project.
This means I would have to go into the Astro/blog repository and update it manually after the submodule was updated. Not really great, I would say. Of course, I could maybe add some kind of automation around this using for instance GitHub Actions, so that it automatically pulls the submodule repository in the Astro repository on every push to the main branch.
So what did I end up doing?
Ultimately, I decided to go with the simplest solution. I added an Obsidian vault within the Astro project/repository and referenced the posts’ folder as an Obsidian vault. This way, if I add a new post and push it through the Obsidian vault, it will automatically be updated in the Astro repository. This solution may not be as complex or feature-rich as the other options, but it allows me to focus on writing and producing content without having to spend a lot of time on implementation and maintenance.
This was actually the easiest option, without any complex setup or anything. In addition, I also added another new feature – the draft flag that I mentioned above. This makes it possible for me to create drafts without actually publishing/displaying them on the blog, which is a built-in feature of Astro.
Lesson learned: Sometimes (often, I would say) the easiest option is also the best one.