发布于: 2022-11-28最后更新: 2023-8-25字数 00 分钟

type
status
date
slug
summary
tags
category
icon
password
Property
Aug 25, 2023 05:15 PM
URL
最终效果图
notion image

1. 准备工作

  1. 注册 Notion 账号
  1. 注册 GitHub 账号
  1. 注册 Vercel 账号

2. GitHub 设置

去 GitHub 项目 Fock 一份项目
NotionNext
tangly1024Updated Aug 24, 2023
notion image

3. Vercel 设置

去这里(点我打开)
Add New → Project
notion image
 
Continue with GitHub
notion image
 
导入 NotionNext 项目
notion image
notion image
导入后就会开始自动部署,稍微等待一下就能部署完成了.
 
部署完,点击下面的链接就能打开了.
notion image

4. 博客设置

尽管上面的部署部署好了,但是这个用的是原作者的测试 Notion 页面, 不是你自己

4.1 导入 Notion 页面

到这里( 点我打开 ),点击 Duplicate 这个按钮,然后就能放入到自己的 Notion 空间了.
notion image

4.2 分享 Notion 页面

导入刚刚的 Notion 页面之后,点击右上角的 share 按钮,
notion image
点击 Copy web link ,你会得到类似于下面的链接
https://wxyhgk.notion.site/9c1111d4b0faa762972b2b9a7a3?v=51fcd639c08943429974e228d093d560
复制上面的 红色部分 然后记住,这个是 PAGE_ID

4.3 GitHub 项目设置

去到你 Fock 后的项目,然后修改 blog.config.js 文件
notion image
 
编辑文件
notion image
 
下面的 process.env.NOTION_PAGE_ID 是最重要的, 修改成你上面记录的 PAGE_ID,然后其他的自己对照后面的说明自己修改就行了
notion image
修改完提交,然后 vercel 那边会自动修改,等待一下就能看到结果了.

公告
type
status
date
slug
summary
tags
category
icon
password
Property
Aug 25, 2023 05:15 PM
URL
公告
博客重大更新,更换为matery主题,阅读体验更加好了。
和博主联系
notion image