前言

1. 复制我的Notion模板

2. 复制我的Github源代码

3. 在Vercel中一键部署。

视频

NotionNext-Vercel部署_哔哩哔哩_bilibili

本视频简单演示如何用Notion搭建网站。2分钟部署NotionNext独立站，参考操作文档：https://docs.tangly1024.com/article/vercel-deploy-notion-nextNotion是一款强大的个人笔记软件；Nextjs是一个网页开发框架，用它将Notion笔记内容渲染成网页。NotionNext支持多种部署方式，Vercel云托管(无服务器部署)，或, 视频播放量 20895、弹幕量 0、点赞数 18、投硬币枚数 10、收藏人数 25、转发人数 8, 视频作者 催泪瓦斯弹, 作者简介 tangly，notionnext，相关视频：利用Notion和Vercel搭建个人博客|NotionNext|vercel部署|一键部署！，教你搭建自己的网盘/外链网盘/网盘搭建，当我把 1W+ 笔记从 Notion 导入到 Obsidian，搭建网站纯赚9百不用代码可以做，Noion 0-1数据库篇Database Basics，如何有效复盘？提效40%｜复盘 1 小时，快乐 1 星期，白菜价7元一年域名可托管到CF免实名不要信用卡保护隐私，Notion 0-1 入门篇 Navigation，Notion 0-1 数据库篇: Relation & Rollup，🔥GTD + Notion: 我用过最牛任务管理方法

https://www.bilibili.com/video/BV1fM4y1L7Qi

教程开始

一、创建您的Notion页面

复制模板

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

2. 点击下方链接，打开模板

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

获取页面ID

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

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

• 页面ID注意

👇以下我的共享链接，其中标红加粗下划线部分才是页面ID！要忽略?v=后面的英文数字。

https://sepia-client-7ed.notion.site/dbd4cacd3dbe465d9119ec2dc02ccb5e?v=1238267d7ffb4e899d29cb1399ccbffe&pvs=4

👇我的页面ID 是 dbd4cacd3dbe465d9119ec2dc02ccb5e

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

 

二、复制源代码

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

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

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

配置页面ID并部署

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

属性名称 Name	属性值 Valve	ㅤ
NOTION_PAGE_ID	dbd4cacd3dbe465d9119ec2dc02ccb5e	ㅤ



左侧填写 NOTION_PAGE_ID ， 右侧填写 页面ID的值
填写后要点击右边的Add按钮确认添加

四、完成🎉🎉🎉

注意事项

💡NotionNext会实时抓取Notion笔记内容 (由于缓存和网络延迟，最多刷新两次页面即可看到同步结果)。