NotionNext帮助手册

新版的notion中，页面ID的格式可能会有一点不同，例如会把页面的标题也带上： https://www.notion.so/tanghh/Today-261c36d269a74acd97682af86d7bc9a0?pvs=4 但不变的是，页面 url 中的那串连续 32 位的字符串就是 id。

❓

请将您的页面ID记录下来，在步骤三会用到。

二、复制源代码

💡

注意，请不要使用qq邮箱等国内邮箱，尽量使用hotmail或gmail等国际邮箱，否则下一步登陆vercel后会提示账号被封禁。

请先注册并登陆Github账号，

仅需点击下方链接，即可一键Fork(复刻)项目。

Build software better, together

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/tangly1024/NotionNext/fork

三、Vercel部署

准备账号

注册登陆Vercel ，这里推荐选择Github账号登录。

注册vercel账号可能遇到的问题

如何配置站点

Mon, 13 May 2024 00:00:00 GMT

按照前面的教程完成部署后，你可以随时调整站点配置，例如切换主题、开启音乐组件、开启评论插件、开启动画特效、修改网站字体等。

NotionNext 的配置方式主要有三种：

在Notion笔记中修改

Github修改配置代码

Vercel环境变量添加配置

下面逐一说明。

1. 在Notion中修改

网站的图标、标题、描述和封面图，会直接读取你的 Notion 模板内容。

图标①、标题②、描述③及封面图④ 分别对应站点的作者头像、站点标题站点描述和封面大图。

💡

在 4.1 之前的版本（1.0 - 4.0）中，很多配置需要在配置文件或环境变量中修改，用户通常要打开编辑器、登录 GitHub，甚至进入 Vercel 后台调整环境变量。从 4.1 版本开始，NotionNext 支持在 Notion 中创建 Config 文档，并直接在 Notion 中维护站点配置。

使用Notion-Config

💡

在 Notion 中编辑一个 Config 文档，就可以实时同步站点配置、功能开关等内容，无需登录 GitHub、Vercel 或服务器后台。

如何使用？

在您起初复制的这份数据库模板中，我后续更新了一个 type 为 Config 的文档，文档中包含了一个数据表格，格式如下：

配置中心-Config

配置中心的内置表格

配置中心使用说明

仅 V4.1.0 之后的版本中支持该配置页面

此处配置的优先级最高，它将覆盖Vercel环境变量、覆盖blog.config.js。

您可以在blog.config.js以及各个主题的config.js中找到支持的配置，在4.8.0之后的版本，为了减少blog.config.js的体积，不同模块的配置被拆分到了 /conf/xx.js 中

各类配置的参考路径： https://github.com/tangly1024/NotionNext/tree/main/conf

主题支持的配置内容参考路径： https://github.com/tangly1024/NotionNext/blob/main/themes/example/config.js

NOTION_PAGE_ID 必须在你的环境变量或代码中配置，不支持Notion_Config文档配置

配置中心的表格中我预置了几个常用配置，您可以按照自己的需求手动添加更多配置

点击右上角的new或者左侧加号+都可以新增一行配置，然后填入对应的“配置名”和“配置值”

强烈建议添加的配置

AUTHOR，作者名

LINK，你的站点网址

CONTACT_EMAIL , 你的联系邮箱，更多联系方式，在此查看配置方式： https://github.com/tangly1024/NotionNext/blob/main/conf/contact.config.js

（务必配置你自己的联系方式！）

表格字段说明

表头字段	说明
启用	此项勾选后，配置会同步到NotionNext站点中
配置名	参阅环境变量的变量名，例如 `AUTHOR`
配置值	输入您的值例如作者名 `tangly1024` ，或者 `true` / `false`
配置备注	仅作为备忘说明使用
配置附件	如果配置的值是一张图片，可以在这里上传

支持主题配置与复杂格式

基本上所有的主题配置项都可以使用NOTION_CONFIG。但需要注意的是，如果配置的内容是一个数组或者对象的话，需要将NOTION_CONFIG中的内容转成双引号的json格式，否则会无法读取，例如HEO主题下支持四项配置：

这四种类型在Notion_Config中的参考配置如下,其中对象和数组都转成了json格式：

