Notion app logo
Struggling to stay organized and effective? Learn to master your time and tasks with the Effectively Notion course!

How I Publish Obsidian Files to the Web

All of the ways I've published my Obsidian notes to the web in the past (and how I do it now).

2022-10-20

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.

Related

Photo of Chase Adams

Hey, I'm Chase. I help aspiring entrepreneurs and makers turn their ideas into digital products and apps.

Freebies

Vector Arrow Scribbles
banner image for figma vector arrows scribbles

A figma community project of vectorized hand-drawn arrows.

Go To Figma
Vector Line Scribbles
banner for figma vector line scribbles

A figma community project of vectorized hand-drawn lines.

Go To Figma
Vector Shape Scribbles
banner image of figma vector shapes scribbles

A figma community project of vectorized hand-drawn shapes.

Go To Figma

Subscribe to my Newsletter

Every other week I publish the Curiously Crafted newsletter.

In it, I explore the intersection of curiosity and craft: the people who make stuff, what they make and the way they pursue the craft of making.

Online

I'm on almost all social media as @curiouslychase.

The curious logo of Chase Adams: glasses and a bow tie.stay curious.