Notion Blog
October 20 2024
workflow
Blog Setup

My blog is a SvelteKit application that serves Markdown files. Updating or publishing a new post requires me to create or edit Markdown files and then push the updates to GitHub. A GitHub Action deploys the new version.

Problem

I like having total control [1] over my blog, which is why I don’t use Medium or Substack or [name alternative]. That said, I don’t like most local Markdown editors, like Obsidian or VSCode. So, I asked myself how I could make creating posts for my blog frictionless, while maintaining control.

Solution

What I came up with is a Zapier automation with Notion, which allows me to edit and publish blog posts (like this one) in Notion, but keeps everything as Markdown in GitHub.

Image

Process
  • I have a Notion database called “Blog Posts”.
  • A Zapier “Zap” watches for changes to documents in the database [2].
  • When there is a change, some Javascript fetches the data from the changed document and sends it in a POST request to my home server.
  • My server turns the data into a Markdown file with my post format.
  • The file is moved into the folder where I store my blog posts.
  • The updates are then pushed to GitHub to get deployed.

Image

Image

Hitch

One of the best parts about using Notion [3] as an editor is that you can drag and drop images into the text, without having to manage any image files yourself. Notion automatically stores them.

That said, Notion doesn’t want to be a free CDN for the rest of the world, so the image links they give you expire after 1 hour.

It even says so in the link itself:

https://prod-files-secure.s3.us-west-2.amazonaws.com/aa197da6-79bd-4774-b394-ec77b6dea6f6/c11a792f-f0be-467a-bf57-34fef0c7a939/image.png?
    X-Amz-Algorithm=AWS4-HMAC-SHA256&
    X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&
    X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20241021%2Fus-west-2%2Fs3%2Faws4_request&
    X-Amz-Date=20241021T145051Z&
    X-Amz-Expires=3600& # <-- 1 hour
    X-Amz-Signature=cc10c19e8361c3d9b15cf7f7b781b7a145a7b4beb29d4675e49409462e0ae5f0&
    X-Amz-SignedHeaders=host&
    x-id=GetObject

To fix this, when my server receives the Markdown content, it downloads any linked images, uploads them to Firebase, and replaces the links with a permalink (permanent link). If the link has previously been seen, it automatically replaces it with the permalink for the asset stored in Firebase.


# [...]/<hash-of-url>.<extension>
https://storage.googleapis.com/dashboard-51ba6.appspot.com/bd6b2d80b446d41ad6a09b75ee67df37.png
Notion → Markdown 👏

I wanted to blog more, but my writing workflow had friction so I wasn’t writing much. Now most of that friction is gone, thanks to this quick and free [4] automation. I was pleasantly surprised to find that Zapier offers tons of control around automation.

Calling out to any other Notion users with a similar problem - Zapier’s great :)


[1] My definition of total control is being able to display whatever I want. I don’t care that much about hosting.

[2] Since I don’t have Zapier premium, Notion is polled every 15 minutes (rather than every 1 minute) for changes.

[3] I would love it if Notion had native support for VIM bindings & better syntax highlighting for code blocks :)

[4] Notion free. Zapier free. Firebase free. GitHub free. Home server…