配置名	配置值
HEO_HOME_BANNER_ENABLE	true
HEO_SITE_CREATE_TIME	test
HEO_HERO_CATEGORY_1	{ "title": "必看精选", "url": "/tag/必看精选" }
HEO_NOTICE_BAR	[ { "title": "测试消息1", "url": "https: //blog.tangly1024.com" }, { "title": "测试消息2", "url": "https: //docs.tangly1024.com" } ]

配置后的效果示例：

CONFIG-TABLE | Notion

Built with Notion, the all-in-one connected workspace with publishing capabilities.

https://www.notion.so/tanghh/1e9b9ee182c6474782b55cd3a2e1c396?v=a573d986661d402aac46970d8f20c083&pvs=4

如何将代码中的Config转换成JSON？

如何将config中的对象转成json可以借助AI，或者一些在线json格式化工具。

老用户升级

对于新用户（2024年起）：您复制的数据库模板中已经默认自带了此配置页面。

老用户升级（2023年及以前）：您可以复制下面链接中的《配置中心》文档，即可支持NotionConfig功能。

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5

单击此文档左侧的六个点即可选中，按下Ctrl+C复制文档。然后在您的Notion模板页面中按下Ctrl+V粘贴即可。

2. 修改代码

💡

重要：站点的大部分配置都可以在您代码仓库的 blog.config.js 文件中找到；您只需修改对应的配置，Vercel将自动部署您Github仓库中的最新代码。

💡

若您更新到了NotionNext4.1之后的版本，推荐您直接在Notion-Config文件中添加配置，它将覆盖blog.config.js中的配置。

配置方法：在您的github中找到此文件，点击右上角的编辑按钮，即可修改参数。

💡

每次修改代码后，Vercel自动创建一个部署任务以打包部署您的最新代码，且每次部署任务都有唯一的网址提供预览。

若编译成功：您的线上域名会更新为此次部署的最新版本。

若部署失败：例如代码格式错误、拼写错误，则这次部署则会作废，线上原先运行中的旧版网站不受任何影响。您可以查看后台部署日志找到错误原因。

附-如何获取部署日志

Waline

Thu, 29 Jun 2023 00:00:00 GMT

👉

注意，本文中介绍的 LeanCloud 即将停止服务，因此文档已经过期，请参考Waline 官方文档部署

Vercel 部署

欢迎使用 Waline，只需几个步骤，你就可以在你的网站中启用 Waline 提供评论与浏览量服务。部署服务端 VercelVercel 点击上方按钮，跳转至 Vercel 进行 Server 端部署。注如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。输入一个你喜欢的 Vercel 项目名称并点击 Cr...

https://waline.js.org/guide/deploy/vercel.html#%E9%83%A8%E7%BD%B2%E6%9C%8D%E5%8A%A1%E7%AB%AF

1. 注册LeanCloud

Valine和Waline两个插件均要借助LeanCloud提供的云函数，云数据存储等功能，对于普通开发者来说免费版已经足够使用。

😀

若您使用的是Zeabur的部署方案，则不需要额外注册一个LeanCloud。

获取APP ID 和 APP Key

1.请先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用：

CloudFlarePage静态部署

Mon, 13 Mar 2023 00:00:00 GMT

前言

💡

CloudFlare方案适用于站点访问量大，而文章更新不频繁的用户。目前是我个人在用的方案。

参考haixin的文章《NotionNext建站-cloudflare版》，这里做了优化

部署效果预览

Notion Blog | 一个NotionNext搭建的博客

一个NotionNext搭建的博客

https://cloudflare.tangly1024.com/

❓

CloudFlare版本是静态导出的，不支持实时更新文章，每次更改Notion内容后请手动部署站点。若需要实时动态更新请使用Vercel\Netlify\Zeabur\VPS部署方案。

💡

CloudFlare部署方案，以及其他所有使用静态导出的方案，默认都不支持NotionNext自带的搜索功能，必须集成Algolia插件才能实现全文搜索。详情参考Algolia全文搜索插件获取帮助:

Algolia搜索引擎 | NotionNext帮助手册

NotionNext如何配置Algolia

https://docs.tangly1024.com/article/notion-next-algolia

开始

访问CloudFlarePage

Cloudflare Pages

Build your next application with Cloudflare Pages

