Building a Blog with Remix and Notion

How I built my personal site and blog using Remix and Notion.

30 January 2022

Blog cover

In early 2021, I set out to rebuild my personal website - a process many developers go through consistently on this hedonic-treadmill-like cycle. My goal this time around, though, was not to have a perfect website, but rather just to provide myself a platform to write and share my slice of knowledge with the world.

Initially, I began scaffolding the site on NextJS. I loved the simplicity and capabilities of all that it had to offer, and it really was a great developer experience. Fast forward a couple of busy months, and my “new” site lay dormant, untouched. Then, Remix came out. I had seen little in the way of frontend frameworks and tooling that had gotten me that excited about working with it in quite some time. I can’t recall what it was that initially drew me to it, but the entire philosophy that the Remix team aspired to, resonated with me.

With a new tool in the belt, and a fresh enthusiasm for building on the frontend, I fired it all up again. Migrating from Next was super simple as the philosophies are not entirely dissimilar. The gist of the migration was moving code from getServerSideProps or getStaticProps to equivalent loader functions in Remix.

My blog is entirely powered by Notion. The authoring experience is second to none, and I use it for just about everything else, so it was a really convenient decision to use it as my CMS of choice. This was made possible thanks to the Notion API.

It did, however, introduce a nuanced challenge, and one that was not necessary to fix now while my site gets little to no traffic, but was a good exercise in future-proofing my site. This was that the speed of my blog would ultimately be determined by the response time of the Notion API. What would be the sense in building on this edge-powered platform, if the loading times are not improved due to outside factors? With this in mind, I came across a Remix example using Upstash - a serverless Redis (and Kafka) service. With Upstash, I am able to cache the archive of blog posts, and the individual posts themselves, in a Redis store with a given expiry time. Fantastic, we have speed.

Enter the second challenge. How do I invalidate this cache? When writing new posts, or editing old ones, I want these changes to appear on my site as they happen. I have yet to solve this problem elegantly, but it is on its way. For the moment, I have setup resource routes to which I can make POST requests, that will bust the cache of the relevant data source. This would be a great use case for webhooks, but alas Notion does not provide these (yet).

All in all, my website is extremely simple so far so I am not really leveraging all of the power Remix offers, but it has been a blast. It feels like the right way to build, and I have learned a lot about the Browser APIs. Hats off to the team.

Other honourable mentions would be Tailwind CSS and GSAP. I love Tailwind, and cannot see myself not using it for the foreseeable future. And GSAP, while heavy, is a go to for me for scroll based animations thanks to their ScrollTrigger plugin.

Thanks for reading, and I’ll see you in the next one! 👋