How To build this blog

How To build this blog

At MOIJ (where I work), our goal is to create more content, and using Notion, where we already spent a lot of time each day, makes it a lot easier to achieve this goal with the release of their official API.

To test out our theory that Notion would be a great tool for running a blog, we decided to build this blog, which will also be my personal blog!

Creating the database

The first step we took was creating a database where we could store the blog posts.

One of the features we wanted to include was creating drafts without the post getting pushed to production immediately. This turned out to be pretty easy since the notion API allows you to filter your posts based on a database property when querying the database.

Next, we needed a way to be still able to show a featured image for the blog post. As of now, the official Notion API doesn't yet support image block types, so you are stuck running your own solution for this. We decided to add an extra column to the database, where we could put an image URL. Currently, the images come from Unsplash, but you could also upload your pictures to another server and use that image URL (which is definitely on our list!)

Creating the database was easy, but what if I told you the building part is also a joy with the official @notionhq/client package`? The library makes it easy to fetch the database and the pages, and if you want to go a step further, you can also use that package to create pages inside your database.

Whether you choose to use NextJS (which I can highly recommend and use for this blog), the possibilities are pretty much endless.

To infinity and beyond

This is merely a proof of concept. Once Notion adds support for the other block types, blogging via Notion will be the way to go (at least for us). We'll make sure to update this blog when the new block types become available.

Want to see the database with your own eyes or use it as a template? Check it out via the following URL;

https://www.notion.so/twankrui/d8dbc48b530d44fc9b763737cb63fee0?v=617ccbb6eba54e35842809b373615a87