NotionNext网站部署
type
status
date
slug
summary
tags
category
icon
password
部署了一个个人博客网站。通过notion发表文章，记录日常随笔和技术文章。这篇文章用来记录部署过程。
非常庆幸有高人已经将整个框架做出来，直接部署就会有非常好的效果，如果要实现框架之外的个性化效果，还是需要clone到本地进行细微修改。
以下是框架已经实现的功能，以及我计划再添加的功能。
Notion发表文章以及公告
分类归档
背景音乐播放器
搜索
点赞
评论
0.运用到的工具如下：
NotionNext框架
Notion发表文章
Vercel代码托管
华为云/腾讯云/阿里云/cloudflare域名运营（如果想要部署到自己的域名）
如果没有这几个账号可以事先注册好。
1.copy Notion模板
将这个网站的模板copy到自己的notion空间。
在这里可以查看模板的配置方法。
新版的NotionNext框架已经将一部分框架配置转移到了Notion模板里面，可以事先调整。
之后再写一篇文章，总结一下Notion模板的内容。
在自己调整之后，分享发布文章。
问号之前的一串字符 是Notion发布页的ID;记录下这串ID备用。
2.fork NotionNext框架
NotionNext
tangly1024 • Updated Nov 13, 2024
fork这个项目到自己的仓库。
可以在blog.config.js修改基本配置
找到Notion_Page_ID=’’
将自己NotionPageID复制进去。
修改一些其他配置，目前看来在模板中无法配置但常用的有：
主题（js文件中配置速度快）
默认黑/白/自动
音乐播放器
鼠标跟随、点击特效
……
*如果只使用框架自带的功能，在线修改这个文件，然后commit即可。
*如果还有个性化需求，就git clone到本地之后再修改。建议新建branch,否则出问题难以解决。
3.在Vercel中部署
NotionNext项目基于next.js自带docker,所以部署起来非常容易。
*vercel免费的100G流量足够使用，付费功能没有必要，所以可以放心白嫖。
add Project之后，选择刚刚fork的项目即可,vercel会自动识别到next.js框架，然后等待自动部署完成，大约两分钟。
*建议在Setting.Gerneral中关闭vercel toobar.
*一般不会出错，如果出错说明刚刚修改的配置出问题了。
部署完成之后，就可以在默认分配的网页上看到自己的网站。
这个时候，网站已经部署完成，你可以修改配置以及发布自己的文章。
*注意每次修改配置后都需要重新develope,所以更新github后会有两分钟延迟。
如果想要部署到自己网站，请看下一步。
4.Vercel Domains
直接在Domains页面添加你的网站。
这时候会报错，因为Dns并没有指向Vercel容器。
所以我们应该前往自己的域名运营商那里，修改Dns解析，指向vercel给出的公网ip即可。
在dns缓存刷新之后（很快），就可以在自己的域名看到网页了。
Summary:
感叹于如今部署一个网站已经这么容易了，整个过程是实际意义上的零代码量。
但是这里的容易是出于框架的复杂，这也对我们自主添加功能提出了更高的技术要求。
代办：
功能添加
NotionNextjs技术解析
Notion使用技巧总结、Notion框架关键字总结；
Loading...