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_IDhttps://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
.png?table=block&id=44e11db6-0deb-4c86-9f51-7e2d66fdbd02&cache=v2)
Github
- 提交Issue以反馈BUG、功能建议、寻求帮助等。
- Discussions开帖讨论，畅所欲言。
微信交流群
- 添加微信 [tangly1024]；
- 备注NotionNext；
- 非休息时间30min内拉您入群。
- 入群后请修改备注：昵称 - 城市 - 职业
此致
折腾博客多年，尝试过 WordPress、Hexo、Typecho、Ghost、Gridea、Hugo等博客系统，我觉得在写作过程中应当把重心放在养成内容持续输出的习惯；博客系统只是一个辅助，反复折腾搭建系统、维护服务器显得本末倒置。 Notion笔记本的出现，让“坚持笔记”和“博客分享”得到了完美结合，何乐而不为呢。