When I post on my blog, I write the content in markdown and Gatsby.js do some magic and converts everything to HTML. I had some cooking recipes on my Notion workspace and I recently wanted to publish them online.
Since I wanted to keep Notion as my source of truth, I had to find a way to publish them differently.
By the way, I titled this post mentioning Gatsby.js. But, if you use a different static site generator (like Astro or Next.js).
Big picture
I have one JS script that does different things in 2 steps:
- Get all database pages (with the filter βreadyβ). And convert them to a markdown (or MDX) file.
- Gatsby makes HTML content out of the markdown.
Step #1: From Notion to Markdown
I wrote a NodeJS script that uses 2 libraries:
@notionhq/client
to query the pages of my database.notion-to-md
to convert the pages to markdown.
Heads-up!
- To run the script, run
node scripts/notion-to-markdown.js
on your terminal. - I had to handle the
numbered_list_item
manually (see theolCounter
variable). Thenotion-to-md
library currently has an issue with the ordered lists.
After running the script, my folder looks like the following:
Step #2 - Gatsby.js
Dealing with Markdown is a thing that Gatsby does well. If youβre unfamiliar with it, I recommend you look at their Getting Started guides.
After some CSS fine-tuning, I ended up with something like that π₯³
If you want to check it out, the project is available here. By the way, my websiteβs GitHub repository is public!
What could be improved?
Deployment
If I change a typo in Notion, to see the fix live on my website, I need to run the command and then git commit&push the change.
Limited block support
At the moment I only support basic notion items. Things such as linking pages together, videos or uploaded files are not supported.
Also, I didnβt find a way to write MDX (Markdown+JSX)
Import everything or nothing
My notion-to-markdown.js
script gathers all the posts and all the images at once. Itβs ok for now
because I donβt have thousands of items in Notion. Otherwise, Iβd probably have to add a new filter
in the notion.databases.query()
function!
About the author
Hey, I'm Maxence Poutord, a passionate software engineer. In my day-to-day job, I'm working as a senior front-end engineer at Orderfox. When I'm not working, you can find me travelling the world or cooking.
Follow @_maxpou