1 Detailed Operations
Based on the content of (II)
1.1 Complete Vercel Configuration
1.1.1 Register for Vercel
With the previously registered Github account, we can quickly register for Vercel.
Please click here to go to the official site and register.
Select
Hobby and then click Continue.
Select
Continue with Github.
After logging into your Github account, click
Authorize Vercel to confirm the authorization.
Now your account has been created!
1.1.2 Repository Authorization
Next, you’ll be redirected to this page to authorize Vercel to read your Github repositories to pull code. Please click
Install.
Then select the repository authorization method and click
Install.
You will then be prompted that the authorization has been completed!
1.1.3 Start Deployment
Next, it’s time to officially start deploying the code to Vercel. Click
Import.
Select the code repository created in the previous steps, and choose
Import.
If you have no other requirements for the
Project Name, just click Deploy.
1.1.4 Result Acceptance
Then Vercel will start building; all we need to do is wait for the build to finish.
Once the build is completed, you will be notified that the deployment is finished.
After clicking
Continue to Dashboard, you will see the blog you painstakingly deployed.
Click on the free domain assigned by Vercel in
Domains to check out your freshly baked blog!1.2 Domain Settings
1.2.1 Configure Your Own Domain (Optional)
If you have your own dedicated domain, you can add it according to the content in the image below. After adding, Vercel will prompt you on how to configure DNS resolution; just follow the guidance.
1.2.2 Configure the Domain in site.config.ts
After configuring the domain, please return to the
site.config.ts file to set the domain field that hasn’t been confirmed in the previous steps.
After confirming everything is correct, save the file and enter the following command in the terminal to re-submit the code.
git add . git commit -m "domain" git push
After submission, no further action is needed; Vercel will automatically pull the code to redeploy, how convenient!
1.3 More to Come
With the deployment and domain settings completed, the overall functionality is now ready.
What’s left to do is to update your Notion content! Welcome to become my friends!
2 One More Thing
Some friends may wonder: Why is the page inconsistent with my blog after deployment?
This is because I have also expanded a lot of content based on my own needs after the deployment, as described below.
Optimize Overall Page
I adjusted the display logic for areas such as overall width, quotes, and copyright according to my own aesthetic.
Support for Mobile Directory
The PC version has a directory, but you can’t see it on mobile.
For users who frequently use mobile devices, not being able to get an overview of the page and quickly focus on specific content can be a bit uncomfortable. Therefore, considering user experience, I made some enhancements.
Support for Multilingual Switching
Considering that the articles I publish later may interest overseas DIY users more, I decided to support multiple languages.
However, since my native language is Chinese, I retained the Chinese version, which also makes it easier for Chinese users to read.
Support for Tag Article Viewing
After referring to the author’s personal branch code transitive-bullshit/nextjs-notion-starter-kit at transitive-bullshit, I made additional enhancements.
Support for Related Article Viewing
It can be quite unfriendly for authors to output all the content of a major work at once.
Based on my own habits, I feel it is more suitable to support the output of series articles, as it makes the writing task easier, and reduces the burden for readers as well.
Support for Donation Module
Well… I’m really too poor (ToT)/~~~
Support for Comment Module
For users who have questions or suggestions about the article, directly contacting me may be cost prohibitive. I used the excellent project giscus/giscus: A comment system powered by GitHub Discussions. :speech_balloon: :gem: to utilize GitHub Discussions as a source of comment data and integrated it into the blog.
Added Links for WeChat Official Account and Xiaohongshu
Welcome everyone to find me here too～ The focus is still a bit different from the blog!
In addition to the above, there are also a few minor modifications, such as RSS optimization, Sitemap optimization, and the introduction of Vercel-related analysis tools.
Actually, this is my first time working with React and NextJS… so the code is quite poorly written… But it also shows that the above modifications are relatively simple, and everyone can try it themselves.
If you are interested in what I have modified, please leave a message to let me know, and I will add an article to introduce it.
Finally, thanks to the code author @transitive-bullshit for their excellent work, and gratitude to Github, Notion, and Vercel for providing resources that have simplified the cost of self-hosting a blog.