⚠️ 以下部分内容可能已过期。
NotionNext是Tangly1024开源在GitHub的博客生成器。目的是帮助写作爱好者们通过Notion笔记免费、快速搭建独立站，从而专注于写作、不需要操心网站的维护。
只需要几分钟的时间，您就可以获得一个美观的博客界面👇：
Tangly1024一直在对这个开源项目进行维护，从2021年下半年截至本篇发稿时已经至少维护了35个版本，可见作者的用心。
Table of contents
Open Table of contents
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确认部署。系统将自动部署完成，约 2 mins。
-
进入到
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页面中更改您的页面标题、页面描述、页面图标，相对应的网站名称、网站描述、网站图标会自动修改。
自定义域名
- 如果您还没有购买域名，推荐您到腾讯云购买，如果您是第一次注册域名还可以享受新手福利。
- 在腾讯云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，进行修改即可。