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:
- Complete the Notion registration, configure the basic pages, and publish.
- 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.
- Complete the Vercel registration, import the repository created on GitHub, and wait for the build to complete before going live.
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.
3.1.2 Configuring the Notion Space
After registration, it is recommended to create a separate space specifically for publishing the blog content.
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.
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.
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.