skip to content
walterra.dev

One missing piece of my recent revitalized blogging effort is managing source material and drafts. For a while now I just shared stuff into Apple Notes, but it gets kind of lost there and I never look at it again. In a recent chat with my sparring partner (let’s call him Claude) they suggested a tool called Obsidian.md. Now this was a nice surprise: It’s a markdown based knowledge management system that syncs across devices. And it uses frontmatter to manage markdown metadata. Wait a minute, this very blog uses static site generator AstroJS which uses … markdown files with frontmatter! Obsidian uses “vaults” as a collection of markdown files, which in the end is just a folder on your laptop - which could just be the very folder with blog articles in the AstroJS project!

The first nice emergence effect of using the two tools together: Obsidian picked up the tags metadata I’ve been maintaining in AstroJS for each blog post. Obsidian is great for managing and even visualizing these tags, so I’ve been able to clean them up a bit (alternative spellings, synonyms etc. - reminder: but then don’t forget to maintain your .htaccess to add redirects!). This is how the knowledge map of blog/tag relations currently looks:

Screenshot of an Obsidian graph visualization showing the knowledge network from the walterra.dev blog. The graph displays interconnected nodes representing blog posts (gray dots) and tags/categories (green dots). Posts are labeled with their publication dates and abbreviated titles (like 'elastic-stack' entries across various years), while tags are prefixed with hashtags (such as #y2023, #open-source, #javascript). The visualization reveals clusters around topics like Elasticsearch, COVID-19, web development, and yearly archives (#y2014 through #y2024), demonstrating the thematic organization and chronological evolution of content on the blog. Lines between nodes represent connections between posts and their associated tags or related content.

Another nice thing I’ve noticed: Obsidian auto-saves while you type. And since AstroJS via pnpm dev has hot reloading, you get an updated preview of your blog post while you type! Here’s a GIF showing that (so meta!):

Screen recording showing a split-view workflow between Obsidian (left) and Astro.js (right). On the left, the author is editing a markdown file titled '2025-03-02-obsidian-astro-workflow' in Obsidian, which contains text about using frontmatter to manage markdown metadata and explaining how Obsidian integrates with Astro.js. The text includes an image tag with an alt description for a graph visualization. On the right is a live preview from the Astro.js development server displaying the same content as a rendered web page, complete with the graph visualization. As the author types in Obsidian, the Astro.js preview updates in near-real-time, demonstrating the seamless workflow between content creation in Obsidian and web publishing with Astro.js. The author notes this workflow improvement and discusses options for bringing mobile notes into Obsidian using iOS shortcuts.

This is already a nice workflow improvement! Now how do I get stuff I come across or notes I take on mobile into Obsidian? Obsidian has iOS/Android apps, but there’s been some debate about it’s lack of nice sharing integration. The missing piece I use for now is an iOS shortcut that auto-append links, notes and other things to a markdown file in the Obsidian vault that gets auto-generated for each day (like 2025-03-02.md). With sync enabled for the Obsidian vault, these notes end up on my laptop in the draft folder of the AstroJS project for this blog. Here’s all the building blocks:

A flowchart showing the workflow for an Obsidian and Astro.js publishing system. The diagram flows top to bottom with four main sections on light gray backgrounds. Section 1 'Content Creation' shows Notes/Ideas and Links flowing into a Custom iOS Shortcut, which connects to Obsidian (iOS). Section 2 'Sync & Organization' displays Obsidian across multiple devices (Mac, Other) all connecting to an Obsidian Vault. Section 3 'Development' shows the Astro.js Project connecting to a Git Repository. Section 4 'Deployment' illustrates the Private GitHub Repository triggering GitHub Actions, which deploys to the Static Host (walterra.dev). Key connections between sections show Obsidian (iOS) syncing with the Vault, the Vault feeding into the Astro.js Project, and the Git Repository pushing to GitHub.

This looks like a lot of building blocks, but the workflow ends up being a quite ubiquitous, at least for my current device setup and working habits. The aim is to keep the building blocks simple, even if they are a lot. Since the blog is just powered by markdown (as opposed to a full blown database), building blocks can be replaced (somewhat) easily. For example, last year I was able to migrate from ElderJS to AstroJS in just a few hours.

I’m of course not the first one to come up with this idea of using Obsidian for blogging:

I’m just starting with this and I might miss some caveats, but so far it worked well, actually, writing this blog post made use of the new workflow. I researched some stuff on mobile, got some links into my daily draft *.md files, and then wrote this blog post in Obsidian, yay, so meta!