DEV Community

Cover image for Set up a Blog with Notion and Vercel in 10 min
0xkoji
0xkoji

Posted on

Set up a Blog with Notion and Vercel in 10 min

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 😜

GitHub logo ijjk / notion-blog

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.

Deploy with Vercel

or

  1. Clone this repo git clone https://github.com/ijjk/notion-blog.git
  2. Configure project with vc
  3. Add your NOTION_TOKEN and BLOG_INDEX_ID as environment variables in your project. See here for how to find these values
  4. 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

Alt Text

3-2 Select your GitHub account

Alt Text

3-3 Name your repo

In this case, I named koji-notion-blog. Of course, you can change the name later.
Alt Text

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
Alt Text

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.
Alt Text

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

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.

Alt Text

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/

Buy Me A Coffee

Oldest comments (2)

Collapse
 
llaustin profile image
LL Austin

thats nice, I just tried nobelium, will test this soon!

Collapse
 
azurast profile image
Azura Sakan Taufik

This is amazing! just what i was looking for. Thankyou so much!