NotionNext | Notion笔记轻松搭建博客

NotionNext是什么？

NotionNext是我开源在Github的、基于Nextjs的博客生成器，它将Notion笔记实时渲染成静态博客站，从而实现“笔记即网站”。

建站效果

最快只需几分钟的操作，您将获得一个还不错的样的博客站👇：

点击下方链接查看更多网友案例：

留言板 | TANGLY's BLOG

本站文章是在我的Notion笔记本上编写、并实时同步在该博客。博客站点的搭建可参考以下文章，只需几分钟的时间即可完全免费搭建。欢迎在此页留言，或者直接留下你的站点地址，我会大家的站点收集起来，这样以便于互相窜门拜访😆。我是 ...

https://tangly1024.com/about

为何使用NotionNext

1.Notion

Notion 是一款将笔记、在线文档、知识库和任务管理无缝整合的「All-In-One」应用。

💡

Notion也是我一直在用、并且极力推荐的一款笔记软件，关于Notion的介绍查看此文《Notion笔记 | 简化生活的效率工具》

NotionNext中，编写与发布都只在您的笔记中完成。借助Notion强大的Block编辑和写作功能，您可以随时随地撰写文章、记录你的创意与灵感。

相比于Hexo等类型的静态博客，您不需要学习Markdown语法，也无需每次写完文章都提交推送到Git仓库。

2.实用的功能

🚀 更快的速度

NotionNext是基于craigary的Nobelium项目二次开发，继承了Nobelium功能特点，拥有极快的打开速度：

🎨 更多的主题

目前已支持5种主题

