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 😜
ijjk / notion-blog
A Next.js site using new SSG support with a Notion backed 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/
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.
- Clone this repo
git clone https://github.com/ijjk/notion-blog.git
- Configure project with
- Add your
BLOG_INDEX_IDas environment variables in your project. See here for how to find these values
- Do final deployment with
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
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-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
HOW TO GET BLOG_INDEX_ID
HOW TO FIND YOUR NOTION V2 TOKEN
Now you can access to vercel's dashboard like below.
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
Latest comments (2)
This is amazing! just what i was looking for. Thankyou so much!
thats nice, I just tried nobelium, will test this soon!