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
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
andBLOG_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
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/
Top comments (2)
This is amazing! just what i was looking for. Thankyou so much!
thats nice, I just tried nobelium, will test this soon!