✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨👦👦 联系方式
🤝 购买服务
Vercel部署NotionNext
category
tags
type
status
slug
date
password
Last edited time
Jun 17, 2024 02:34 AM
summary
icon
前言
遵循此教程您将在Vercel上免费搭建一个NotionNext博客。
NotionNext是一个完全开源免费的建站脚本,将您的Notion笔记实时渲染成博客。
Vercel是一个来自国外的在线脚本托管平台,对于个人使用,其免费版已经完全足够,因此您无需购买服务器即可搭建自己的网站。
部署站点只需三步,分别是:
- 复制我的Notion模板
- 复制我的Github源代码
- 在Vercel中一键部署
部署文档已经过大量网友实践验证,如您实在无法完成独立部署,可以考虑向我们求助。
视频
我录了一个1分38秒的简略视频,演示了整个部署过程,最终以文档为主。
- 另外有Youtube网友也分享了部署的过程,可以参考
一、创建您的Notion页面
复制模板
- 请先注册登陆您的Notion账号。
- 点击下方链接,打开模板
- 在右上角点击Duplicate复制模板,如图所示。点击后会将这个博客数据模板复制到您的笔记空间中。
![点击右上角的Duplicate,将模板复制到您的笔记中](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F35421745-2316-47bf-a6ce-7cd1aeb3deb3%2FUntitled.png?table=block&id=15646cce-2570-46d0-8c70-c56832db302b&t=15646cce-2570-46d0-8c70-c56832db302b&width=624&cache=v2)
获取页面ID
- 在Notion笔记中:在页面右上角的菜单栏中,依次点击Share→Published→Share To Web,开启页面分享,获取共享链接
- 如下图所示,点击右上角 Share ,在弹出窗口中点击 Publish → Share to web (点击展开截图)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1fc010fe-32a5-4934-947b-fb1e076735bd%2FUntitled.png?table=block&id=586d2451-f192-449f-93d0-b7ce35e1e13d&t=586d2451-f192-449f-93d0-b7ce35e1e13d&width=528&cache=v2)
- 复制页面ID
- 如下图所示:
- 页面ID注意
页面ID在您的共享链接中、域名中间的一串32位字母与数字。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6fd734be-198d-4764-8eb4-2a1755c5020b%2FUntitled.png?table=block&id=7ae734b0-fe29-43ba-a715-4aa3adea7c57&t=7ae734b0-fe29-43ba-a715-4aa3adea7c57&width=576&cache=v2)
👇以下我的共享链接,其中标红加粗下划线部分才是页面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记录下来,在步骤三会用到。
二、复制源代码
注意,请不要使用qq邮箱等国内邮箱,尽量使用hotmail或gmail等国际邮箱,否则下一步登陆vercel后会提示账号被封禁。
- 请先注册并登陆Github账号,
- 仅需点击下方链接,即可一键Fork(复刻)项目。
三、Vercel部署
准备账号
注册登陆Vercel ,这里推荐选择Github账号登录。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff7a4a831-4644-416c-911d-0c3cbc8216fb%2FUntitled.png?table=block&id=2585e4cb-6436-4e74-aadf-d58fee9988d1&t=2585e4cb-6436-4e74-aadf-d58fee9988d1&width=624&cache=v2)
注册vercel账号可能遇到的问题
若注册时提示
Error:This user account is blocked.Contact [email protected] for more information.
这是由于
Vercel
不支持大部分国内邮箱。可以将 github
账号主邮箱改为 Gmail
邮箱。但是根据群友反应,将
github
账号主邮箱切换为 Gmail
以后,Vercel
又会提示需要使用手机号码验证。然而 github
并没有提供手机号码绑定的内容。综上,建议一开始注册
github
账号时就使用 Gmail
等国外邮箱进行注册。- 国内访问
Gmail
的方案:
- 直接使用 QQ 邮箱手机版,它提供
Gmail
的访问路线,可以直接注册并使用。使用Ghelper
等浏览器插件访问。详情可以参考这篇文章:玩转 Microsoft-Edge
- 若是执着于当前
Github
账号,可以参考以下方案进行尝试:
- 完成了
Gmail
等国外邮箱的注册,打开 github-> 头像 ->settings->Emails>Add email address, 并完成邮箱验证。在Add email address 下方的Primary email address 选项中将Gmail
设置为主邮箱。
导入代码
- 点击下方创建新项目
- 在代码仓库列表中选择导入NotionNext
![2.点击导入您的NotionNext项目](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F45b7938f-4824-40ae-ae4f-0237990c71a4%2FUntitled.png?table=block&id=2405a6af-7404-41df-b31e-1f73909cf94c&t=2405a6af-7404-41df-b31e-1f73909cf94c&width=816&cache=v2)
注意:这里步骤放慢些,不要急着点击页面上的Deploy按钮,先看下方教程。
配置页面ID并部署
- 点击Environment Variables(环境变量),并添加一个属性名称为
NOTION_PAGE_ID
,值为步骤一获取的页面ID。
例如,我的页面ID是:
02ab3b8678004aa69e9e415905ef32a5
,则配置如下:属性名称 Name | 属性值 Valve |
NOTION_PAGE_ID | 02ab3b8678004aa69e9e415905ef32a5 |
![左侧填写 NOTION_PAGE_ID , 右侧填写 页面ID的值](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd0a1c190-4da7-4bb5-b418-a87c82c1d00b%2FUntitled.png?table=block&id=73636a25-a2e4-4384-9f09-5f2c2ccdc70e&t=73636a25-a2e4-4384-9f09-5f2c2ccdc70e&width=816&cache=v2)
填写后要点击右边的
Add
按钮确认添加- 点击
Deploy
按钮,静候两分钟等待部署。
![1.点击Deploy进行自动部署](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F59f7f49f-f6fa-4406-838d-9dcfe97ef028%2FUntitled.png?table=block&id=eddb8f97-50c4-4761-a787-18e44396d51e&t=eddb8f97-50c4-4761-a787-18e44396d51e&width=816&cache=v2)
四、完成🎉🎉🎉
- 在部署完成页面,点击
Go to Dashboard
访问控制台
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff36b1f60-f19c-484f-a5d5-bf0f683938c3%2FUntitled.png?table=block&id=b17d7f79-9861-447c-bacb-3709c76c4668&t=b17d7f79-9861-447c-bacb-3709c76c4668&width=816&cache=v2)
- 在控制台右上角的
Visit
按钮访问您的站点。或在DOMAINS中获取您的网站地址
![2.在Vercel控制台中找到访问地址](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F88d76586-2965-4a0a-8c34-519defe654d1%2FUntitled.png?table=block&id=b57c3e3c-fa52-4bc1-9d20-c6ba4edfee42&t=b57c3e3c-fa52-4bc1-9d20-c6ba4edfee42&width=816&cache=v2)
注意事项
NotionNext会实时抓取Notion笔记内容
(由于缓存和网络延迟,最多刷新两次页面即可看到同步结果)。
若您的站点始终无法同步笔记的数据,请再次检查上面的步骤,或者干脆重来一遍:
1. 在Notion中检查您的![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe6a29e6c-e115-4f9b-a499-9984d5985de9%2FUntitled.png?table=block&id=1e8ce052-ae94-4c69-ba88-f6b8da48b06b&t=1e8ce052-ae94-4c69-ba88-f6b8da48b06b&width=576&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F69157456-65ac-4264-893c-d67669ce3a70%2FUntitled.png?table=block&id=d1ce4a83-0f68-4359-a01e-3ee9d32d5fca&t=d1ce4a83-0f68-4359-a01e-3ee9d32d5fca&width=576&cache=v2)
NOTION_PAGE_ID
格式是否正确、并已开起页面分享。
2. Vercel后台环境变量中NOTION_PAGE_ID
是否配置,并重新配置后尝试Redploy
。
如何检查Vercel后台环境变量配置:![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe6a29e6c-e115-4f9b-a499-9984d5985de9%2FUntitled.png?table=block&id=1e8ce052-ae94-4c69-ba88-f6b8da48b06b&t=1e8ce052-ae94-4c69-ba88-f6b8da48b06b&width=576&cache=v2)
如何重新部署
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F69157456-65ac-4264-893c-d67669ce3a70%2FUntitled.png?table=block&id=d1ce4a83-0f68-4359-a01e-3ee9d32d5fca&t=d1ce4a83-0f68-4359-a01e-3ee9d32d5fca&width=576&cache=v2)
自定义您的站点
到这里,您已拥有了自己的独立博客,站点的一切内容:标题、描述、头像、菜单栏等所有配置都可随心所欲地定制。
接下来,请访问下方的《NotionNext 操作手册》获取更多站点配置的帮助!
Loading...
Last update: 2023-02-10