NotionNext | Notion笔记轻松搭建博客
2021-12-4|2023-1-22

tangly1024
NotionNext是什么?
建站效果
最快只需几分钟的操作,您将获得一个还不错的样的博客站👇:

点击下方链接查看更多网友案例:
为何使用NotionNext
1.Notion
Notion 是一款将笔记、在线文档、知识库和任务管理无缝整合的「All-In-One」应用。
Notion也是我一直在用、并且极力推荐的一款笔记软件,关于Notion的介绍查看此文《Notion笔记 | 简化生活的效率工具》
NotionNext中,编写与发布都只在您的笔记中完成。借助Notion强大的Block编辑和写作功能,您可以随时随地撰写文章、记录你的创意与灵感。
相比于Hexo等类型的静态博客,您不需要学习Markdown语法,也无需每次写完文章都提交推送到Git仓库。
2.实用的功能
🚀 更快的速度

🎨 更多的主题
目前已支持5种主题
访问下方地址以预览主题 (点击左下角按钮可切换主题)
🤟 更多功能
快速开始
遵循以下步骤进行快速部署。
1.Fork此Github项目
点击下方链接快速fork
2.Vercel中导入您fork的项目
Vercel是一个在线代码托管平台,对于个人使用,其免费版已经完全足够,因此您无需购买服务器即可搭建自己的网站。
点击下方链接,将您的github代码导入vercel。


导入项目后先别急着点Deploy部署,我们需要添加一项配置来绑定您的Notion页面。
3.绑定您的Notion页面
点击
Environment Variables
(环境变量),添加NOTION_PAGE_ID
变量。
NOTION_PAGE_ID
参数从何而来?
⬇️打开下方链接的Notion模板:
1.模板右上角点击
点击右上角的Duplicate
Duplicate
,将其复制到您的Notion中(点此展开截图)
2.开启分享:点击 
Share
开启 Share to web

3.在页面链接中取得
点击Copy可以复制页面地址
PAGE_ID
:
PAGE_ID
是链接中的标红部分,一个32位字符串: https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d4.完成
点击
Deploy
按钮,静候两分钟即可完成。完成后点击Go to Dashboard
访问控制台,在控制台右上角的Visit
按钮访问您的站点。

🎉🎉🎉 自此站点部署已经完成 🎉🎉🎉
Notion笔记会自动实时保存、NotionNext会实时抓取笔记的改动(由于缓存和网络延迟,网页多刷新两次就能看到同步)。
若您的站点始终没有同步笔记的数据,请再次检查上面的步骤3:
1.在Notion中检查您的
PAGE_ID
格式是否正确、并已开起页面分享。
2.Vercel后台环境变量NOTION_PAGE_ID
是否配置,重新配置后尝试Redploy
。
3.blog.config.js
中的NOTION_PAGE_ID
参数是否被写死。自定义您的站点
部署成功后,您可以很方便地在笔记或Github代码中个性化您的站点,不需要每次都重新导入Vercel。
1.修改基础信息
在Notion页面中,以下四个元素将会直接同步到网页作为站点信息:

修改Notion页的图标①、标题②、描述③及封面图④ 将分别对应同步站点的作者头像、站点标题、站点描述和首页的封面大图。
图标支持自定义上传图片,建议图片文件不要过大,否则影响网页打开速度。

2.更多自定义配置
1.Vercel会自动将您Github仓库中的代码部署到站点,最常见的是修改blog.config.js后更新站点。
修改代码的操作是安全的。
代码发生改动后,vercel会创建一个部署任务以打包您的网站代码。
vercel会为每次部署任务分配唯一的访问网址,部署成功后,您的域名会被自动指向该临时网址。
部署若失败,例如代码有误或配置冲突,这次部署则会作废,您可以查看Vercel日志找到错误原因。与此同时,线上原先运行中的旧版网站不受任何影响。
- (可选) 用自己的图片替换
/public
文件夹里的favicon.svg
和favicon.ico
- 在
blog.config.js
配置网站的相关信息,例如站点地址,作者信息,以及默认主题:
AUTHOR: 'tangly1024', // 作者 BIO: '一个普通的干饭人🍚', // 作者简介 LINK: 'https://tangly1024.com', // 网站地址 KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开 THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题, 支持 ['next','hexo',"fukasawa','medium']
2.修改Vercel环境变量
在
blog.config.js
配置文件中我们可以看到类似 process.env.NEXT_PUBLIC_THEME
的格式,意味着这些配置支持在Vercel中使用环境变量的方式来配置。例如默认主题的配置:THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题, 支持 ['next','hexo',"fukasawa','medium'] // 如果在VERCEL中有环境变量NEXT_PUBLIC_THEME,则会默认读取环境变量设置,否则将读取 'next' 作为默认主题。
环境变量的修改方式:
a.项目主页点击
Settings
,并选择Environment Variables
配置环境变量
b.在此修改环境变量


c.修改完环境变量,回到项目的
Deployments
下,将最新的部署记录Redeploy

3.修改字体
系统预设了Google免费开源的Noto Sans字体,您也可以在
blog.config.js
中自定义字体:// 自定义字体示例: 请先将 CUSTOM_FONT 改为 true, 并将 CUSTOM_FONT_URL 改为你的字体CSS地址,同时在 CUSTOM_FONT_SANS 与 CUSTOM_FONT_SERIF 中指定你的 fontfamily CUSTOM_FONT: true, // 是否使用自定义字体 CUSTOM_FONT_URL: ['https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.6.0/lxgwwenkaiscreen.css'], // 自定义字体的CSS CUSTOM_FONT_SANS: ['LXGW WenKai Screen'], // 自定义无衬线字体 CUSTOM_FONT_SERIF: ['LXGW WenKai Screen'], // 自定义衬线字体
4.Notion隐私安全
您共享的Notion页,他人只有查看权限,除非你手动开启编辑和评论的权限。另外,若您不希望别人访问到你的源Notion页面,可选择关闭Noton页面共享,然后通过Notion的access_token进行数据访问。

想要更大程度地修改页面的样式与布局?请参考《NotionNext二次开发手册》进行自定义开发。
3.开启评论插件
参考以下三篇文章开启您的评论功能
4.绑定自己的域名
vercel有为你的站点提供一个
*.vercel.app
的域名,但vercel的官方域名在大陆被墙,所以推荐您绑定自己的域名。参考以下文章,您可以快速地将自己的域名解析到Vercel站点:
项目更新
项目不定期会修复bug、增加新特性,请参考此篇文章进行更新:
联系我们
Email
Github
- 提交Issue以反馈BUG、功能建议、寻求帮助等。
- Discussions开帖讨论,畅所欲言。
微信交流群
- 添加微信 [tangly1024];
- 备注NotionNext;
- 非休息时间30min内拉您入群。
- 入群后请修改备注:昵称 - 城市 - 职业
此致
折腾博客多年,尝试过 WordPress、Hexo、Typecho、Ghost、Gridea、Hugo等博客系统,我觉得在写作过程中应当把重心放在养成内容持续输出的习惯;博客系统只是一个辅助,反复折腾搭建系统、维护服务器显得本末倒置。 Notion笔记本的出现,让“坚持笔记”和“博客分享”得到了完美结合,何乐而不为呢。
- Twikoo
- Waline
- Giscus
- Cusdis