https://pages.cloudflare.com/

创建项目

⚠️

注意，2026年新版的Cloudflare 默认引导部署Workers，但是NotionNext目前的代码不支持Workers动态。暂时还是选择使用Pages静态部署：

部署页面底部有个小小的Pages

直接连接git

导入项目

选择分支

分支选择 deploy/cloudflare-support ；

在4.0.9之后的版本中，可以直接使用main分支部署，无需切换分支

配置参数

来到页面下方的构建设置：

构建命令填

环境变量

配置效果如下

配置说明，新版本的NotionNext中，NODE_VERSION要更新为20版本。

变量名称	值
NODE_VERSION	20
VERCEL_ENV	production
NOTION_PAGE_ID	{您的Notion页面id}

最后点击保存并部署即可。

完成部署

页面中心会显示您的访问域名

FAQ

部署失败？如果你的构建日志中出现：

可能是Cloudflare升级环境导致不兼容，解决方法：降级为旧版构建环境，然后点击重试

需要帮助？

如果你的部署异常，没有出现一个绿色的勾，通常是代码修改异常或者配置错误导致，点击右侧的查看详情，获取详细的部署日志：

在构建日志这一栏可以看到所有详细的错误信息，根据错误日志进行排查问题，如果无法自行排查，可以将日志复制或截图，寻求他人帮助。

CloudFlarePage如何绑定自定义域名？

项目主页找到自定义域，找到下方设置自定义域

填写域名并继续

按照要求在域名服务商后台配置一个CNAME转发

CNAME转发示例

点击下方的激活域，由于我使用的域名商本身就是cloudflare，故此步骤只需几秒即可完成验证。

Hooks 触发部署

CloudFlare 支持和Vercel 类似的hooks 功能，后台生成一个调用地址，即可触发站点重新部署，用于更新文件和配置等。

在项目的设置页面，构建栏目下的部署挂钩。点击加号➕新增一个hooks即可

创建挂钩时，要指定你部署的github代码分支，以及随意起一个挂钩名称；

创建后会生成一个webhook链接，点击复制链接保存使用。

需要注意，CloudFlare的hook 和 Vercel 不一样：

Vercel webhook 👉 GET 也行（在浏览器地址栏输入Webhook网址即可简单触发）

Cloudflare Deploy Hook 👉 只允许 POST（更安全）

浏览器访问会提示 method_not_allowed

👉 防止被随便浏览器点一下就触发部署

Windows/Mac/Linux可以用终端命令行输入以下命令触发

当页面显示如下内容，说明已经触发了重新部署

借助AI开发NotionNext

Fri, 25 Apr 2025 00:00:00 GMT

前言

如果不会任何编程语言能否定制一个新主题？

结论是可以的，但是会有些难，相当于完全没有某个行业的客户积累与产品积累，却要一下子开一家这个行业的公司。但是如果你擅长通过AI进行自主学习与挖掘的话，会有一定的帮助。

云环境

建议先阅读

NotionNext开发先导这篇文章，其中介绍了开发NotionNext项目可能需要具备的一些基础知识。

GitHub Codespaces

GitHub 本身自带 Codespaces 云环境，简单来说，在您的 GitHub 仓库中，点击 Code、再点击 Create codespace 打开云端开发环境；也可在加号处新建一个云开发空间：

在 Codespace 云空间中，界面与本地使用的 VS Code 相近。点击上方右侧的 Copilot 图标即可与 AI 聊天。

Copilot会实时关注您当前打开的文件。通过对话，可以实现对文件的修改或建议。

Google Firebase Studio

Google推出了FirebaseStudio，支持将您的github项目导入这个云环境进行开发，其原理和Github的Codespace差不多。

不过FirebaseStudio似乎不能汉化界面，会有一定使用难度。另一方面gemini的ai用量不像copilot专为编程设计、后者有大量的github、vscode用户群体，因此能力有限，问几句话就歇菜了。

因此我还是建议使用Codespace作为云开发环境，不但与github的集成更好，同时Copilot的AI性能更强大。

使用Firebase进行AI开发演示

点击下方链接，访问并注册Firebase。

https://studio.firebase.google.com/

来到项目首页，选择ImportRepo

输入Github空间即可

