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

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

Last updated
11/19/2024, 10:29

1 Background

Since it was my first time building a blog and I happened to have ample time, I planned to choose the method with the least economic investment.
After referencing various blogs created by others online, I ultimately chose Notion + Vercel to complete my blog debut.
This article mainly serves to document my building process and hopes to help you, the reader.

2 Three Steps

You can complete the deployment with the following three steps:
  1. Complete the Notion registration, configure the basic pages, and publish.
  1. Complete the GitHub registration, download the code from transitive-bullshit/nextjs-notion-starter-kit: Deploy your own Notion-powered website in minutes with Next.js and Vercel., modify the configuration file, create your own repository, and upload the modified code.
  1. Complete the Vercel registration, import the repository created on GitHub, and wait for the build to complete before going live.
notion image
A simple diagram:
Notion is the data source for the blog, and all the article content is stored here.
GitHub is the code storage repository; it is because of the code from the great @transitive-bullshit that the blog can access the content in Notion.
Vercel is the code execution container; after retrieving the code from GitHub, it builds the code and provides services upon completion, turning into a blog that users can browse.

3 Detailed Operations

3.1 Completing Notion Configuration

3.1.1 Registering for Notion

Registering for Notion is also very simple. Click here to go to the official website to complete the registration.
Now Notion natively supports Chinese, making it much simpler for friends who only understand Chinese.
notion image

3.1.2 Configuring the Notion Space

After registration, it is recommended to create a separate space specifically for publishing the blog content.
notion image

3.1.3 Copying the Template to the Newly Created Workspace

Following the suggestion of author @transitive-bullshit, click here to copy the template to Notion, making sure to choose the newly created space.
Subsequent updates can be made based on this template.
notion image

3.1.4 Publishing the Page

At this point, there is no need to rush to configure the content; first publish the page so that the code can retrieve content.
notion image

3.1.5 Obtaining the Page ID

After publishing, find the page ID at the end of the current URL and save it for later configuration.
notion image
 

📌 Related Posts

📃

How to build your own blog for free using Notion + Vercel3 Posts
View
Sponsor @SPKRRRBuy me a coffee
Sponsor