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.

https://twitter.com/mathieuhasum/status/1533079056836710402

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.

Context

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:

  • “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.

Image Optimization

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.

Thankfully, this library Next Export Optimize Images from @d_suke_09 can solve these issues.

One-click Deployment

Using GitHub actions:

← All Articles