NotionNext | Notion笔记轻松搭建博客 2021-12-4| 2023-1-2919368本文字数4292 | 阅读时长 ≈11分钟
原文链接
https://tangly1024.com/article/notion-next#86b977c0f3ff44018886d3974bedc0a7
NotionNext是什么？
NotionNext是我开源在Github的、基于Nextjs的博客生成器，它将Notion笔记实时渲染成静态博客站，从而实现“笔记即网站”。
建站效果
最快只需几分钟的操作，您将获得一个还不错的样的博客站👇：
为何使用NotionNext
1.Notion
Notion 是一款将笔记、在线文档、知识库和任务管理无缝整合的「All-In-One」应用。💡Notion也是我一直在用、并且极力推荐的一款笔记软件，关于Notion的介绍查看此文《Notion笔记 | 简化生活的效率工具》NotionNext中，编写与发布都只在您的笔记中完成。借助Notion强大的Block编辑和写作功能，您可以随时随地撰写文章、记录你的创意与灵感。相比于Hexo等类型的静态博客，您不需要学习Markdown语法，也无需每次写完文章都提交推送到Git仓库。
2.实用的功能
🚀 更快的速度
NotionNext是基于craigary的Nobelium项目二次开发，继承了Nobelium功能特点，拥有极快的打开速度：
🎨 更多的主题
目前已支持5种主题NextHexoMediumFukasawaExample点击下方链接以预览主题NOTION BLOG | 演示站点描述演示站点描述https://preview.tangly1024.com/
🤟 更多功能
- 文章分类、标签、归档页面
- 支持快速添加单页、菜单
- 在Notion中换头像、换背景
- 手动切换夜间模式
- 更多功能特性持续更新中。。
- 看板宠物😾
- 文章支持加锁🔏,示例文章
- 支持自定义你的表头属性-V3.4.5特性
- 支持多种评论插件
- 自定义字体
快速开始
遵循以下4步骤可快速部署您的站点。
1.Fork此Github项目
点击下方链接快速fork项目Build software better, togetherYou 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💡Fork：意为将NotionNext源代码复制一份到您的Github账号中。
2.Vercel中导入您的Github项目
点击下方链接将Github代码导入到Vercel托管部署New Project - VercelTo deploy a new Project, import an existing Git Repository or get started with one of our Templates.https://vercel.com/new导入步骤说明 (点击展开截图详情)
💡此步骤先不要点击Deploy部署，请阅读下方步骤3《绑定您的Notion页面》
3.绑定您的Notion页面
点击Environment Variables（环境变量），添加NOTION_PAGE_ID变量。
👉NOTION_PAGE_ID参数从何而来？
1.将下方模板复制到您的Notion笔记中：NOTION BLOG演示站点描述https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d
2.开启分享：点击 Share 开启 Share to web
3.在页面链接中取得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后更新站点。
2.修改Vercel环境变量
3.修改字体
4.Notion隐私安全
💡想要更大程度地修改页面的样式与布局？请参考《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-twikooNotionNext评论插件Cusdis/Giscus/Gitalk/Utterance | TANGLY's BLOGNotionNext支持多种评论插件，其中体验比较好的我个人觉得是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-pluginNotionNext配置Valine/Waline评论插件 | TANGLY's BLOGValine插件需要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