type
status
date
slug
summary
tags
category
icon
password
上一期给大家推荐了,如何获取Notion Plus
这一期的话,再来分享一下,如何将你的Notion笔记直接转化为个人博客网站
将自己的笔记与网站打通
(这下感觉终于有了一个能够在互联网上顺畅输出内容的地盘了)
虽然我能够折腾出n种其他建站方式,但是现在如果主力采用Notion写作与做知识管理的话,其他方式对我来说过于笨重了。
如果能够打通Notion笔记本与网站的话,那还是能让我更好将精力集中在写作本身之上。
我这里采用的是
NotionNext
建站的方式NotionNext
tangly1024 • Updated Oct 23, 2024
懒人的话采用 Vercel托管部署,用免费的套餐就可以了
后续如果资金充裕的话,还是建议将网站部署在服务器上
以下教程参考:
1.准备好Notion页面
这里默认已经注册好了Notion账号
1.1 将建站模板数据复制到你的Notion
打开模板页面
点击
Duplicate
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc82ad774-25a3-4e29-b2dc-134d109de9ac%2FUntitled.png?table=block&id=59a4e9d3-7a62-4e24-bf1b-46a146c0c3f3&t=59a4e9d3-7a62-4e24-bf1b-46a146c0c3f3&width=2546&cache=v2)
1.2开启页面分享权限
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F76f9f5bd-6d4c-4f54-819a-0d386f997b5c%2FUntitled.png?table=block&id=dbf863f7-d8f7-499a-a262-82a09b52aea0&t=dbf863f7-d8f7-499a-a262-82a09b52aea0&width=2293&cache=v2)
1.3记住页面ID
后面建站的数据都将从该页面进行获取,相当于你的数据库
选择将页面连接Copy出来
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff1c06f85-cb86-4477-9648-417577f14c6f%2FUntitled.png?table=block&id=759c793f-33fe-427e-a700-61af9367b0e3&t=759c793f-33fe-427e-a700-61af9367b0e3&width=2297&cache=v2)
链接中间的一段就是你的ID
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fdd938684-ad0c-4df8-9c96-204af45f5a33%2FUntitled.png?table=block&id=9d8776e0-246c-457c-a735-555a52858f8a&t=9d8776e0-246c-457c-a735-555a52858f8a&width=863&cache=v2)
2.从GitHub上Fork项目仓库
NotionNext
tangly1024 • Updated Oct 23, 2024
就是将这个开源作者的仓库,复制一份到你的GitHub账号里
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7689ad70-44d6-429a-b5a1-9ff80a74b316%2FUntitled.png?table=block&id=7e5b6f5f-fecb-4390-a94e-1891196ed0fa&t=7e5b6f5f-fecb-4390-a94e-1891196ed0fa&width=2516&cache=v2)
3.将项目导入Vercel
3.1 注册Vercel
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3153898a-3d27-4513-b6ac-2acdf9f6bf81%2FUntitled.png?table=block&id=cd63f754-b02e-4fac-a8c3-74aaf0edca38&t=cd63f754-b02e-4fac-a8c3-74aaf0edca38&width=1453&cache=v2)
选择个人身份
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd132946d-7a80-4c6a-a257-4b85aa4bbba1%2FUntitled.png?table=block&id=b6d269ca-a0a8-4c87-ac8b-3b7d73c3f2ff&t=b6d269ca-a0a8-4c87-ac8b-3b7d73c3f2ff&width=1438&cache=v2)
选择GitHub进行连接
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F609b0026-fdfd-4fb0-b376-907253b5f1bc%2FUntitled.png?table=block&id=5d1b5dcb-ff44-41f3-9fe7-51d364e52f51&t=5d1b5dcb-ff44-41f3-9fe7-51d364e52f51&width=1425&cache=v2)
3.2导入你的GitHub仓库
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3d0f3592-b2cd-4a35-8edc-eaa27d8f309e%2FUntitled.png?table=block&id=531b0772-c53a-4b55-8245-c6cd6f8e1ab9&t=531b0772-c53a-4b55-8245-c6cd6f8e1ab9&width=2070&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3e06386a-4b7b-4563-8fef-7d41d9022dec%2FUntitled.png?table=block&id=dffe2754-0c38-4b62-85cb-8799b658753a&t=dffe2754-0c38-4b62-85cb-8799b658753a&width=2169&cache=v2)
注意,需要在环境变量里添加:
NOTION_PAGE_ID
: 第一步里你的模板页面的Notion页面ID
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fcf93ae53-2636-44d4-a6c3-87ad1db3c824%2FUntitled.png?table=block&id=d4ba89c9-753e-4504-bcf6-680a10f712cc&t=d4ba89c9-753e-4504-bcf6-680a10f712cc&width=1325&cache=v2)
最后按下部署即可
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3cba7566-932c-4bf2-b4f6-640082471c6c%2FUntitled.png?table=block&id=76fb5310-a007-4f03-a38d-6d4d35b37e69&t=76fb5310-a007-4f03-a38d-6d4d35b37e69&width=1467&cache=v2)
4.部署完成
点击Visit可前往查看你的网站
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1ee8c53f-ae78-44a1-ae65-5f32fe718b37%2FUntitled.png?table=block&id=5254db72-717b-41f6-89d0-1e595293042e&t=5254db72-717b-41f6-89d0-1e595293042e&width=2092&cache=v2)
5.配置自己的域名
因为vercel的ip被DNS污染,所以建议使用自己的域名进行解析
我这里直接设置根域名
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F71c71c19-b14d-4119-a40b-7e986236ee3d%2FUntitled.png?table=block&id=c9b8d633-a8b0-463e-9287-ff74910ed05e&t=c9b8d633-a8b0-463e-9287-ff74910ed05e&width=1707&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F225a0a38-0764-4d61-91ee-ca218065096f%2FUntitled.png?table=block&id=c1669e16-eb08-49b0-8b41-5819b0514f73&t=c1669e16-eb08-49b0-8b41-5819b0514f73&width=1807&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff175a8a5-acf5-45db-9d05-aed0a7b2b3d6%2FUntitled.png?table=block&id=bdf495b4-a569-4413-a1af-5a9cd45f633d&t=bdf495b4-a569-4413-a1af-5a9cd45f633d&width=1409&cache=v2)
我的域名是放在
cloudflare
的,如果购买的是其他平台域名,操作都是类似的- 作者:PolarisAspire
- 链接:https://lpolaris.com//article/notionweb
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。