Date published
July 17, 2022
Category
Technology
Writen by
樹程Leslie
NotionNext是Tangly1024开源在Github的博客生成器。目的是帮助写作爱好者们通过Notion笔记免费、快速搭建独立站，从而专注于写作、不需要操心网站的维护。
只需要几分钟的时间，您就可以获得一个美观的博客界面👇：
Tangly1024一直在对这个开源项目进行维护，从2021年下半年截至本篇发稿时已经至少维护了35个版本，可见作者的用心。
NotionNext是什么
NotionNext将您的Notion笔记渲染成静态博客、托管在Vercel云服务中。与Hexo静态博客相比较不同的是，NotionNext会自动同步您的笔记至博客站点，而无需每次写好文章都要推送到Github。
所有的博文和页面的编写及发布都只在您的Notion笔记中完成**。**依托于Notion强大的编辑功能，您可以随时随地撰写文章、记录创意与灵感。
NotionNext是基于craigary的Nobelium项目二次开发，继承了Nobelium功能特点，例如快速秒开、设备全配适等。
NotionNext的特色
🚀 秒开，设备全适配
- 快速的页面渲染和响应式设计
- 高效编译器的快速静态页面生成
🤖 自动，无需重新部署
- 部署在免费、高速的 Vercel 平台
- 支持增量式更新，更新文章后无需重复部署
🚙 全功能，完全不操心
- 评论、搜索、标签、分类
- 订阅、网站统计
- 本地化多语言
- 服务端渲染、优秀的SEO
🎨 美观，轻松自定义
- 丰富的配置项，更支持多语言
- 使用 Tailwind CSS，轻松实现二次开发
🙉 更多的功能
- 文章分类、标签、归档页面
- 首页大图、问候语
- 支持快速添加单页栏目
- 在Notion中换头像、换背景
👀 阅读体验优化
- 文章目录、字数统计、阅读时间统计
- 阅读量访客量展示
- 手动切换夜间模式
📶 更好的SEO
- 文章关联推荐
- 文章版权声明©️
- 网站h1、h2标题优化
- 自动生成sitemap.xml
👭 交互优化
🎨 支持多主题切换
开始部署
NotionNext的部署方式有很多，在这里我推荐通过Vercel一键部署的方式，简便易行。
前期准备
- 注册Github账号
- 打开这个 Notion 模板后点击页面右上方的
Duplicate将这个页面拷贝到您的Notion中，并打开Share to web。
快速部署
- 点击快速部署链接
- 选择用
Github方式创建仓库，然后点击create确认部署。系统将自动部署完成，约2mins。 - 进入到
Vercel的notion-next项目中，选择Settings，点击Enviroment Variables，填入环境变量。NAME中输入NOTION_PAGE_ID，VALUE中填写前期准备第二步中Notion页面分享链接中site/之后，?之前的三十二位编码（e.g https://xxx.notion.site/80c301f9f7264a4aa5dfc1f8b9841222?v=37fe9de07b164c27a9cc3a7c5614a7c4）。输入完后点击Add。 - 进入到您的
Github仓库，找到您自己的NotionNext项目，打开blog.config.js，按照文件中的注释开始编辑您的网站信息。 - 在Notion页面中更改您的页面标题、页面描述、页面图标，相对应的网站名称、网站描述、网站图标会自动修改。
第5行，网站地址先使用您在准备工作第二步中的Notion页面地址
第20行，可以修改主题
第62-79行，需要到https://giscus.app/中设定，设定完成后把数值相应填写即可
自定义域名
- 如果您还没有购买域名，推荐您到腾讯云购买，如果您是第一次注册域名还可以享受新手福利。
- 在腾讯云DNSPod中为您的域名添加解析：
- 主机记录
@，记录类型A，记录值76.76.21.21 - 主机记录
www，记录类型CNAME，记录值cname.vercel-dns.com - 进入到
Vercel中的notion-next项目，点击Setting，选择Domains，将您的域名输入后添加即可。 - 进入到您的
Github仓库，找到您自己的NotionNext项目，打开blog.config.js，将第5行的域名改为您自己的域名。
修改Hexo主题封面文字
进入到您的Github仓库，找到您自己的NotionNext项目，在themes文件夹中打开config_hexo.js，进行修改即可。
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可