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/
0xkoji
