基于NotionNext的个人网站|博客搭建与部署实例教程

🖊前言：由于以前在编程学习的过程中，没有养成记笔记的习惯📚，导致现在使用旧架构或者吃灰项目二次开发时，时常需要重新查询教程，甚至于一度依赖LLM工具进行代码编写。由于这样学习效率实在是太低（主要是怕没了AI就成啥子😔），作者痛定思痛，决定开始写博客、git项目，记录各种项目的学习过程，巩固知识并且后续可以用于复习👆。

一、关于NotionNext

什么是Notion？

📕Notion是一个多功能的笔记软件，其功能具有极高的可玩性（可以在页面中加入代码、视频、链接...简直就是博客神器），UI设计人性化，支持用户进行自编辑与根据官方API进行二次开发，大家可以先进入Notion的官网进行了解（由于作者之前做笔记都是使用幕布，现在使用Notion实在是越级的体验🤦‍），本文介绍的NotionNext就是基于NotionAPI开发的开源项目。

 Notion官网：Notion官网：Your connected workspace for wiki, docs & projects | Notion

Notion开发API：Notion API

什么是NotionNext？

NotionNext是tangly1024大佬基于 NextJS框架开发的免费开源的 Notion建站工具。NotionNext的特点之一是，由于使用了NextJS架构，可以实现动态编译与静态部署（个人使用下来网站的运行效率确实高🐂）。👇NotionNext的github链接

GitHub - tangly1024/NotionNext: 使用 NextJS + Notion API 实现的，支持多种部署方案的静态博客，无需服务器、零门槛搭建网站，为Notion和所有创作者设计。 (A static blog built with NextJS and Notion API, supporting multiple deployment options. No server required, zero threshold to set up a website. Designed for Notion and all creators.)使用 NextJS + Notion API 实现的，支持多种部署方案的静态博客，无需服务器、零门槛搭建网站，为Notion和所有创作者设计。 (A static blog built with NextJS and Notion API, supporting multiple deployment options. No server required, zero threshold to set up a website. Designed for Notion and all creators.) - tangly1024/NotionNexthttps://github.com/tangly1024/NotionNext

其次，NotionNext的网站内容是从Notion官网从动态拉取的，也就是说，NotionNext可以实现一次搭建，自动更新。在Notion中配置唯一Page——配置中心，即可对NotionNext进行绝大多数的配置与内容的更新修改。👇下面为Notion中配置中心界面

二、从零开始搭建NotionNext

🔈注意：本次作者只介绍个人服务器部署NotionNext，如果想要了解一键部署，可以看看NotionNext的官方文档👉Vercel部署NotionNext | NotionNext帮助手册。

第一步：拉取NotionNext配置中心Page

1. 注册Notion账号👉Your connected workspace for wiki, docs & projects | Notion

2. 打开官方Page链接👇，将Page复制到自己的笔记空间中Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

3. 获取配置中心PageID，打开笔记空间中的配置中心Page，在页面右上角的菜单栏中，依次点击Share→Published→Share To Web，开启页面分享，获取共享链接，复制PageID（？v=前面的32位代码）。现在可以保存这串ID，非常重要！！！

第二步：部署NotionNext的github项目于本地。

1. 拉取NotionNext项目：个别服务器无法访问github，可以手动从github下载解压👉https://github.com/tangly1024/NotionNext

git clone https://github.com/tangly1024/NotionNext && cd NotionNext

2. 安装NodeJS环境

这里可以使用fnm等在线工具拉取，作者这里安装的是20.15.1版本。windows用户可以直接从官网下载安装包👉Node.js — 下载 Node.js®

# Win版使用下面语句安装fnm
winget install Schniz.fnm

# Linux版使用下面语句安装fnm
curl -fsSL https://fnm.vercel.app/install | bash

# 安装你想要的nodejs版本（这里以20.15.1版本为例）
fnm use --install-if-missing 20

然后就可以进入我们的项目文件夹，安装依赖。作者这里使用npm，大家也可以使用yarn进行安装

npm install

3. 修改blog.config.js

在项目找到blog.config.js，这是项目本地中全局配置文件，几乎大多数配置都可以在这里修改（如果是二次开发，可以直接在这里增加配置）。找到process.env.NOTION_PAGE_ID这一项，把值替换为上面我们自己的PageID。

4. 编译并启动项目

安装好依赖之后我们就可以对项目进行编译并且启动项目，项目默认部署在3000端口（如果非二次修改项目，不推荐使用dev进行部署运行，相应速度过慢╮(╯▽╰)╭）。

