type
status
date
slug
summary
tags
category
icon
password
前言
遵循此教程您将在Vercel上免费搭建一个NotionNext博客。
NotionNext是一个完全开源免费的建站脚本,将您的Notion笔记实时渲染成博客。
Vercel是一个来自国外的在线脚本托管平台,对于个人使用,其免费版已经完全足够,因此您无需购买服务器即可搭建自己的网站。
部署站点只需三步,分别是:
- 复制我的Notion模板
- 复制我的Github源代码
- 在Vercel中一键部署
一、创建您的Notion页面
复制模板
- 请先注册登陆您的Notion账号。
- 点击下方链接,打开模板
- 在右上角点击Duplicate复制模板,如图所示。点击后会将这个博客数据模板复制到您的笔记空间中。
点击右上角的Duplicate,将模板复制到您的笔记中
获取页面ID
- 在Notion笔记中:在页面右上角的菜单栏中,依次点击Share→Published→Share To Web,开启页面分享,获取共享链接
- 如下图所示,点击右上角 Share ,在弹出窗口中点击 Publish → Share to web (点击展开截图)
- 复制页面ID
- 如下图所示:
- 页面ID注意
页面ID在您的共享链接中、域名中间的一串32位字母与数字。
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账号登录。
注册vercel账号可能遇到的问题
导入代码
- 点击下方创建新项目
- 在代码仓库列表中选择导入NotionNext
2.点击导入您的NotionNext项目
注意:这里步骤放慢些,不要急着点击页面上的Deploy按钮,先看下方教程。
配置页面ID并部署
- 点击Environment Variables(环境变量),并添加一个属性名称为
NOTION_PAGE_ID
,值为步骤一获取的页面ID。
例如,我的页面ID是:
02ab3b8678004aa69e9e415905ef32a5
,则配置如下:属性名称 Name | 属性值 Valve |
NOTION_PAGE_ID | 02ab3b8678004aa69e9e415905ef32a5 |
左侧填写 NOTION_PAGE_ID , 右侧填写 页面ID的值
填写后要点击右边的
Add
按钮确认添加- 点击
Deploy
按钮,静候两分钟等待部署。
四、完成🎉🎉🎉
- 在部署完成页面,点击
Go to Dashboard
访问控制台
- 在控制台右上角的
Visit
按钮访问您的站点。或在DOMAINS中获取您的网站地址
2.在Vercel控制台中找到访问地址
注意事项
NotionNext会实时抓取Notion笔记内容
(由于缓存和网络延迟,最多刷新两次页面即可看到同步结果)。
若您的站点始终无法同步笔记的数据
,请再次检查上面的步骤,或者干脆重来一遍:
1. 在Notion中检查您的
格式是否正确、并已开起页面分享。
2. Vercel后台环境变量中
是否配置,并重新配置后尝试
如何检查Vercel后台环境变量配置:
如何重新部署
自定义您的站点
到这里,您已拥有了自己的独立博客,站点的一切内容:标题、描述、头像、菜单栏等所有配置都可随心所欲地定制。
- 作者:Roxy
- 链接:null/article/e0fb4397-7dcc-4654-9e8d-a98dbcb11acc
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。