category
tags
type
status
slug
date
summary
icon
password
前言
遵循此教程您将在Vercel上免费搭建一个Notion博客
操作步骤
部署站点只需要三步,分别是:复制我的模板到您的notion笔记,复制我的源代码到您的github仓库,在vercel中部署代码。
1.准备您的Notion页面
请先注册并登陆您的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=2f63416f-5a7a-4595-86a0-398ef47c97f7)
点击右上角的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=2f63416f-5a7a-4595-86a0-398ef47c97f7)
- 开启页面分享权限
如何开启?点击 Share ,在弹出窗口中点击 Share to web ![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5859cec0-7b4b-4cee-abce-7a74b410ccda%2FUntitled.png?table=block&id=f1fdd3b0-5913-4e57-ad05-faae36784688)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5859cec0-7b4b-4cee-abce-7a74b410ccda%2FUntitled.png?table=block&id=f1fdd3b0-5913-4e57-ad05-faae36784688)
- 复制页面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=7cbbf2d7-3829-404c-aaa8-f6621cc92b6f)
👇这是我的共享链接
https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d
⚠️注意!只有其中标红加粗下划线部分才是页面ID!要忽略
?
v=
后面的英文数字。所以我的页面ID 就是 02ab3b8678004aa69e9e415905ef32a5页面ID 在步骤三部署时会用到。
2.Fork此Github项目
什么是Fork:意为将NotionNext源代码复制一份到您的Github账号中。
请先注册并登陆Github账号,并点击下方链接一键fork项目。
3.将Github项目导入Vercel
- 使用您的Github账号登陆Vercel
![1.使用Github账号登录Vercel](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff5c60574-e077-4fc5-a7f7-5402a0ad75b6%2FUntitled.png?table=block&id=cc803d26-7b07-40b8-8275-b2c86121344a)
- 点击下方创建新项目,并选择从Github导入NotionNext代码
在代码仓库列表中选择导入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=72ecc170-2fe2-4eae-81f2-198e40d92a12)
注意:这里步骤放慢些,不要点击页面上的Deploy按钮,先看下方教程。
- 点击Environment Variables(环境变量),并添加一个属性名称为
NOTION_PAGE_ID
,值为步骤一获取到的页面ID。
例如,我的页面ID是:02ab3b8678004aa69e9e415905ef32a5,则配置如下:
Name | Value |
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=004f851f-4e2d-4fa3-93e0-61ee7bdb128b)
添加完环境变量后,点击
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=d318cb0b-9056-44c7-b1d0-9447c60c4bd0)
4.完成🎉🎉🎉
- 在部署完成页面,点击
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=cce5368e-716b-4200-896a-215a5754b6dd)
- 在控制台右上角的
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=a0eb28c1-246e-42c2-8dbd-8d159d7195ec)
注意事项
NotionNext会实时抓取Notion笔记内容
(由于缓存和网络延迟等原因,刷新两次页面即可看到同步结果)。
若您的站点始终无法同步笔记的数据,请再次检查上面的步骤3:
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=2f57a05e-8855-4969-8f11-b98ba20d1eda)
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=2f57a05e-8855-4969-8f11-b98ba20d1eda)
网站优先读取环境变量,最后读取代码配置。
如您不知道如何检查配置,可以删掉vercel中的项目,重新导入一次即可。
自定义您的站点
到这里,您已拥有了自己的独立博客,站点的一切内容都可随心所欲地定制。
请访问下方的《NotionNext 操作手册》获取更多站点配置的帮助!
- 作者:NotionNext
- 链接:https://tangly1024.com/vercel-deploy-notion-next
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章