type
status
date
slug
tags
summary
category
password
icon
之前写过一篇《NotionNext,用Notion搭建一个多模态第二大脑,让你对笔记爱不释手》,介绍了用NotionNext这个项目搭建的与Notion联动的个人博客网站的一些优点,这篇文章是要详细介绍搭建这个个人网站的一些步骤,剩下的再另外更新。
使用NotionNext搭建个人网站,只需要花费十几元购买域名,无需任何技术背景,你只需要写一个文档一样写一篇Notion文章,就能一键给你自动部署属于你的Notion个人网站,非常适合零基础且想要搭建一个个人网站的小伙伴。
搭建完成后,你将会:
- 拥有一个自己的域名,知道如何购买域名
- 一个个人网站
- 以及其他惊喜~
让我们开始吧
一、账号、项目配置
首先你需要你个Notion账号,如果你没有账号,可以去Notion的官网:notion.so 进行注册

用Email地址或者谷歌地址都可以,非常简单
下面需要一个Github账号,如果没有,需要先去注册一下,官网地址:
注册好以后,搜索NotionNext项目,你也可以直接点击这里跳转到项目地址:
NotionNext
tangly1024 • Updated Dec 18, 2024
首先fork项目:


然后在下方找到并点开blog.config.js这个文件

接下来复制模板地址到浏览器地址栏中并回车,你也可以直接复制这个:

然后duplicate模板到自己的工作区:


下面需要使用到Vercel,Vercel是一个托管平台,它用来托管我们的Github项目。如果你没有账号需要先去注册一个,官网地址:
注册过程:



(选择邮箱也行)

二、网站部署



第一个Name那里填写:NOTION_PAGE_ID
Value获取方法:
点开之前复制到自己工作区的模板



把获取到的那一串字符粘贴到对应的位置

等待一两分钟,撒花,部署完成

这时候点开Vercel分配给你的域名就可以看到搭建好的博客网站了


三、域名购买、配置
但是Vercel分配的域名受到了污染,在国内不开魔法是无法访问的,所以这时候我们需要一个自己的域名,使得在国内也可以正常访问我们搭建的这个网站,下面介绍一下购买和配置域名的方法,以我比较常用的Namesilo举例,官网地址:
没有账号的话需要先去注册,如果对域名没有要求的话可以选最便宜的买,都一样,buzz和top的比较便宜





购买成功后会跳转到下面的界面


这个先放着,别叉掉
到这里域名就购买成功了
我们先把购买的域名分配给部署的NotionNext网站


下面开始配置域名,首先打开Cloudfalre,如果还没哟账号先自行去注册,官网地址:
注册好以后打开来是这样的



下面需要修改两条DNS记录

记录的信息在Vercel后台查看


添加第二条记录


下面需要变更域名服务器


回到刚才Namesilo的域名管理页,如果不小心关掉了,可以点击这里打开:

把默认的三个删除掉,添加刚才复制的cloudflare的名称服务器

回到刚才的页面,点击检查名称服务器,等待更新




这里检查大概5~·10分钟,耐心等待即可

状态变为有效后,域名服务器就从Namesilo转到了Cloudflare,DNS也指向了Vercel的服务器
四、结语
回到Vercel后台,可以看到都变成合法配置了,

现在我们就可以通过自己的这个域名进入自己部署好的个人博客网站了,但是目前这个个人网站都只是一些模板内容,我们需要去修改它,让它成为真正的个人网站。这个想下一次再更新,可以提前预告一下内容:
- 如何修改网页的标题
- 修改网页的主图,侧边栏图标
- 樱花效果,烟花点击效果
- 菜单栏选项的配置
- 敬请期待
创作不易,希望可以给个赞,还有如果不想下期错过的话记得关注我哦~,Thanks♪(・ω・)ノ
- 作者:文雅的疯狂
- 链接:https://www.aiexplorernote.com//article/notion2
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。