• Home >
  • Notes >
  • How I Publish Obsidian Files to the Web

How I Publish Obsidian Files to the Web

I did a few experiments to see what serves my needs best for publishing my Obsidian notes to the web.

Current Solution: A hand rolled script to copy Obsidian notes into my git repository

I use a script to copy any Obsidian notes as raw markdown (based on the status: published) frontmatter property and run all of the notes through a markdown compiler (with a few custom plugins for handling Obsidian's image syntax and callout syntax).

This affords me the ability to easily move files across into my git repository based on a frontmatter property (status: published ), build all of my note URLs at build time (reducing latency).

Why it's working for me:

  • I can easily update a bunch of notes in Obsidian and run my script to copy them into my git repo and push. They're deployed as a part of my existing site.
  • Page loads are significantly faster because the pages are rendered at build time rather than request time
  • Pages are server-side rendered, so they're better optimized for search engines and opengraph sharing
  • I have total control over how the page renders
  • I already have a website that I can add notes to rather than having a second place to point people
  • I can setup my own URL paths so that I use a flat file approach in the URL schema (ie /notes/<NOTE-NAME>) and display the hierarchy in the note sidebar (if a note lives 3 folders deep, it displays as 3 folders deep)

Previous Solutions

Publishing in Dropbox

Details: Publishing my website from Obsidian files with Dropbox

I use Obsidian sync to sync notes between my computer and phone and had my computer's vault live in Dropbox.

Why it didn't work for me:

  • The Dropbox sync turned out to be really buggy between Obsidian and Dropbox.
  • The Dropbox API authorization changed and I had to rewrite my fetch script
  • I didn't find that I needed to publish 'on the go' as much as I thought

Obsidian Publish

Setup Details: Using Fly.io and NGINX for Proxying Obsidian Publish

I tried Obsidian Publish but I found it lacked a lot of what I'd want out of it.

Why It didn't work for me:

  • The pages are rendered on the client rather than being rendered on the server, making them look less good when sharing on social media
  • Modification meant updating a JS and CSS file and re-publishing them. I don't mind this, but I want more control if I have that flexibility
  • I had to setup a reverse proxy to host my own domain. I know how to do that, but I don't want to own another piece of infrastructure.
  • If I moved a file, the old path would 404

Obsidian Publish ++

With this solution, I attempted to fetch the notes from the Obsidian Publish site files. This worked great for real-time publishing, having full control over look and feel and having the ability to server-side render.

Why it didn't work for me:

  • I couldn't justify the price tag of Obsidian Publish for a cached version of markdown files that I had to render on the fly
  • Latency was significant for note files
  • It's not a durable solution. If Obsidian changes the way they serve their files, it could break my notes quickly.

Published on 2022-10-20

Note Explorer