Notion Blog Starter
August 23, 2022
Updated on October 13, 2022
Deploy your Notion blog powered by Nextjs and Tailwind
How to build a blog using nextjs-notion-blog-starter
article cover
Getting started

Whenever I write a new blog, like this one, I use notion for drafting. Wouldn’t it be cool just to be able to switch the tag in notion to published and have it live on your blog?

This will be a tutorial on how you can create your own blog powered by Notion, Nextjs, and Tailwind.

Notion setup

The first step would be to create an API key. You can follow the Notions Getting Started Guide where we will be able to generate a new API key, which we will need for the env file as NOTION_SECRET

A visual depiction of what is being written about

For posting new blog articles, I already made a template, so we can simply duplicate it and start writing articles. (Don’t forget to connect your notion page to your integration!)

Template: https://www.notion.so/phung/c5d4aa9aa08745ccb45afd24537fcf28

A visual depiction of what is being written about

Once we cloned the blog template, we need DATABASE_ID which can be taken from the URL. It is the id after xxx.notion.site/

A visual depiction of what is being written about
Forking the codebase

Click here to fork the code base and pull the repository

shell
npm install && npm run

The first time you run the blog, you will get an error of missing API key, that’s because we haven't updated the .env file.

A visual depiction of what is being written about

The last thing we need to do to make the blog work is to rename .env.example to env and update the variables

shell
# Notion secret integration
NOTION_SECRET=
# Database id from cloned template
BLOG_DATABASE_ID=
# Convertkit subscription (Optional)
NEXT_PUBLIC_CONVERTKIT_FORM_ID=
NEXT_PUBLIC_CONVERTKIT_API_KEY=
# Umami analytics (Optional)
UMAMI_ID=

If we did everything right, we should be able to see the working blog 🎉

A visual depiction of what is being written about

Subscribe to the newsletter
Get emails from me about web development, tech, and early access to new articles.
Be the first to know when the blog is published
;