type
status
date
Jun 1, 2024 02:52 AM
slug
summary
tags
category
icon
password
NotionNext 是一个国内开源免费的建站脚本,可以将您的 Noiton 笔记实时渲染成个人博客。按照下面步骤,只需要准备 2 个账号,就能快速帮您完成建站:
- Notion 账号
- github 账号
1、复制 Notion 模板页面

接着,在复制后的模板中右上角找到“Share” 按钮,点击后选择“Publish”选项卡,点击 Publish 按钮。

这样,您的模板就可以得到一个当前页面的发布链接,复制这个链接,我们将从这个链接提取模板 ID。

怎么提取呢?
比如网页链接是
https://happyfou.notion.site/4gg66b07858e4394b128d533d02ffd9f?v=91b49f3c84c5478393c9eb2f78fd59cc&pvs=4
。那我们就要提取
...stie/
后面和 ?v91b4...
前面这段的内容,这就是页面 ID。这个例子中,4gg66b07858e4394b128d533d02ffd9f
就是我们的页面 ID。将页面 ID 找个地方存下来,后面需要用到。
2、复制 NotionNext 代码仓库

复制这个仓库是为了在 Vercel 上快速导入。
3、在 Vercel 上部署
打开 Vercel ,注册时(log in)选择以 github 账号的身份继续登录,这里会有一个简短的授权验证,我们点击授权即可。
然后 Vercel 会友好地询问我们,让我们选择从 github 仓库里导入来进行部署。

找到您前面自己命名的那个仓库,然后点击“Import”按钮,耐心等待。
这里会出现一个界面让我们对项目的环境进行微调:

我们点击 Environment Variables(环境变量),并添加一个属性名称为
NOTION_PAGE_ID
,后面的值填写为您的页面 ID,点击 Add 完成添加。页面就是前面让您保存的那串数字,填写后是这样:
然后我们点击 “Deploy” ,耐心等待即可。
没多久就会收到部署完成的提示,我们点击 “Continue to Dashboard” ,进入项目主页面后,继续点击右上角的“Visit”,就能看到我们部署的网站了。

到这里,您已拥有了自己的博客,那站点的信息内容比如标题、描述、头像、菜单应该如何修改呢?

后续有余力的话,我会继续更新《配置站点篇》和《域名绑定篇》,感谢您的阅读。
欢迎添加我的微信:foufoufm,咨询有关问题,一起交流~
- Author:元否
- URL:https://happyfou.com /technology/thisblog-tur
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!