Building a Blazing-fast Static Blog from Notion
In June, this blog was rewritten using Next.js powered with @NotionHQ as a CMS.
This is a high-level presentation of the project for anyone wishing to accomplish something similar.
For a more “practical” guide, I also recommend Jake’s blog post (https://jake.tl/projects/notion-api) who did something really similar — and more advanced — for his own blog, on top of actually shipping a full NPM library for interacting with Notion’s API.
This idea of generating a website directly from Notion is not new. There have been many “Notion website generators” in the past, with different approaches over the years:
- The built-in “public” Notion pages (e.g. the Queue.so help center)
- “1st-gen” third-party website generators, getting your website info via Notion public pages and moving them into your own custom domains (e.g. https://potion.so/)
- “2nd-gen” third-party website generators connection to Notion via API (e.g. https://feather.so/)
Notion initially had a built-in feature to make pages available publicly that many used to deploy some content online in seconds (for example, check out the Queue.so help center is completely hosted on a Notion page.)
The main limitation was that Notion does not support custom domains. So your website would live on a notion.so subdomain.
More advanced third-party solutions decided to add this missing feature by generating and hosting websites on a custom domain after scrapping the information from your Notion public page.
More recently, the idea of managing website content without leaving Notion jumped to the next level after Notion introduced its API. This is allowing developers to seamlessly connect to Notion databases without having to require some data scrapping hacks.
If you are looking for a built-in solution, you have many options, but they are paid.
So if you have the developer mindset, it is all very straightforward to implement a tailored solution that suits your unique need, and host if yourself.
Notion as CMS
Notion is great for writing notes and documentation and therefore is great as a CMS. Having everything in Notion makes it easier to just jump into writing.
The Speed of Static
Connect to the Notion API to retrieve the information about each blog post.
The most ticky part would be dealing with images:
- ❌ “Asset links” from the Notion API expire after 1 hour, so you can not rely on these urls to host the images of your website.
- ❌ “Next/Image” optimizations (e.g reducing the size, avoiding layout shifting…) are incompatible with static exports.
Using GitHub actions:← All Articles