Logo文雅的疯狂
  • 首页
  • 博客
  • 关于
← 返回博客列表

目录

NotionNext搭建个人网站教程(一)

2024年11月5日
#实用工具#建站#Notion使用#开发#Notion
← 查看更多文章
Logo

文雅的疯狂

你当像鸟,飞往你的山

联系我

  • 📧邮件联系
  • 🐧QQ交流
  • 💬微信咨询

我的社媒

  • 知乎
  • B站
  • 公众号

支持

  • 咨询我
  • 为爱发电
  • 加入社群

© 2023-2026 文雅的疯狂. 保留所有权利.

之前写过一篇《NotionNext,用Notion搭建一个多模态第二大脑,让你对笔记爱不释手》,介绍了用NotionNext这个项目搭建的与Notion联动的个人博客网站的一些优点,这篇文章是要详细介绍搭建这个个人网站的一些步骤,剩下的再另外更新。

使用NotionNext搭建个人网站,只需要花费十几元购买域名,无需任何技术背景,你只需要写一个文档一样写一篇Notion文章,就能一键给你自动部署属于你的Notion个人网站,非常适合零基础且想要搭建一个个人网站的小伙伴。

搭建完成后,你将会:

  1. 拥有一个自己的域名,知道如何购买域名

  2. 一个个人网站

  3. 以及其他惊喜~

让我们开始吧

一、账号、项目配置

首先你需要你个Notion账号,如果你没有账号,可以去Notion的官网:notion.so 进行注册

notion image

用Email地址或者谷歌地址都可以,非常简单

下面需要一个Github账号,如果没有,需要先去注册一下,官网地址:

Github
github.com
🔗

注册好以后,搜索NotionNext项目,你也可以直接点击这里跳转到项目地址:

NotionNexttangly1024 • Updated Dec 18, 2024
github.com
🔗

首先fork项目:

notion image

notion image

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

notion image

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

Prod-files-secure
prod-files-secure.s3.us-west-2.amazonaws.com
🔗

notion image

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

notion image

notion image

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

Assets
assets.vercel.com
🔗

注册过程:

notion image

notion image

notion image

(选择邮箱也行)

notion image

二、网站部署

notion image

notion image

notion image

第一个Name那里填写:NOTION_PAGE_ID

Value获取方法:

点开之前复制到自己工作区的模板

notion image

notion image

notion image

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

notion image

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

notion image

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

notion image

notion image

三、域名购买、配置

但是Vercel分配的域名受到了污染,在国内不开魔法是无法访问的,所以这时候我们需要一个自己的域名,使得在国内也可以正常访问我们搭建的这个网站,下面介绍一下购买和配置域名的方法,以我比较常用的Namesilo举例,官网地址:

Namesilo
www.namesilo.com
🔗

没有账号的话需要先去注册,如果对域名没有要求的话可以选最便宜的买,都一样,buzz和top的比较便宜

notion image

notion image

notion image

notion image

notion image

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

notion image

notion image

这个先放着,别叉掉

到这里域名就购买成功了

我们先把购买的域名分配给部署的NotionNext网站

notion image

notion image

下面开始配置域名,首先打开Cloudfalre,如果还没哟账号先自行去注册,官网地址:

Cloudflare
www.cloudflare.com
🔗

注册好以后打开来是这样的

notion image

notion image

notion image

下面需要修改两条DNS记录

notion image

记录的信息在Vercel后台查看

notion image

notion image

添加第二条记录

notion image

notion image

下面需要变更域名服务器

notion image

notion image

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

www.namesilo.comhttps://www.namesilo.com/account_domains.php
www.namesilo.com
🔗

notion image

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

notion image

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

notion image

notion image

notion image

notion image

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

notion image

状态变为有效后,域名服务器就从Namesilo转到了Cloudflare,DNS也指向了Vercel的服务器

四、结语

回到Vercel后台,可以看到都变成合法配置了,

notion image

现在我们就可以通过自己的这个域名进入自己部署好的个人博客网站了,但是目前这个个人网站都只是一些模板内容,我们需要去修改它,让它成为真正的个人网站。这个想下一次再更新,可以提前预告一下内容:

  1. 如何修改网页的标题

  2. 修改网页的主图,侧边栏图标

  3. 樱花效果,烟花点击效果

  4. 菜单栏选项的配置

  5. 敬请期待

创作不易,希望可以给个赞,还有如果不想下期错过的话记得关注我哦~,Thanks♪(・ω・)ノ