type
status
date
Jun 1, 2024 02:52 AM
slug
summary
tags
category
icon
password
NotionNext 是一个国内开源免费的建站脚本,可以将您的 Noiton 笔记实时渲染成个人博客。按照下面步骤,只需要准备 2 个账号,就能快速帮您完成建站:
- Notion 账号
- github 账号
1、复制 Notion 模板页面
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6f061d15-8f2e-42d0-a148-068fb412b305%2F867a50e8-c78f-452d-87f2-d260a0eb49f1%2FCleanShot_2024-03-08_at_13.29.31.png?table=block&id=ec41baeb-1210-4d91-a1ac-3830f5330e83&t=ec41baeb-1210-4d91-a1ac-3830f5330e83&width=2880&cache=v2)
接着,在复制后的模板中右上角找到“Share” 按钮,点击后选择“Publish”选项卡,点击 Publish 按钮。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6f061d15-8f2e-42d0-a148-068fb412b305%2Fdb58a193-3de5-46a9-843d-8b104d1dd757%2FCleanShot_2024-03-08_at_13.34.06.png?table=block&id=1f6ecf6b-4c22-41d9-8688-b1007a4979d0&t=1f6ecf6b-4c22-41d9-8688-b1007a4979d0&width=964&cache=v2)
这样,您的模板就可以得到一个当前页面的发布链接,复制这个链接,我们将从这个链接提取模板 ID。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6f061d15-8f2e-42d0-a148-068fb412b305%2F084a89bb-2959-484b-8de9-a342742fc67a%2FCleanShot_2024-03-08_at_13.36.24.png?table=block&id=b5f7c30a-c7df-4a0e-8dd0-2b4d0e908057&t=b5f7c30a-c7df-4a0e-8dd0-2b4d0e908057&width=986&cache=v2)
怎么提取呢?
比如网页链接是
https://happyfou.notion.site/4gg66b07858e4394b128d533d02ffd9f?v=91b49f3c84c5478393c9eb2f78fd59cc&pvs=4
。那我们就要提取
...stie/
后面和 ?v91b4...
前面这段的内容,这就是页面 ID。这个例子中,4gg66b07858e4394b128d533d02ffd9f
就是我们的页面 ID。将页面 ID 找个地方存下来,后面需要用到。
2、复制 NotionNext 代码仓库
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6f061d15-8f2e-42d0-a148-068fb412b305%2Fa2a03070-3f9f-417f-829e-d2a5c90e4e60%2FCleanShot_2024-03-08_at_13.44.14.png?table=block&id=3fefdd48-332d-4819-a2cc-368accf996b9&t=3fefdd48-332d-4819-a2cc-368accf996b9&width=1428&cache=v2)
复制这个仓库是为了在 Vercel 上快速导入。
3、在 Vercel 上部署
打开 Vercel ,注册时(log in)选择以 github 账号的身份继续登录,这里会有一个简短的授权验证,我们点击授权即可。
然后 Vercel 会友好地询问我们,让我们选择从 github 仓库里导入来进行部署。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6f061d15-8f2e-42d0-a148-068fb412b305%2F4b8320fa-e3a1-450e-a929-6267c39d1ee6%2FCleanShot_2024-03-08_at_13.50.27.png?table=block&id=156a887d-8e94-42ea-9431-d90e3f9b3c0d&t=156a887d-8e94-42ea-9431-d90e3f9b3c0d&width=2880&cache=v2)
找到您前面自己命名的那个仓库,然后点击“Import”按钮,耐心等待。
这里会出现一个界面让我们对项目的环境进行微调:
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6f061d15-8f2e-42d0-a148-068fb412b305%2F7e791725-d917-4420-91a5-c63e8bfd1eb0%2FCleanShot_2024-03-08_at_13.52.28.png?table=block&id=11ff9925-e6c0-493c-a072-39fdb8f135b8&t=11ff9925-e6c0-493c-a072-39fdb8f135b8&width=2506&cache=v2)
我们点击 Environment Variables(环境变量),并添加一个属性名称为
NOTION_PAGE_ID
,后面的值填写为您的页面 ID,点击 Add 完成添加。页面就是前面让您保存的那串数字,填写后是这样:![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6f061d15-8f2e-42d0-a148-068fb412b305%2Ff73b6522-6daf-49ef-ac70-be9ebeb89bb7%2FCleanShot_2024-03-08_at_13.56.37.png?table=block&id=91973c5a-ad95-4a62-9452-1c7f3ce765f7&t=91973c5a-ad95-4a62-9452-1c7f3ce765f7&width=1706&cache=v2)
然后我们点击 “Deploy” ,耐心等待即可。
没多久就会收到部署完成的提示,我们点击 “Continue to Dashboard” ,进入项目主页面后,继续点击右上角的“Visit”,就能看到我们部署的网站了。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6f061d15-8f2e-42d0-a148-068fb412b305%2F75a64fcd-f2aa-4e84-a22b-cd02c52667ea%2FCleanShot_2024-03-08_at_13.58.43.png?table=block&id=3a21ef86-e2e4-42d4-a27d-407686cd2ba0&t=3a21ef86-e2e4-42d4-a27d-407686cd2ba0&width=2880&cache=v2)
到这里,您已拥有了自己的博客,那站点的信息内容比如标题、描述、头像、菜单应该如何修改呢?
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6f061d15-8f2e-42d0-a148-068fb412b305%2F725ea32a-bdb2-4e31-a4af-cc396a8e69b0%2FCleanShot_2024-03-08_at_14.02.24.png?table=block&id=554f2f0b-a0c3-4650-be86-90c122dec580&t=554f2f0b-a0c3-4650-be86-90c122dec580&width=2402&cache=v2)
后续有余力的话,我会继续更新《配置站点篇》和《域名绑定篇》,感谢您的阅读。
欢迎添加我的微信: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!