type
status
date
slug
summary
tags
category
icon
password
Property
Aug 25, 2023 05:15 PM
URL
最终效果图
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fab5236d2-34e4-49d5-9533-6a7a44d7e2df%2FUntitled.png?table=block&id=6f7bb83e-2218-4d2c-a52b-be2981dc3c31&t=6f7bb83e-2218-4d2c-a52b-be2981dc3c31&width=1512&cache=v2)
1. 准备工作
- 注册 Notion 账号
- 注册 GitHub 账号
- 注册 Vercel 账号
2. GitHub 设置
去 GitHub 项目 Fock 一份项目
NotionNext
tangly1024 • Updated Aug 24, 2023
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F00c4649d-4461-4c8f-8597-5bd6de4f0c49%2FUntitled.png?table=block&id=8fa283db-ba0e-4e1b-8daf-d1ea7b637ede&t=8fa283db-ba0e-4e1b-8daf-d1ea7b637ede&width=2514&cache=v2)
3. Vercel 设置
去这里(点我打开)
Add New → Project
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6528f80c-2340-4d1b-8f6b-f12fcc206271%2FUntitled.png?table=block&id=7bd46132-dff7-410e-9576-aa87e7732376&t=7bd46132-dff7-410e-9576-aa87e7732376&width=2534&cache=v2)
Continue with GitHub
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F226760ea-7b61-4ea8-9c2e-427e71b59cbe%2FUntitled.png?table=block&id=9bf1c7f4-7429-453c-9248-c83a32f783ba&t=9bf1c7f4-7429-453c-9248-c83a32f783ba&width=2556&cache=v2)
导入 NotionNext 项目
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1119b0b3-4f96-4899-b1cb-15fe7ddfc176%2FUntitled.png?table=block&id=5563b5ff-533f-45a0-80f5-f869e2bfbc16&t=5563b5ff-533f-45a0-80f5-f869e2bfbc16&width=576&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F81de61db-af81-4318-b589-d5762a6f24ae%2FUntitled.png?table=block&id=075db6f8-aac2-485d-940c-3d1d9196bb27&t=075db6f8-aac2-485d-940c-3d1d9196bb27&width=576&cache=v2)
导入后就会开始自动部署,稍微等待一下就能部署完成了.
部署完,点击下面的链接就能打开了.
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F65393a8e-0349-4e1c-8736-ec8ea5893f11%2FUntitled.png?table=block&id=aa07d11a-0350-45a3-92bd-6029a22ee21f&t=aa07d11a-0350-45a3-92bd-6029a22ee21f&width=2498&cache=v2)
4. 博客设置
尽管上面的部署部署好了,但是这个用的是原作者的测试 Notion 页面, 不是你自己
4.1 导入 Notion 页面
到这里( 点我打开 ),点击 Duplicate 这个按钮,然后就能放入到自己的 Notion 空间了.
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fcc3eaf4a-ffc4-4cca-808b-af282aa5d072%2FUntitled.png?table=block&id=197493bc-5d5e-4625-8edb-58e62fd0d126&t=197493bc-5d5e-4625-8edb-58e62fd0d126&width=2632&cache=v2)
4.2 分享 Notion 页面
导入刚刚的 Notion 页面之后,点击右上角的 share 按钮,
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F791b2954-3193-4f97-8bf6-11e8b98a7be0%2FUntitled.png?table=block&id=a1fcd1fc-5800-4427-bc6a-cf3879ee4f3c&t=a1fcd1fc-5800-4427-bc6a-cf3879ee4f3c&width=2120&cache=v2)
点击 Copy web link ,你会得到类似于下面的链接
https://wxyhgk.notion.site/9c1111d4b0faa762972b2b9a7a3?v=51fcd639c08943429974e228d093d560
复制上面的 红色部分 然后记住,这个是
PAGE_ID
4.3 GitHub 项目设置
去到你 Fock 后的项目,然后修改
blog.config.js
文件![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb8caac0f-a4e2-4fee-85d4-5f3bddee61f4%2FUntitled.png?table=block&id=6d21da11-3fa5-48c5-b8ef-ef395b3f2dfe&t=6d21da11-3fa5-48c5-b8ef-ef395b3f2dfe&width=1870&cache=v2)
编辑文件
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa0996d69-2049-4143-9e45-0712f9f67c36%2FUntitled.png?table=block&id=07cd5e27-5fe4-4d89-a7f1-f12f6f9f24ab&t=07cd5e27-5fe4-4d89-a7f1-f12f6f9f24ab&width=2568&cache=v2)
下面的
process.env.NOTION_PAGE_ID
是最重要的, 修改成你上面记录的 PAGE_ID
,然后其他的自己对照后面的说明自己修改就行了![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F62188f96-6653-46ad-9446-5ae6ec82d262%2FUntitled.png?table=block&id=56e60a0b-447d-41ca-871f-a54ea72ee480&t=56e60a0b-447d-41ca-871f-a54ea72ee480&width=2564&cache=v2)
修改完提交,然后 vercel 那边会自动修改,等待一下就能看到结果了.
- 作者:我心永恒
- 链接:https://wxyhgk.com/article/web-notion
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。