VPS裸机安装NotionNext个人博客

上级项目

type

status

date

slug

summary

password

子级项目

关于

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.)

💡

Notion是一个能让效率暴涨的生产力引擎，可以帮你书写文档、管理笔记，搭建知识库，甚至可以为你规划项目、时间管理、组织团队、提高生产力、还有当前最强大的AI技术加持。

安装要求：

需要一台VPS云服务器

一个域名(本文不涉及备案相关)

本文将提供三种搭建方式

VPS通过直装方式安装NotionNext

这里也是使用NotionNext作者推荐的nvm方式进行安装NodeJS环境首先使用SSH工具连接上VPS（例如Xshell、Putty、MobaXterm、Termius）

1.`安装Git`拉取`nvm`源码

2.使用`nvm`安装`NodeJS`

3.安装`yarn`环境

4.部署`NotionNext`

当所有的脚本和库安装完成后就可以去blog.config.js文件里绑定自己的notion_page_id

修改保存后便可以开始编译源码了

💡

博客会默认在3000端口开启，这个时候在浏览器输入http://域名:3000即可打开。

有时候3000端口可能无法访问，原因是服务器防火墙，以及云服务厂商的安全组限制。

后面反代域名，自行操作。

5.重要-项目`后台运行`

方式一：nohup运行

nohup是linux系统的指令，用于在系统后台不挂断地运行命令。为了让你的网站始终在后台保持运行，可以用以下方式：

1.按ctrl+c 退出上面正运行的yarn进程 2.改用nohup运行

💡

若想要输出日志文件，可执行nohup yarn start > notionnext.log 2>&1 &；

3.执行结果

4.如何关闭进程

方式二：使用screen运行

1.安装screen

2.启动新会话

3.查看所有会话

4.重新连接会话

💡

在screen会话里，cd NotionNext正常执行yarn build、yarn start即可。

VPS通过宝塔方式安装NotionNext

服务器连接上的常规操作，先更新一下软件源与软件包

💡

在更新的同时可以先把Notion的模板复制到自己的账户上，将pageid复制下来备用

1.安装宝塔以及需要的环境

这里使用的是Ubuntu的操作系统，所以只需要输入以下指令就可以耐心等待自己安装完成。

输入指令后等待自动安装完成

安装完成后没错误就应该跟下图差不多，有后台的登录地址与账号密码

首次进入宝塔后，会提示选择安装一套套件，因为NotionNext是Node.js项目，所以这里可以不选择下载，点叉后进入软件商店选择要用的软件

这里安装一个nginx，因为项目默认启动的是3000端口，可以利用nginx反代到80端口，访问时就不需要IP（或域名）加端口在软件商店中搜索nodejs，选择下图Node.js版本管理器 进行安装

基本上只需要用到图片里这些软件就够用了

接下来打开Node.js版本管理器 来安装我们需要的nodejs版本和yarn 这里需要注意，新版本NotionNext所需要的版本是v18 及以上，默认的源下载速度较慢，先切换为其它源后选择更新版本列表这里推荐使用华为源(已测试过)，自带yarn模块，如果使用其它的源有可能存在库较老，点名清华源没有yarn，淘宝源编译模块

这里选择了稳定版v18.20.5进行安装演示，只要符合要求哪个版本都可以，可以根据自己的需求来进行选择安装完成后把命令行版本选择成我们下载好的版本,这样可以保证连接终端时无需手动选择node版本

可以点击模块选项，查看npm 和 yarn是否自动安装上了

看到模块都正常显示在里面就可以了

如果不太放心是否安装成功，我们可以在首页中点击终端软件进入终端内输入指令查看

在这里我们可以输入以下这些命令查看安装的软件版本

如果出现command not found等字样，看一下命令行版本是否选择正确至此所需要的环境就都安装好了

2.编译源码

首先下好NotionNext的源码

在宝塔面板文件选项中上传NotionNext的压缩包

双击解压压缩包可以将解压出来的文件夹修改为自己喜欢的名字

这里进入到目录下（这里改名字了）在此目录下进入终端

在编译之前需要先下载一些依赖与库文件这里直接输入yarn 命令自动安装出现黄色的warning警告不用管，无需担心

完成后没有红字错误应该是这个样子

这个时候可以点击右上角的关闭返回到文件界面双击blog.config.js 文件，这里我们只需要修改pageid即可后半段的en表示博客英文网页的pageid，如果有英文网页的话在en：后更换

这里我使用了一个新的模板，可以在实例文章中加一点文字，这样运行博客后可以直观的看到是不是自己的内容

粘贴pageid后保存退出即可

保存过后需要进行一次源码的编译，继续点击终端，输入yarn build进行编译

编译完成后没有报错应该就是这个样子

输入这个指令查看项目是否正常的运行yarn start 运行时提示访问3000端口并且没有报错的情况下说明项目正常运行

这个时候可以访问IP+3000端口来进行访问这里可以看到实例文章中添加入的文字，说明项目是正常的运行

到此博客代码的修改以及编译就算是完成了

3.博客项目上线运行

如果直接使用yarn start这个命令启动项目的话，在退出终端时项目会自动停止。这里就需要让项目后台运行

这里选择网站-Node项目

添加项目Node项目-根据以下图片设置自己的内容

💡

项目目录-博客的网站目录启动选项这里选择完目录默认即可项目端口默认为3000 绑定域名这里要提前做好域名解析后添加，这里是内网的IP地址

保存后就可以看到已经启用了

点击设置进去会发现反向代理已经自动设置好了，无需再手动设置在这里可以实时查看日志与保存

到此安装就结束了，可以访问设置好的域名查看博客是否搭建成功可以看到没有加端口就可以直接访问到博客

VPS通过Docker方式安装NotionNext

这里为什么要用宝塔面板安装Docker？因为Docker不同的操作系统安装的方式也不同，涉及到各种指令，切换源，乱七八糟之类的，所以使用宝塔来安装的话对新手来说更加的友好但是这对机器的配置要求会比较高，毕竟要运行一个面板还要运行一个docker，并且在构建时会生成一些缓存文件，也要注意磁盘容量是否充足