NotionNext：基于Notion、GitHub、Vercel的博客创建记录

type

status

date

slug

summary

Blogger概况

总结

Blog总体采用以Notion作为数据库，以GitHub作为代码源头，以Vercel作为云服务器的方法来搭建，整体技术框架成熟，且有搭建步骤作为参考，对于新手来说较为不错，并且网站后续的维护不用操心，目前感觉较为不错。至于网址安全性等问题还未考证，暂且按下不表。

目前看来，因云服务器为国外平台，网站存在墙内用户无法访问的通病，之后会尝试在阿里云平台搭建，但这也是后话，在此也按下不表。

Blog搭建步骤

整体步骤《NotionNext帮助手册》已有详细阐述，如有需要请移步以下链接

Vercel部署NotionNext | NotionNext帮助手册

Vercel是一款国外的Serverless托管平台，对个人用户使用几乎免费，而且方便快捷，用Vercel托管你的Notion站点，无需再操心服务器的维护与资费问题。

https://docs.tangly1024.com/article/vercel-deploy-notion-next

注册Notion账号

注册并不难点，照着做就好。

难点为页面ID的找取，非plus用户无法从share to web边框栏中找到页面ID（或者说页面ID呈现灰色，复制不了），需要用户自己进入创建的网站后，通过观察浏览器上方页面链接，自行把其中的页面ID拷贝下来。

💡

⚠️

新版的notion中，页面ID的格式可能会有一点不同，例如会把页面的标题也带上： https://www.notion.so/tanghh/Today-261c36d269a74acd97682af86d7bc9a0?pvs=4 但不变的是，页面url中的那串连续32为的字符串就是id。

上面这句话很重要，理解下来就会了。

在GitHub上复制源代码

说实话，我接触GitHub也不多，但跟着帮助手册做也无难点。

GitHub源代码如下，将其fork后之后一些操作需要直接从源代码处修改（例如进入网页后的默认主题需要修改源代码THEME: process.env.NEXT_PUBLIC_THEME || 'hexo'）

github.com

https://github.com/tangly1024/NotionNext/fork

Vercel部署

利用GitHub注册Vercel账户出现了报错Your account requires further verification.

在网上寻找后解决方法如下：

@解决 Vercel 注册时提示 Your account requires further verification. - 秋风于渭水

后续完善

网站搭建完成后可能无法出现我Blog一样开启图片的效果，这方面问题跟博客主题代码选择有关，详情移步图片/封面管理 | NotionNext帮助手册

PS：NotionNext真的很有用，很多问题都能在里面解决，非常好。

闲谈

搭建Blog的想法是24年11月份出现的，在网上寻找ChatGPT话术时偶然点开了Steven Lynn大佬的Blog，从此便萌生了搭建Blog的想法，忙忙碌碌一直到寒假后才付诸实践，原本想自己一行一行代码将Blog敲出来，但发现工作量太大随之放弃，又是看到Steven Lynn有关NotionNext：基于Notion和NextJS的开源博客 | Steven Lynn’s Blog的帖子后决定复现大佬的Blog。

对Steven Lynn的引路感激不尽。

虽然尝试自己写网站没能走下去，但中途还是学到了很多有关网站搭建的知识，康文昌UP的视频对我启发很大，帮助我整体把握网站框架，推荐大家去看一看。

在尝试写html代码过程中，才发现自己一直下载的是Visual Studio而不是Visual Studio Code🤣，也算是一种收获吧。

Blogger后续发展设想

目前Blog处于开发初期，而且我不喜欢定什么宏大目标，Blog目前朝着类似“微信朋友圈”的方向发展，发表一些自己生活中的见解/趣事。

考虑到一些日本朋友或许会访问Blog，我会用AI将每一篇文章的日语翻译放入另一个分区，如果有翻译错误请及时告诉我，表达不恰当不是我的本意。

有任何问题可以通过Outlook邮箱联系我，只要不是太忙，一周之内我都会回复。

PS：截稿日期2025.01.14