Astro Suite for Obsidian
Contents
Background
I’ve been using Astro in combination with Obsidian for over a year now. It’s been my primary method for publishing blog posts. I’ve grown to appreciate Astro’s content-centric yet flexible nature and have especially loved using Obsidian, to the point where I use it as my daily notetaking app also now.
A Perfect Match
Since Astro is markdown-based, it’s a natural fit for Obsidian. I’m hardly the first person to use the two together, but I still think it’s a wildly underrated combo. There are lots of great Astro themes that complement Obsidian, too.
Astro Composer Plugin for Obsidian
Astro Composer helps automate the creation of Astro blog posts as Obsidian notes. You can define a default location for new notes (like a posts folder within the src/content folder), automatically create a kebab-case file or folder name based on your a post title you write, define a set of properties that are automatically set and detected as Astro frontmatter, and even convert internal links like Markdown-based links to your other posts or Wikilinks to standard links.
This plugin will accelerate your blog writing process and simplify the whole experience. For months I was using a combination of Shell Commands and Templater plugins to get the outcome I wanted, but it still didn’t quite do what I wanted.
Some Astro-dedicated plugins exist already including Markdown Blogger and Static Site MD Exporter, but both push files to another directory instead of just using your project files directly, which I prefer.
Astro Suite Obsidian Vault
To accompany this plugin, I wanted to give Astro bloggers a vault they could just plop into their projects and start using it right away. It uses Obsidian bases as a common directory, resembling lots of blogging CMS dashboards.
That base file becomes the Homepage and Default New Tab Page as well with the titular plugins enabled. Depending on the Astro theme you use, you’ll want to customize the base properties view to fit the frontmatter of your posts.
It almost resembles a CMS, doesn’t it?
CTRL + S now automatically standardizes the frontmatter of the active note and converts the internal links to work with Astro via your Astro Composer settings thanks to the Custom save plugin.
I’ve also bundled in Image Inserter and Paste image rename as well, which is very useful for finding images quickly and setting solid slug-friendly filenames to attachments right away (even images you paste from your clipboard).
Title-Only Tab pulls the note’s Title from the title property and uses that as the tab’s name so you can use that instead of the file name (which is usually the post slug).
Enable the Git plugin and publish directly to your site with CTRL + SHIFT + S without even leaving Obsidian.
Astro Suite Obsidian Vault (Minimal)
Another version of the vault and plugin combination, except with the addition of the Minimal theme, Minimal Theme Settings, Style Settings, Hider, ProZen, custom CSS snippets, and custom keyboard shortcuts set. This is a far more “opinionated” vault, centered on focus and a distraction-free experience.
Similar, but more stripped down as you can see.
Common Technical Barriers and Limitations
There are some built-in barriers however. Here are some of them:
- Astro will try to process Obsidian files depending on where you insert it into your project
- Frontmatter of Astro templates doesn’t always match Obsidian’s native properties (like tags or parsing dates)
- Some Obsidian features like callouts aren’t standard markdown and won’t natively be rendered by many Astro themes
Despite these common issues, with just a few tweaks any Astro template can be modified to fit all of these requirements (in fact, I did this myself with the Fuwari Astro theme).
Roadmap
Here’s what I want to do next:
- Get Astro Composer published in the Obsidian community plugins directory (currently awaiting manual review)
- Create a MDX plugin that works with bases (or ask a current MDX plugin maintainer to add support for bases API when it releases)
- Optimizations for a better experience on mobile
Example Custom Vault
I use a version of this for this website, here’s the homepage view:
I’ve defined some properties that set the image for each cover (when one exists). I’ve also added those same images to the note view itself with the Simple Banner plugin and added property icons with Iconic:
Download Links
Hope you use this suite and elevate your Astro + Obsidian workflows to new heights.
Happy writing!