My Notebook
#releases#fun#programming#project
1

notebook v3.5??? notion as a CMS

2025-01-22 · 7 min readhow I set up notion as a CMS and more streamlined blogs + notes

As you might be able to see, one of my new years resolutions is to write a lot more! This includes blog posts/notes/research papers, and just generally putting more of what I create out on the internet. Even in person, I’ve switched to more analog notes, with a pocket notebook + a remarkable to draw/take notes in class.

The problem was that I couldn’t showcase this analog work in my blog :( The only way for that to happen would be for me to draw ⇒ upload it to my computer ⇒ upload it to a website ⇒ embed it via markdown etc. With notion this goes away!! I can add a personal touch/screenshots/my design a lot easier, and have it be super streamlined!

Notion image

The conundrum was that all of this was scattered across. My (capital N) Notebook website was written ages ago to use Prismic as a CMS (it was much nicer than airtable at the time!) and I basically didn’t take notes/write things down. Nowadays my notes/research diaries tend to live in notion (liked the interface so much, I worked there for a while), and I would love for my blog to too!

Hence this release!! Notebook v3.0 is hosted fully on notion, the design is still a bit ratchet (I like the homely feel + sound design), but the workflow to post is so much smoother! I wrote my own block parser for Notion’s public API, translate it to HTML, and display it on my site! The hardest problems were:

  • Recursively pulling blocks
  • Linking ID’s to slugs (I actually had this from prismic!)
  • Actually rendering the blocks (the system is so wack)

BUT after hacking on it/pulling and migrating all the blogs over, its finally up!

Over here we have tags, date created, and my general options for each post. An interesting thing was that I exported everything as raw markdown for my old posts ⇒ and load them using the old marker!

That way I don’t drop any awesome past blogs, and can make use of all of notion’s non-markdown traits (like mentions notebook.neelr.dev )

Notion image

a quick 6 year history of my blog (2019-2025)

Its crazy to think this has existed for more than a quarter of my life right now, and honestly I think that it represents a really important aspect of myself. When I made this blog, it was one of the first projects I made for other people to see.

Before I hadn’t actually written/programmed much apart from tiny games I used, or maybe a website for my class. This was the first site where I could actually show other people my thoughts!

Notion image

The first iteration was pretty messy honestly. Large box shadows + border radius, but you can see the outlines of it right now. I chose back then to include images—which is something I still do to this day.

My first posts were a reflection on flagship—a hackclub event which honestly kickstarted my life as it is. You can take a look at my first post ever here notebook.neelr.dev

Notion image

Second iteration was a little bit better, I honestly like the single scroll a little better than the grid I have going on right now. Here I launched my Airtable CMS!

I used to go into my Airtable app on my phone, update the markdown, and love how it showed up on my website! The website was of course slightly slow because of the constant requests to airtable.

Notion image

3.0! This one is great, main improvements were:

  • awesome sounds
  • Prismic CMS so I could make larger/better posts
  • static optimization! this way I could get the benefits of dynamic CMS’s while having blazing fast speeds
    • Routes were statically generated + the actual blogs themselves

This was how the equilibrium was for a while…

Notion image

Now we have this!! Main improvement is Notion, I’m able to finally do it because the notion public API is now much much more mature! I’ve always wanted this, so I’m happy that its finally able to happen (so excited to launch this with one click from my notion).


Updates are also a whole lot nicer, I don’t have to republish everything! Just changed this a bit ~10min after publishing, and it automatically shows up

Thanks for reading! Liked the story? Click the heart
Created with ☕ by @neelr