访问下方地址以预览主题 (点击左下角按钮可切换主题）

NOTION BLOG | 演示站点描述

演示站点描述

https://preview.tangly1024.com/

🤟 更多功能

文章分类、标签、归档页面

支持快速添加单页、菜单

在Notion中换头像、换背景

更多功能特性持续更新中。。

看板宠物😾

文章支持加锁🔏,示例文章

支持自定义你的表头属性-V3.4.5特性

支持多种评论插件

自定义字体

快速开始

遵循以下步骤进行快速部署。

💡

除了Vercel云托管、您还可以选择在服务器本地部署、导出静态网页、Docker容器化、CloudFlare部署等方案。

1.Fork此Github项目

点击下方链接快速fork

Build software better, together

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

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

2.Vercel中导入您fork的项目

💡

Vercel是一个在线代码托管平台，对于个人使用，其免费版已经完全足够，因此您无需购买服务器即可搭建自己的网站。

点击下方链接，将您的github代码导入vercel。

New Project - Vercel

To deploy a new Project, import an existing Git Repository or get started with one of our Templates.

https://vercel.com/new

💡

导入项目后先别急着点Deploy部署，我们需要添加一项配置来绑定您的Notion页面。

3.绑定您的Notion页面

点击Environment Variables（环境变量），添加NOTION_PAGE_ID变量。

NOTION_PAGE_ID 参数从何而来？

⬇️打开下方链接的Notion模板：

NOTION BLOG

演示站点描述

https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d

1.模板右上角点击Duplicate，将其复制到您的Notion中（点此展开截图）

2.开启分享：点击 Share 开启 Share to web

3.在页面链接中取得PAGE_ID：

⚠️

PAGE_ID是链接中的标红部分，一个32位字符串： 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参数是否被写死。

自定义您的站点

💡

部署成功后，您可以很方便地在笔记或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.开启评论插件

参考以下三篇文章开启您的评论功能

NotionNext配置评论插件Twikoo | TANGLY's BLOG

一个简洁、安全、免费的静态网站评论系统，基于腾讯云开发。经评论区网友推荐，我开始使用 Twikoo，一番体验，发现Twikoo真的很强大，目前我决定用它作为主要评论插件。 twikoo支持在页面上直接管理评论、配置插件，非常强大在最新版本中 NotionNext已经支持该评论插件，配置方法很简单：在Vercel后台添加一个环境变量 NEXT_PUBLIC_COMMENT_ENV_ID ; 值为您部署好的 twikoo 后台地址。以我的举例：借助vercel，您可以非常快速地部署自己的twikoo后台，用于储存评论数据。 twikoo的后台数据存储是基于MongoDB数据库的，我们可以先注册创建一个免费的在线MongoDB数据库。创建MongoDB数据库 1.注册账号创建数据库这里下方要设置一个允许访问该数据库的IP地址，推荐设置0.0.0.0，即所有地址都允许访问，毕竟我也不知道自己会用什么ip访问这个数据库。 2.获取数据库连接地址 Vercel一键部署点击Create将twikoo的代码拷入您的仓库配置MongoDB数据库地址添加一个配置 MONGODB_URI 环境变量即可，其值为上一步获得的MongoDB连接地址，注意将链接中MONGODB的密码替换成您设置的。上述部署完成后，您将获得一个vercel的twikoo后台页面，您可以选择像我一样映射成二级域名将您的twikoo后台地址配置在NotionNext的后台，并redeploy即可。到此完成~ 点击右下角的小齿轮即可配置您的管理员密码、并进行更多的功能设置。赶快体验吧~ 可以访问官方文档获取安装部署帮助，并且查看Twikoo的更多特性。 NotionNext支持多种评论插件，可访问以下文章获得帮助：

https://tangly1024.com/article/notionnext-twikoo

NotionNext评论插件Cusdis/Giscus/Gitalk/Utterance | TANGLY's BLOG

NotionNext支持多种评论插件，其中体验比较好的我个人觉得是Valine/Waline，但是这类评论插件需要注册LeanCloud平台才能进行数据管理，部署起来的流程也较为繁琐，关于Valine/Waline的部署可以访问此篇文章： Utterance 、 Giscus 、Gitalk 其中部署最便捷的当属 Cusdis 和 Utterance 这两个插件，您也可以选择同时部署多个。完成效果预览点击Start for free ，并用Github登录即可 Sign in With Github (点击查看截图) [可选] 配置邮件通知地址，以便收到新评论时邮件通知您，（点击展开截图）点击Embed Code获取您的应用ID，即data-app-id, 复制这串id备用。在Vercel后台添加一个环境变量 NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID，值为上面获取到的data-app-id。完成预览效果在您的Github中创建一个开源项目用于存放评论在github中安装utterance插件允许utterance访问所有仓库，并勾选install，此步骤也可以只勾选作为评论用的仓库地址。将用作评论仓库名添加到Vercel添加环境变量后台 settings→ environment variables → 添加 → save 即可。如下图：注意，仓库名的格式是 [您的用户名/您的仓库名] 如下示例完成预览效果在您的Github中创建一个开源项目用于存放评论创建一个授权秘钥，并保存您的ClientID与ClientSecret Authorization callback URL 填写您网站域名填写配置的效果，点击 register application 即可创建。点击 Generate a new client secret 生成您的密码复制 Client ID和刚生成的 Client secret （对应图中2和3）备用。在Vercel后台配置环境变量 NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET 项目会在您的Github项目讨论区创建评论数据，便于维护管理 , 完成效果预览您可以在Github的Discusstion讨论区随时管理评论。在您的Github中创建一个开源项目用于存放评论在项目Setting中开启discussion功能在Github中安装giscus应用点击右上方的Install即可，并确认允许访问仓库数据权限：默认勾选All repositories即可。也可以只勾选用作评论的仓库，（后续还可以再回来配置）访问Giscus填写并获取您的Giscus配置参数主要配置输入您的仓库名，并选择 Discussion分类为 Announcements .

https://tangly1024.com/article/notion-next-comment-plugin

NotionNext配置Valine/Waline评论插件 | TANGLY's BLOG

Valine插件需要LeanCloud后端提供数据库存储功能，请按照以下步骤配置。而Waline 的前置步骤和Valine基本一致，只是多了一个部署Waline的Vercel服务步骤。由于Waline配置了完善的后台管理功能，所以使用Waline就不需要再配合Admin-Valine项目运行。应用创建好以后，进入刚刚创建的应用，选择左下角的设置> 应用Key，然后就能看到你的 APP ID和 APP Key 了：为了你的数据安全，请设置自己的安全域名：只有以下设置的域名，才允许访问你的valine数据支持的Valine配置在NotionNext项目的blog.config.js 中，请在Vercel后台的环境变量中配置： serverURLs在应用内部会尝试自动获取，如果发现获取失败，请手动提供刚刚创建的应用，选择左下角的设置> 应用Key，找到 Request 域名第一行需要在akismet中注册账号并获取免费的key： https://akismet.com/account ，并在LeanCloud中配置 AKISMET_KEY 变量参考官方文档，在你的Vercel上部署一个valine应用。而后在你的NotionNext环境变量中添加你的waline服务地址环境变量： NEXT_PUBLIC_WALINE_SERVER_URL 即可生效。

https://tangly1024.com/article/notionnext-valine

4.绑定自己的域名

vercel有为你的站点提供一个 *.vercel.app 的域名，但vercel的官方域名在大陆被墙，所以推荐您绑定自己的域名。

参考以下文章，您可以快速地将自己的域名解析到Vercel站点:

Vercel应用绑定自己的域名 | 小唐笔记📒

首先需要在域名服务商处购买域名，可以选择Namesilo、Freenom、Godaddy、阿里云、腾讯云等任意平台。并在域名服务商后台添加一条CNAME转发进行解析，CNAME值为 cname.vervel-dns.com 。 CF具有Worker.js、全球无限CDN流量、网站防火墙、DDoS等特性，我个人比较喜欢将域名解析交给CloudFlare管理。 ...

https://tangly1024.com/article/vercel-domain

项目更新

项目不定期会修复bug、增加新特性，请参考此篇文章进行更新：

NotionNext更新指南 | TANGLY's BLOG

本项目在长期维护更新中，不时将修复一些bug和增加新特性。只要在您fork后的的NotionNext中点击 Fetch upstream 就能更新为最新的代码有时这里显示的不是 Fetch and Merge 按钮，而是 Open pull request。原因是我和你的代码发生冲突（ confilcts），例如我修改了 blog.config.js 文件，你也修改了此文件，导致在更新时，Git需要人工确认要合并代码时保留的blog.config.js文件版本。

https://tangly1024.com/article/how-to-update-notionnext

联系我们

mail@tangly1024.com

Github

提交Issue以反馈BUG、功能建议、寻求帮助等。

Discussions开帖讨论，畅所欲言。

微信交流群

添加微信 [tangly1024]；

备注NotionNext；

非休息时间30min内拉您入群。

入群后请修改备注：昵称 - 城市 - 职业

NotionNext交流群

https://t.me/+sOvnlf2QKZQ3NDU1

此致

折腾博客多年，尝试过 WordPress、Hexo、Typecho、Ghost、Gridea、Hugo等博客系统，我觉得在写作过程中应当把重心放在养成内容持续输出的习惯；博客系统只是一个辅助，反复折腾搭建系统、维护服务器显得本末倒置。 Notion笔记本的出现，让“坚持笔记”和“博客分享”得到了完美结合，何乐而不为呢。