Firebase会自动导入项目代码并进行环境安装。

安装完成后代码显示如下

主题定制

这里用firebase示范，codespace的使用方法基本一致。

复制一个主题文件夹

不建议直接修改原先的主题，否则后续如果我也同步修改了这个主题文件夹，在更新的过程可能会产生大量的冲突。

在themes 目录，找到你较喜欢的主题，或者和你预期的新主题结构比较类似的主题，例如example主题文件夹。各主题的补充说明见仓库 docs/themes（如 Fuwari、Claude 等）。点击右键copy复制这个文件夹。

然后右键点击themes文件夹，选择paste粘贴至此。

粘贴后会出现一个新的文件夹，我刚复制的文件夹是example 因此这里粘贴后的文件夹名字为example copy

重命名主题

我希望新主题名为dream，因此将example copy文件夹重命名，右键点击文件夹，选择rename，并且输入新的文件夹名称，按下回车确认即可。

修改主题内容

双击打开dream / index.js 文件，并且用附件形式引入这个文件：点击gemini聊天窗口下的附件按钮。选择file

在弹出的文件选择框中，选择当前的index.js文件。

如果是用Copilots的话可以省去此步骤

然后给gemini发一句话：

这个主题的顶部导航栏在哪，是哪个文件，并且在这个导航栏中做一个修改，在导航栏的左侧加一行蓝色文字，内容是“新主题dream”创建成功。文件应该在/themes/dream/components目录下

紧接着ai会告诉你所有的内容，然后会给出一份代码修改建议：

点击建议框右侧的Review changes可以审视修改的内容，点击左侧的Updates file，即可自动修改文件。

运行启动项目

启动项目之前可以先将当前主题切换为您刚创建的dream主题。最简单的方法可以是修改blog.config.js文件

在控制台输入 npm run dev 即可运行项目

运行启动后，按住键盘Ctrl键再鼠标点击控制台打印处的http://locahost:3000 即可打开实时调试页面：

firebase会自动分配一个临时网址用于访问调试页面。

打开后即可看到刚刚的修改已经生效了，接下来您的所有代码修改都会实时反映在这个页面上。

我们可以切换到刚刚的编辑页面手动修改内容：

然后再看页面就已经生效了

接下来就是不停的和AI对话，告诉他需要改什么，给出结果，然后你点击更新文件即可。

保存代码

所有的代码需要提交到git仓库才能被保存，这里涉及到git的使用操作，git本身是为大型多人团队协作设计、其功能强大，需要一定的学习。我这里做一个最简单的提交代码的演示。

点击左侧的Source Control图标

这里列出了所有本次的更改内容，你需要将确定要保存的修改内容进行确认。

鼠标指向每个文件的右侧都会浮现一个加号，点击表示此文件需要保存到git仓库中。

点击后的文件会显示再Staged Changes这个分栏下：

可以点击Changes右侧的加号，一次性确认所有文件。

要提交保存的文件确认后，在上方的Message栏中填写这次提交改动的功能说明，这是必填项，便于日后回查此次提交的内容。例如我在这里输入: “创建了新的主题dream”

填写完说明内容后，点击下方的commit按钮提交，提交后下方列表就变空了，因为已经没有待确认和待提交的内容，所以这里就没有可以显示的内容。

我们注意到这里有一个按钮，如果你是创建了一个新的git分支会显示上面的Publish branch按钮，如果是在原有的分支例如main分支上进行开发，那么这里会显示 sync changes ，表示与你的github云端仓库需要进行同步。

这里我们点击它，将内容同步到github云端。

授权Github

如果用的是github提供的codespace环境则无需下列步骤。

如果这里你是首次同步的话，会提示你要获得github插件的许可，点击同意即可；

然后会得到一个授权码，点击copy $ continue to github

在自动跳转到的页面中粘贴或输入验证码。

然后再在二次确认页面点击 Authorize Visual Studio Code即可。

如果上述步骤走不通的话，firebase也支持用github的token进行提交验证，这是另一种可选的授权方案，不过基本用不到，此处不做展开。

代码提交同步完成

此时再看你的SourceControl 页面，已经没有待提交、待审核、和带同步的任务了。

而在github项目中能看到刚刚的提交记录说明，和对应的文件内容

