This post will show you how to set up a blog with Notion and Vercel in 10 minutes. For doing that, we need to use the following repo, notion-blog
. Of course, you can do this without paying 😜
A Next.js site using new SSG support with a Notion backed blog
Notion Blog
This is an example Next.js project that shows Next.js' upcoming SSG (static-site generation) support using Notion's private API for a backend.
Note: This example uses the experimental SSG hooks only available in the Next.js canary branch! The APIs used within this example will change over time. Since it is using a private API and experimental features, use at your own risk as these things could change at any moment.
Live Example hosted on Vercel: https://notion-blog.vercel.app/
Getting Started
To view the steps to setup Notion to work with this example view the post at https://notion-blog.vercel.app/blog/my-first-post or follow the steps below.
Deploy Your Own
Deploy your own Notion blog with Vercel.

or
- Clone this repo
git clone https://github.com/ijjk/notion-blog.git
- Configure project with
vc
- Add your
NOTION_TOKEN
and BLOG_INDEX_ID
as environment variables in your project. See here for how to find these values
- Do final deployment with
vc
Note…
Step 1 Create accounts
Need to create a notion account and a vercel account. Both of them don't need to pay or register your credit card. This step won't take so much time. Also if you don't have a GitHub account, please create it.
If you don't want to use GitHub
, you can use GitLab
or Bitbucket
Notion
Vercel
GitHub
Step 2 Import a Git Repository
This step sounds a little bit complicated, but actually it's very easy since this step only needs to click a button.
Step 3 Set up
You just need to follow the images.
3-1 Click Continue

3-2 Select your GitHub account

3-3 Name your repo
In this case, I named koji-notion-blog
. Of course, you can change the name later.

Step 4 Set Env variables
We are almost there.
Probably, this step is a little bit tricky, but if you know Developer Tools
, it shouldn't be difficult.
We need to fill out two things.
The one is BLOG_INDEX_ID
and the other is notion's token_v2

HOW TO GET BLOG_INDEX_ID
https://github.com/ijjk/notion-blog#getting-blog-index-and-token
HOW TO FIND YOUR NOTION V2 TOKEN
https://www.redgregory.com/notion/2020/6/15/9zuzav95gwzwewdu1dspweqbv481s5
Then click Deploy
.
Now you can access to vercel's dashboard like below.

Click Visit
button to check your blog.
If everything goes well, you will see this.

The setup process is done 😁
You can use notion desktop app or notion website to write an article. Once you edit an item on the table and check published
, your article will be published in a couple of minutes.

Customize your blog
notion-blog is made by next.js
that is the react framework for SSR
(server-side rendering). So if you are familiar with reactjs, customizing your blog isn't very hard.
You can use a custom domain for your blog.
Hopefully, this will be useful to you!
My notion-blog is here
https://koji-notion.vercel.app/
