category
软件工具
tags
Notion
Blog
NotionNext
type
Post
status
Published
slug
notion-next
date
Dec 4, 2021
summary
无需服务器、只需几分钟即可拥有自己的独立博客站~如果你在使用Notion这款神级笔记本的话,不妨来试试顺手建个网站🤣🤣🤣,这是一款基于NotionAPI的博客系统。
icon
password
NotionNext是什么?
建站效果
最快只需几分钟的操作,您将获得一个还不错的样的博客站👇:

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

🎨 更多的主题
目前已支持5种主题
点击下方链接以预览主题
🤟 更多功能
快速开始
遵循以下4步骤可快速部署您的站点。
1.Fork此Github项目
点击下方链接快速fork项目
Fork:意为将NotionNext源代码复制一份到您的Github账号中。
2.Vercel中导入您的Github项目
点击下方链接将Github代码导入到Vercel托管部署
导入步骤说明 (点击展开截图详情)


此步骤先不要点击Deploy部署,请阅读下方步骤3《绑定您的Notion页面》

3.绑定您的Notion页面
点击
Environment Variables
(环境变量),添加NOTION_PAGE_ID
变量。
👉NOTION_PAGE_ID
参数从何而来?
1.将下方模板复制到您的Notion笔记中:
2.开启分享:点击 
Share
开启 Share to web

3.在页面链接中取得
点击Copy可以复制链接地址
PAGE_ID
,一个32位的字符串链接中的标红加粗部分就是
PAGE_ID
https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d

4.完成
点击
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
是否被写死。此教程使用Vercel来部署:Vercel是一个在线代码托管平台,对于个人使用,其免费版已经完全足够,因此您无需购买服务器即可搭建自己的网站。
除了Vercel云托管、您还可以选择服务器本地部署、导出静态网页、Docker容器化、CloudFlare部署等方案。
自定义您的站点
部署成功后,您可以很方便地在笔记或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/[email protected]/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笔记本的出现,让“坚持笔记”和“博客分享”得到了完美结合,何乐而不为呢。