接下来vercel将会自动识别代码的修改并自动部署您的站点。

以上就是一个完整的，借助云环境+AI开发一个小功能，并同步到Github的流程。

结尾

需要注意的是，AI和云环境只是一个效率工具，本质是帮不懂的人快速入门学习，帮住本来就懂的人节省开发时间。因此要想彻底掌握开发，还需要结合学习NotionNext所使用的框架技术和文件目录的规范结构。

将来再过几年，等AI-Agent智能体普及之后，就完全不需要上面这么复杂的步骤了，到时候只要负责发布命令，如何实现都是智能体应该考虑的。

EdgeOne部署NotionNext

Wed, 13 Nov 2024 00:00:00 GMT

⚠️

腾讯云推出的EdgeOne支持部署Nextjs等主流前端框架项目，目前只支持静态导出，不支持动态站点，感兴趣的话可以体验一下。

什么是EdgeOne？

边缘安全加速平台EO（Tencent Cloud EdgeOne，下文简称为EdgeOne）基于腾讯边缘计算节点提供加速和安全的解决方案，为电商与零售、金融服务、内容资讯与游戏等行业保驾护航，提升用户体验。支持全网域名解析，实现统一管理，域名解析记录可添加。添加域名后，DNS 解析自动导入该域名下的所有主机记录。

参考文章：

腾讯推出免费部署网站服务，可搭建个人博客：EdgeOne Pages

https://mp.weixin.qq.com/s/LdE-bNPttF6d8sDEvsgKuw

注册开通

使用「EdgeOne Pages」你需要准备 Google 和 Github 的账号，然后访问 EdgeOne 网站进行注册账号。

点击注册：https://edgeone.ai/register 。注册完成后跳转到腾讯云后台，点击“立即开通”从而开启OpenEdge功能。

关联Github导入项目

开通Pages后，页面提示板顶绑定 GitHub

按照步骤进行授权

选择允许访问的代码项目，这里我选择允许访问所有仓库。（您也可以指定只访问个别仓库）

导入项目

选择NotionNext项目

配置编译选项

系统会自动检测项目的框架，并且预填写构建命令。

这里我们要注意三处地方改动：

构建命令请使用静态导出：yarn export（不要再用 yarn build 作为最终构建命令）。若托管面板模板仍显示 npm run build / npm run export，请按仓库习惯改为 Yarn。前者是动态站点，后者是静态。

项目名称要修改一下，名称长度必须为5到63个字符，只能包含小写字母、数字和连字符。

环境变量中添加您的NOTION_PAGE_ID

修改后配置如下图：

确认配置后就可以点击“开始部署”按钮，进行部署了：

等待部署

过程需要几分钟不等。

部署完成

点击右上角的预览按钮，获取临时访问链接：

点击访问；

修改配置与重新部署

您可以随时返回到项目设置中，添加或修改环境变量，例如修改主题.

然后在构建部署栏目中，点击更多，并重新部署项目

绑定自定义域名

项目设置中，点击添加自定义域名

输入您需要绑定的域名

按照要求在您的域名服务商后台添加一条CNAME解析即可

例如系统分配给我的CNAME是 eo → eo.tangly1024.com.dns.edgeone.app. 。

我的域名托管在CloudFlare，因此我用CloudFlare来示例如何配置CNAME。

点击DNS管理，添加记录，类型是CNAME，名称是eo，目标是我的eo.tangly1024.com.dns.edgeone.app. （注意这里填写你的，每个人不一样），然后将代理状态的橙色云暂时关闭。最后点击保存。

然后点击验证：

系统会检查您的DNS解析状态

验证成功：

然后系统会自动验证证书大概2分钟左右能完成。

这里其实可以不用等它，只要DNS记录验证成功，就可以直接访问站点了

访问站点

Tangly的学习笔记 | 取势、明道、优术

取势、明道、优术

https://eo.tangly1024.com/

EdgeOne在使用的过程中还有一些小BUG，例如部署后配置没有生效，毕竟是比较初版的功能，后面更新应该会好。

最后，当站点都启动完成后，可以回到CloudFlare后台，开启橙色的代理状态，从而激活CloudFlare的缓存、全球CDN加速等功能。