How to build your own blog for free using Notion + Vercel (Ⅱ)

1 Detailed Operations

Based on the content from (Ⅰ)

1.1 Complete Code Configuration

1.1.1 Install Git

Subsequent operations require the use of the gitcommand, so please make sure that git is installed on your computer.

If you don't know how to install git, please first check Git - Installing Git for installation instructions.

1.1.2 Download Repository Code

Now let's get started!

First, download the code from transitive-bullshit/nextjs-notion-starter-kit: Deploy your own Notion-powered website in minutes with Next.js and Vercel.. Find a suitable directory on your local machine, open the terminal (command line tool... Apple's Terminal, Windows' Powershell, or Git Bash are all okay), and enter the following command.


git clone https://github.com/transitive-bullshit/nextjs-notion-starter-kit.git

Once completed, go into the cloned directory and create a new branch for future updates by entering the following commands.


cd nextjs-notion-starter-kit
git checkout -b <branch name>

Please enter a suitable branch name for branch name.

1.1.3 Modify Configuration File

Please find site.config.ts in the current directory.

Configure the following key contents.

rootNotionPageId: Replace the original 7875426197cf461698809def95960ebf with your ID recorded in the previous article

name: Your blog's name

domain: Your blog's domain, you can later supplement it with the free domain provided by Vercel However, for independence, I actually recommend you purchase one. On one hand, it can enhance your identification, and on the other hand, it avoids reliance solely on Vercel's services ~~An advertising space reserved here... hahaha🤡~~

author: Author's name, just fill in your name

description: Briefly introduce your blog

twitter: Your Twitter/X name; you can delete it if you don't have one

github: Your GitHub name; you can delete it if you don't have one

linkedin: Your LinkedIn name; you can delete it if you don't have one

For more configurations, please refer to the documentation. If you have any questions about certain configurations, feel free to leave a comment.

1.1.4 Modify Static Files

Please open the public folder.

Modify the following files:

favicon: Replace any files starting with this name with your own logo, referring to the original image size

manifest.json: Modify name and short_name to your website name and abbreviation

1.1.5 Save Changes

Execute the commands below in the terminal to save your changes!


git add .
git commit -m "init"

This completes the configuration work.

Even if a certain configuration is incorrect, it's fine; it can be modified at any time later, and updates are very convenient!

1.2 Upload Code to GitHub

1.2.1 Register on GitHub

Registering on GitHub is not complicated; click here to register on the official site.

The only challenge might be the anti-bot registration verification, haha.

1.2.2 Create a GitHub Repository

After registration, click on New repository to create a new repository.

If you can't find where to go, you can also click here to create it.

After creation, it should look similar to the page below.

1.2.3 Upload Code

Next, we will start uploading the code. Before uploading, let's return to the terminal you just opened to do some basic configurations.


git config user.name <github name>
git config user.email <github email>

Set github name and github email to your GitHub username and email.

Then execute the following code to add the remote repository and push the code.


git remote add <branch_name> <repository url>
git push -u <branch_name> <branch_name>

branch name is the branch name you set in 1.1.2, and repository url should be copied from the repository you just created.

⚠️ Note:
If you encounter the following error after executing git push:
Error: RPC failed. HTTP 400 curl 22 The requested URL returned error: 400
Send-pack: unexpected disconnect while reading sideband packet
Please execute git config http.postBuffer 52428800 to increase the transfer buffer size
Then re-execute git push -u <branch_name> <branch_name>.

After completing the operations, check your repository page; as long as code files appear, it means the code is ready!