Vercel部署NotionNext

前言

1. 复制我的Notion模板

2. 复制我的Github源代码

3. 在Vercel中一键部署

视频

• 另外有Youtube网友也分享了部署的过程，可以参考
将您的Notion笔记变为博客站，所有文章的编写发布都只在您的Notion笔记中完成，小白也能快速地搭建自己的网站
首先，借助NotionNext建站，所有文章的编写发布都只在您的Notion笔记中完成，Notion笔记支持在电脑与手机上随时访问；因此您无需登录任何第三方平台、或打开WordPress后台、或者通过写Git上传等繁琐的方式来发布文章。 其次，Notion 是一款将笔记、在线文档、知识库和任务管理无缝整合的「All-In-One」应用，它也是我一直在用、并且极力推荐的一款笔记软件 借助Notion灵活的排版以及便捷的写作体验，您不需要专门学习Markdown语法，也可以轻松随时随地写出调理清晰的文章，以便记录您的创意与灵感。站点数据完全保存在Notion笔记当中，您可以随时导出本地进行备份。 Notion AI Notion集成了Open AI，能大大提升您的写作效率，这也是Notion作为笔记工具的理由之一。 最后，NotionNext 只是一个将您的笔记转成网站的小工具，并不是一个繁重的系统，之后还可以选择其他的工具和软件渲染您的笔记。 =============================== 🔔订阅我的频道，第一时间通知您最新的更新!🔔 👉Subscribe: https://www.youtube.com/@maple_tech =============================== chapter章节： 00:00 介绍 00:30 安装NotionNext 01:30 配置Github 01:48 配置Vercel 03:40 绑定自己的域名 04:35 把域名配置到cloudflare管理 06:32 效果演示 =============================== 相关资源： https://github.com/tangly1024/NotionNext https://www.namesilo.com/ =============================== 🔽 与我联系 Twitter: https://twitter.com/MapleNext Telegram: https://t.me/+1UCf0K0yi4tiMDEx =============================== #notion #博客 #建站

https://www.youtube.com/watch?v=zWlPyDQCkrk

零基础入门NotionNext网站搭建、个人博客、网站快速搭建部署教程 | 无需编程教学 | All in one | 404实验室
订阅频道▶https://www.youtube.com/channel/UCm84OFeAJCPqerpjCFOrVwg?sub_confirmation=1 博客▶https://404lab.cc/ TG群组▶https://bit.ly/404Lab 海豚湾▶https://bit.ly/3Y2DgBZ 接码平台▶https://bit.ly/3ryxig9

https://www.youtube.com/watch?v=AbI70b9KfXE

一、创建您的Notion页面

复制模板

1. 请先注册登陆您的Notion账号。

2. 点击下方链接，打开模板
Notion Blog
一个NotionNext搭建的博客

https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5

3. 在右上角点击Duplicate复制模板，如图所示。点击后会将这个博客数据模板复制到您的笔记空间中。

获取页面ID

1. 在Notion笔记中：在页面右上角的菜单栏中，依次点击Share→Published→Share To Web，开启页面分享，获取共享链接
• 如下图所示，点击右上角 Share ，在弹出窗口中点击 Publish → Share to web (点击展开截图)

2. 复制页面ID
页面ID在您的共享链接中、域名中间的一串32位字母与数字。
• 如下图所示：

• 页面ID注意
❓
👇以下我的共享链接，其中标红加粗下划线部分才是页面ID！要忽略?v=后面的英文数字。
https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d
👇我的页面ID 是 02ab3b8678004aa69e9e415905ef32a5
⚠️
新版的notion中，页面ID的格式可能会有一点不同，例如会把页面的标题也带上： https://www.notion.so/tanghh/Today-261c36d269a74acd97682af86d7bc9a0?pvs=4 但不变的是，页面url中的那串连续32为的字符串就是id。
❓
请将您的页面ID记录下来，在步骤三会用到。

二、复制源代码

1. 请先注册并登陆Github账号，

2. 仅需点击下方链接，即可一键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部署

准备账号

导入代码

1. 点击下方创建新项目
New Project - Vercel
To deploy a new Project, import an existing Git Repository or get started with one of our Templates.
https://vercel.com/new

2. 在代码仓库列表中选择导入NotionNext



💡
注意：这里步骤放慢些，不要急着点击页面上的Deploy按钮，先看下方教程。

配置页面ID并部署

1. 点击Environment Variables（环境变量），并添加一个属性名称为NOTION_PAGE_ID，值为步骤一获取的页面ID。
例如，我的页面ID是：02ab3b8678004aa69e9e415905ef32a5，则配置如下：

属性名称 Name	属性值 Valve
NOTION_PAGE_ID	02ab3b8678004aa69e9e415905ef32a5



填写后要点击右边的Add按钮确认添加

2. 点击Deploy按钮，静候两分钟等待部署。

四、完成🎉🎉🎉

1. 在部署完成页面，点击Go to Dashboard访问控制台

2. 在控制台右上角的Visit按钮访问您的站点。或在DOMAINS中获取您的网站地址

注意事项

⚠️

若您的站点始终无法同步笔记的数据，请再次检查上面的步骤，或者干脆重来一遍： 1. 在Notion中检查您的NOTION_PAGE_ID 格式是否正确、并已开起页面分享。 2. Vercel后台环境变量中NOTION_PAGE_ID是否配置，并重新配置后尝试Redploy。 如何检查Vercel后台环境变量配置：

如何重新部署

自定义您的站点

NotionNext-快速免费搭建网站 | NotionNext文档

无需服务器、即使是小白也能几分钟搭建自己的独立博客站～如果你在使用Notion这款神级笔记本的话，不妨来试试顺手建个网站🤣🤣🤣，这是一款基于NotionAPI的博客系统。

https://docs.tangly1024.com/about