VPS裸机安装NotionNext个人博客

关于

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`源码

javascript


#第一次连接上服务器更新一下软件包
apt update && apt upgrade

javascript


#安装Git-用于拉取Github上的源码
apt install git

javascript


#拉取nvm源码
git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

javascript


#若因为网络问题无法访问到github，请使用以下指令拉取nvm源码
git clone https://gitee.com/koalakit/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

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

javascript


#将nvm设置为系统环境变量
echo "source ~/.nvm/nvm.sh" >> ~/.bashrc

javascript


#更新一下环境变量
source ~/.bashrc

shell


#安装NodeJS,作者使用的v16.14.0版本已经安装不成功了，所以切换最新版
nvm install v23.11.0

3.安装`yarn`环境

javascript


#npm安装yarn
npm -g install yarn

javascript


#若网络不通畅可以选择切换npm镜像为淘宝网镜像
#切换后请重新输入npm -g install yarn 重新安装尝试
npm config set registry http://registry.npm.taobao.org

4.部署`NotionNext`

javascript


#首先拉取NotionNext源码
#网络不通畅也可以选择手动下载上传到服务器上
git clone https://github.com/tangly1024/NotionNext && cd NotionNext

javascript


#执行命令自动会自动安装项目所有依赖的脚本和库
yarn

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

javascript


#第四行 process.env.NOTION_PAGE_ID 后修改ID
nano blog.config.js

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

javascript


#每次修改完blog.config.js文件都要重新编译一遍源码
yarn build

javascript


#编译完成后就可以启动博客了
yarn start

💡

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

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

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

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

方式一：nohup运行

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

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

javascript


cd NotionNext

nohup yarn start >/dev/null 2>&1 &

💡

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

3.执行结果

javascript


[root@tangly1024 ~]# nohup yarn start >/dev/null 2>&1 &
[1] 5240
# 会打印出后台 运行的进程号。

4.如何关闭进程

javascript


pkill -f "yarn start"

方式二：使用screen运行

1.安装screen

javascript


# Debian/Ubuntu
sudo apt-get install screen

# CentOS/RHEL
sudo yum install screen

# Fedora
sudo dnf install screen

# Arch Linux
sudo pacman -S screen

2.启动新会话

javascript


screen -S session_name

3.查看所有会话

javascript


screen -ls

4.重新连接会话

javascript


screen -r session_id_or_name
# 示例
screen -r 12345  # 使用ID
screen -r session_name  # 使用名称

💡

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

VPS通过宝塔方式安装NotionNext

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

javascript


#要注意不同的操作系统指令是不同的 不要盲目复制粘贴使用
sudo apt-get update
sudo apt-get upgrade

💡

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

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

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

javascript


#要根据实际操作系统安装对应的版本，下为Ubuntu系统
wget -O install.sh https://download.bt.cn/install/install_lts.sh && sudo bash install.sh ed8484bec

javascript


#如果出现wget command not found,输入以下指令安装即可
sudo apt-get install wget

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

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

javascript


#这里是安装好后宝塔的信息
https://192.168.175.128:28864/3aeb3954
账户名：t8dhxw2d
密码：1f273132

首次进入宝塔后，会提示选择安装一套套件，因为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是否自动安装上了

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

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

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

javascript


#查看nodejs安装版本号
node -v
#查看npm安装的版本号
npm -v
#查看yarn安装的版本号
yarn -v

如果出现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，并且在构建时会生成一些缓存文件，也要注意磁盘容量是否充足

1.安装Docker环境

这里宝塔的安装方式就略过了

进入宝塔的面板后在左侧就可以看到Docker选项-点击立即安装

安装方式这里选择默认就好了

像这样就是安装完成了

2.构建NotionNext的Docker镜像

这里还是先到文件这栏，将下载到的NotionNext网站源码上传上去后解压这里改了名字，可以根据自己的想法更改

进入文件夹中照例修改一下blog.config.js文件

照例只要修改pageid就可以了，其它的变量应该在notion笔记中的配置中心添加就可以保存后退出即可

保存退出之后在目录下点开终端，进行镜像构建

在终端下只需要输入下面这个指令等待构建即可

javascript


#不是root用户的情况下需要加sudo
docker build -t name .

#这里的name是镜像名称，可以根据自己的喜好进行修改，在name后有空格加一个点，不要落掉
#下面是我修改好的样子
sudo docker build -t notion .

构建镜像的时间是根据网络环境和硬件配置来决定的，耐心等待，所以速度看着很快。如果构建时出现带有yarn等字样的红字报错构建失败，原因是因为网络问题，这个时候重新输入构建命令继续构建，多尝试几次。正常构建完后应该跟图片这样差不多，蓝色字体无报错。

这里返回宝塔面板Docker界面中-本地镜像查看有没有镜像如果看到好多个不同的镜像，请检查磁盘容量是否不足导致构建失败

至此NotionNext的镜像就构建完成了

3.创建NotionNext站点

直接在构建好的镜像后方点击创建容器

这里聊一下部分的设置

💡

1.容器名称：顾名思义设置自己好记的名称

2.本地端口可以修改为除80 8080 443以外的所有端口，后期上线可以安装nginx进行反代去端口和证书

3.容器端口：因为项目本身使用的就是3000端口，所以这里固定3000即可

4.对外暴露：在测试阶段可以将这个选项打开，那样就可以通过IP或域名

5.加本地端口号的方式从外网访问，记得服务商处也要放行端口

6.这里是测试是否成功运行，所以打开此选项

7.关闭的话，因为机器本身的防火墙限制，只能机器自己访问自己，从外网是访问不到的，这个情况适合上线后隐藏掉本身的项目端口

在点击创建后来到容器选项卡中就可以看到运行状态

这个时候就可以访问机器IP地址+端口号查看是否搭建成功这里IP和上文不同是因为重置了一下虚拟机配置，重新分配的IP，不用在意

可以来到容器管理界面-容器日志，在这里的日志也可以看到在正常的运行被访问

到此整个博客算是搭建成功了

4.隐藏端口号

相信不少朋友是要把博客上线的，上线免不了需要隐藏3000端口，免得被人访问，还要安装证书之类的为了解决这些问题，这里安装一个Nginx就可以了

在宝塔面板左侧-软件商店-搜索Nginx下载即可

安装完成后，可以先到Docker中把原来的容器删除掉重新创建一个，这次要把对外暴露开关关闭

创建完后可以在管理-容器日志里查看是否正常启动

这个时候就可以去到网站选项中添加一个反代，用于隐藏端口这里的参数设置好后确认

💡

域名：做好域名解析，或直接的IP均可，如有域名的情况下，做好解析工作和备案工作

目标：这里是反代我们已有的项目，所以选择URL地址就可以了。后面的值填入127.0.0.1：设置的本地端口号，这里的127.0.0.1是指向机器本身

发送域名：默认生成即可，无需修改

备注：修改为自己好记的备注即可

确认后，就可以直接访问设置好的域名选项这里已经不加端口便可以访问

再次访问3000端口就可以看到已经成功的隐藏了可以再到容器日志里看看日志是否正常，这里就不演示了

其它方面，例如证书申请，可以直接在设置中申请，这点在宝塔上确实好评，点一点就可以申请到，还会自动续签，因为我这里使用的是内网的IP无法申请证书，所以没有办法演示，下面是申请的入口

到此基本上搭建过程就结束了

关于

安装要求：

VPS通过直装方式安装NotionNext

1.安装Git拉取nvm源码

javascript

javascript

javascript

javascript

2.使用nvm安装NodeJS

javascript

javascript

shell

3.安装yarn环境

javascript

javascript

4.部署NotionNext

javascript

javascript

javascript

javascript

javascript

5.重要-项目后台运行

javascript

javascript

javascript

javascript

javascript

javascript

javascript

VPS通过宝塔方式安装NotionNext

javascript

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

javascript

javascript

javascript

javascript

2.编译源码

3.博客项目上线运行

VPS通过Docker方式安装NotionNext

1.安装Docker环境

2.构建NotionNext的Docker镜像

javascript

3.创建NotionNext站点

4.隐藏端口号

欢迎来到我的博客

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

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

3.安装`yarn`环境

4.部署`NotionNext`

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