npm run build
npm run start

这样我们完成了NotionNext的最基本部署！不得不说NotionNext做的确实简洁好看（👇下面是修改完配置的效果）。

三、NotionNext云服务器部署（阿里云ECS/Win10系统）

作者这里使用的是阿里云进行部署，并且使用的是Win10系统（原本用的CentOS不兼容新版NodeJS），关于阿里云的基础学习可以参考这个博主的教程http://t.csdnimg.cn/uU2PW，作者在这里就不做赘述。

其次NotionNext提供了部署简易服务器的教程，如果不对项目进行二次开发可以参考官网教程：

Vercel部署NotionNext | NotionNext帮助手册Vercel是一款国外的Serverless托管平台，对个人用户使用几乎免费，而且方便快捷，用Vercel托管你的Notion站点，无需再操心服务器的维护与资费问题。https://docs.tangly1024.com/article/vercel-deploy-notion-next

第一步：部署NotionNext项目

👆跟第二章的步骤一样：拉取NotionNext项目——>安装NodeJS——>修改blog.config.js——>编译并启动

第二步：配置阿里云安全组与域名解析

1. 在阿里云中开启3000端口安全组（使用Linux的宝塔系统需要在宝塔安全组中再进行一次设置）

2. 配置域名并使用nginx反向代理（还没有域名或者个人使用可以跳过）

在阿里云中先对域名进行解析👇

然后安装nginx👇nginx: downloadhttps://nginx.org/en/download.html解压nginx文件夹之后，在conf文件夹中找到nginx.conf文件

在nginx中修改http{server{......}}中的80端口监听改为👇并保存

server {
        listen       80;
        autoindex on;
        server_name  XXX.XXX; # 这里修改为你的域名
        location / {
            proxy_pass http://127.0.0.1:3000;  # 反向代理到NotionNext的 3000 端口
            add_header Access-Control-Allow-Origin *;
        }
}

然后在cmd中运行nginx（或者直接运行nginx.exe）

如果成功运行到这里，那么恭喜你🎉，成功在云服务器上运行NotionNext！现在你可以通过你的域名访问你的NotionNext网站！

四、配置与更新NotionNext

NotionNext通过接入NotionAPI，从而实现动态拉取Notion中配置中心Page中的一切设置（即使项目通过build打包再Start之后依旧不影响动态拉取）。下面作者就介绍两种比较实用的配置方法，完整配置参数可以接入NotionNext官网文档查看👇如何配置站点 | NotionNext帮助手册如何配置NotionNext站点https://docs.tangly1024.com/article/how-to-config-notion-next

1. 使用Notion笔记配置中心Page

在Notion中可以进行：网站配置修改、文章内容更新、菜单更新等功能，配置Table中元素的type属性决定了其在网站中的类型，如Config为配置文件、Post为文章等👇

每个属性都可以进行修改，完成分类设置、标签设置等操作，可以自行添加表格元素👇

在配置中心页面中可以对NotionNext网站全局进行配置修改，勾选启用使配置信息生效。也可以从项目的blog.config.js文件中添加配置组到这里，值得一提的是，Notion笔记中的配置优先级是大于blog.config.js的。

其中THEME属性为你的网站主题模板，你可以在项目的themes文件夹中查看目前拥有的模板，将THEME属性值替换为你想要的文件夹名称，勾选启用就可以实现主题切换👇

如果需要对文章进行添加或者更新，可以直接在Table中增加一条Post元素，然后打开页面，就可以像正常编写Notion笔记一样编写你的文章👇在NotionNext中浏览文章基本与在Notion中浏览没有差别！

2. 在项目代码中修改配置

在项目代码中修改配置主要利于NotionNext的二次开发，主要是在blog.config.js中进行配置修改。NotionNext在这里面已经提供了非常多的配置，包括但不限于基本信息设置、主题设置、字体设置等，实在是太牛了/(ㄒoㄒ)/~~

其次，还可以在每个主题或者深入到网页代码中进行修改，作者这里以主题为例。可以自信修改主题的脚本、配置、css实现个性化的二次开发👇

五、总结

NotionNext在基于Notion的基础上进行开发，实在是强上加强🤦‍🐂目前作者也只是实现了基础的部署和简单的修改，NotionNext还有很大的可玩空间，期待之后深入学习可以玩出一点花来😊

看到这里，希望这篇文章对你有所帮助！作者目前还在学习阶段，如果有什么疑惑可以评论留言，一起交流~