NotionNext | Notion笔记轻松搭建博客

2021-12-4|2023-1-22
tangly1024
tangly1024

NotionNext是什么?

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

建站效果

最快只需几分钟的操作,您将获得一个还不错的样的博客站👇:
NotionNext-搭建博客
NotionNext-搭建博客
点击下方链接查看更多网友案例:
 

为何使用NotionNext

1.Notion

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

2.实用的功能

🚀 更快的速度

NotionNext是基于craigaryNobelium项目二次开发,继承了Nobelium功能特点,拥有极快的打开速度:
notion image

🎨 更多的主题

目前已支持5种主题
访问下方地址以预览主题 (点击左下角按钮可切换主题)

🤟 更多功能

  • 文章分类、标签、归档页面
  • 手动切换夜间模式
  • 更多功能特性持续更新中。。
  • 支持多种评论插件
  • 自定义字体
 

快速开始

遵循以下步骤进行快速部署。
💡
除了Vercel云托管、您还可以选择在服务器本地部署导出静态网页Docker容器化CloudFlare部署等方案。

1.Fork此Github项目

点击下方链接快速fork

2.Vercel中导入您fork的项目

💡
Vercel是一个在线代码托管平台,对于个人使用,其免费版已经完全足够,因此您无需购买服务器即可搭建自己的网站。
点击下方链接,将您的github代码导入vercel。
1.使用Github账号登录Vercel
1.使用Github账号登录Vercel
2.点击导入您的NotionNext项目
2.点击导入您的NotionNext项目
 
💡
导入项目后先别急着点Deploy部署,我们需要添加一项配置来绑定您的Notion页面

3.绑定您的Notion页面

点击Environment Variables(环境变量),添加NOTION_PAGE_ID变量。
notion image

4.完成

点击Deploy按钮,静候两分钟即可完成。完成后点击Go to Dashboard访问控制台,在控制台右上角的Visit按钮访问您的站点。
1.点击Deploy进行自动部署
1.点击Deploy进行自动部署
2.在Vercel控制台中找到访问地址
2.在Vercel控制台中找到访问地址
🎉🎉🎉 自此站点部署已经完成 🎉🎉🎉
💡
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 image
修改Notion页的图标、标题、描述及封面图将分别对应同步站点的作者头像站点标题站点描述和首页的封面大图
图标支持自定义上传图片,建议图片文件不要过大,否则影响网页打开速度
notion image

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配置环境变量
notion image
b.在此修改环境变量
notion image
notion image
c.修改完环境变量,回到项目的Deployments下,将最新的部署记录Redeploy
notion image
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进行数据访问。
notion image
💡
想要更大程度地修改页面的样式与布局?请参考《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支持多种评论插件,可访问以下文章获得帮助:
NotionNext配置评论插件Twikoo | TANGLY's BLOG
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 .
NotionNext评论插件Cusdis/Giscus/Gitalk/Utterance | TANGLY's BLOG

4.绑定自己的域名

vercel有为你的站点提供一个 *.vercel.app 的域名,但vercel的官方域名在大陆被墙,所以推荐您绑定自己的域名。
参考以下文章,您可以快速地将自己的域名解析到Vercel站点:

项目更新

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

联系我们

Github
Github
  • 提交Issue以反馈BUG、功能建议、寻求帮助等。
微信交流群
微信交流群
  1. 添加微信 [tangly1024];
  1. 备注NotionNext;
  1. 非休息时间30min内拉您入群。
  1. 入群后请修改备注:昵称 - 城市 - 职业
 

此致

折腾博客多年,尝试过 WordPress、Hexo、Typecho、Ghost、Gridea、Hugo等博客系统,我觉得在写作过程中应当把重心放在养成内容持续输出的习惯;博客系统只是一个辅助,反复折腾搭建系统、维护服务器显得本末倒置。 Notion笔记本的出现,让“坚持笔记”和“博客分享”得到了完美结合,何乐而不为呢。
贫穷的本质 - 摆脱贫穷,从这里开始NotionNext如何部署在自己的服务器上
  • Twikoo
  • Waline
  • Giscus
  • Cusdis