Notion笔记搭建博客网站 - NotionNext

NotionNext是什么？

NotionNext是我在Github上开源的基于Next.js框架开发的博客生成器。目的是帮助写作爱好者们通过Notion笔记快速搭建一个独立站，从而专注于写作、而不需要操心网站的维护。

它将您的Notion笔记渲染成静态的博客页、并托管在Vercel云服务中。与Hexo静态博客相比较不同的是，您无需每次写好的文章都要推送到Github，编写与发布只在您的Notion笔记中完成。

依托于Notion强大的编辑功能，您可以随时随地撰写文章、记录你的创意与灵感，笔记会被自动同步至您的博客站点中。

它是一种几乎零成本的网站搭建方式，您只需要花费几十块钱购买域名的费用，就可以拥有一个独立的网站。

只需几分钟的操作，您将获得和我一样的博客网站：

NotionNext博客.png

折腾博客多年，尝试过 WordPress、Hexo、Typecho、Ghost、Gridea、Hugo等博客系统，个人认为对于博客系统选什么技术方案则是次要的、更重要的是坚持内容输出。Notion笔记本的出现，让“坚持笔记”和“博客输出”得到了完美结合，何乐而不为呢。

一、功能特点

NotionNext是基于craigary的Nobelium项目二次开发，继承了Nobelium功能特点，例如快速秒开：

网站性能.png

在此基础上，NotionNext增加了以下特性：

更多的功能

• 文章分类、标签、归档页面

• 首页大图、问候语

• 支持快速添加单页栏目

• 在Notion中换头像、换背景

更好的SEO

• 关联文章推荐

• 文章版权声明©️

• 网站h1、h2标题优化

• 自动生成sitemap.xml

阅读体验优化

• 文章目录、字数统计、阅读时间统计

• 阅读量访客量展示

• 手动切换夜间模式

交互优化

• 文章支持加锁,示例文章

• 文章分享

• 看板宠物

• 多种评论插件支持cusdis\giscus

五种主题切换

Next.png

预览Next

Medium.png

预览Medium

Hexo.png

预览Hexo

Fukasawa.png

预览Fukasawa

Example.png

预览Example

• 修改代码中的 /blog.config.js文件即可实现多主题之间的切换。

const BLOG = {
    ...
    THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['next','hexo',"fukasawa','medium']
    ...
}
// 可配置VERCEL环境变量NEXT_PUBLIC_THEME，或者修改上面的 'next' 字段即可。

• 甚至直接在网址后面加上 ?theme=next 也能实现不同主题的展示：https://tangly1024.com/article/notion-next?theme=next

二、快速开始

按照以下步骤后，在Vercel平台部署你的网站，之后您代码中的修改只要推送到github后、verxel都会自动重新部署。

0.Fork此Github项目：

• (可选) 用自己的图片替换 /public 文件夹里的 avatar.jpg、favicon.svg 和 favicon.ico

• 在 blog.config.js 配置网站的相关信息，例如站点地址，作者信息。

1.在Vercel中导入你刚fork的项目

Vercel选择Fork项目.png

2. 配置你的Notion数据

• 点击Environment Variables（环境变量），添加NOTION_PAGE_ID的值。

Vercel环境变量添加.png

• ***NOTION_PAGE_ID***这个参数从何而来？

1. 打开以下Notion页面，并复制到你的notion空间： (点击右上角Duplicate即可)

Duplicate右上角.png

2. 分享你的页面：点击 Share 开启 Share to web 选项

博客Share到网上.png

修改此页面的icon，可以影响站点中的作者头像 修改此页面的标题，可以影响站点标题 修改此页面的描述，可以影响站点描述

3. 在页面链接中取得PAGE_ID：

Notion_Page_ID.png

ctrl或cmd+L可以快速复制当前页面链接，PAGE_ID就是以下页面链接中的标红部分：

https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d

3.点击Deploy完成部署

不到两分钟时间即可部署完成。完成后点击Go to Dashboard访问控制台，点击控制台右上角Visit按钮访问你的站点。

点击Deploy即可完成部署

访问你的网站.png

Vercel控制台

3.绑定自己的域名

我的域名是由CloudFlare托管的，将域名解析到Vercel服务，可以参考以下文章:

4. 开启评论插件

访问Giscus插件主页，照著連結內的步驟就會給出該有的參數，再到blog.config.js設定好參數即可

三、项目更新

更新日志

请移步文档查看：https://docs.tangly1024.com/zh/changelog

如何获取最新项目

本项目在长期维护更新中，不时将修复一些bug和增加新特性：只要在您fork后的的NotionNext中点击Fetch upstream就能更新为最新的代码

更新项目

更新中遇到的问题

若出现下图的情况，无法直接Fetch and Merge，而需要进行Open pull request。

更新冲突

原因是：更新的版本中，我的文件与你仓库中的同个代码文件同时发生改动（称之为conficts代码冲突），最常见的冲突是同时修改了blog.config.js文件

这时候有两种解决方法：

1.点此按钮发起一个PR，然后将我的代码冲突合并到你的文件中。

2.若不熟悉PR流程，请保存你改动过的文件，然后重新fork一遍项目，再重新配置即可。

注意

如果你是用以下两种部署方式，将导致无法更新代码，请按照上述文档的步骤，先fork，再在Vercel中导入。

Docker 部署

Vercel一键部署

四、赞助本项目

NotionNext是完全免费开源的！如果项目对你有帮助，欢迎进行赞助，赞助的每笔钱都将让NotionNext变得更好

点此展开收款码

五、贡献代码

个人的力量很有限，期待大家提交代码，共同完善这个项目：

步骤

要为NotionNext做出贡献，请按照以下步骤操作：

1. 将存储库fork到您的GitHub帐户。

2. 将存储库clone到您的设备上（或使用Codespaces之类的东西）。

3. 在存储库中创建一个新分支。分支名按照改动的内容命名，建议是feature_或bug_开头。

4. 进行修改。

5. 提交修改并推送分支。

6. 从fork中的分支创建到NotionNextmain分支的PR。

该项目是用Next.js和yarn作为软件包管理器构建的。以下是您可以使用的一些命令：

• yarn：安装依赖

• yarn dev：开发，支持热加载

• yarn build：为生产编译打包

• yarn start：运行打包后的项目构建服务

****创建新主题****

如果您想创建一个新主题、并提交到NotionNext，请复制一个/themes/example文件夹在themes目录下，并修改文件夹的名称主题的名称。

添加本地化

如果您的语言尚未得到NotionNext的支持，欢迎贡献本地化！按照以下步骤添加新的本地化： 1. 在/lib/lang中复制一个en-US.js文件，并将文件命名为语言的代码（例如zh-CN.js）。 2. 开始翻译字符串。 3. 将您的语言配置添加到lang.js中。

提交代码

修复BUG、新的特性、新的主题，欢迎提交你的代码，为这个项目做贡献，期待你的PR。

六、问题反馈

请在Git中提交Issue来反馈诸如部署问题、软件建议、BUG，新的功等想法。

欢迎在项目论坛区开帖讨论、畅所欲言。另外，也欢迎你直接邮件联系我。

博客系统只是一个工具，坚持写点东西才是最重要的。