NotionNext博客vps部署教程

type

status

date

slug

summary

一、NotionNext项目介绍

NotionNext 是一个开源的基于 Notion 和 Next.js 的博客系统。它可以把你的 Notion 页面转换成一个静态博客网站，支持多主题切换、评论系统、统计等功能。使用 NotionNext，你只需要在 Notion 中编写文章，就能轻松地建立和维护自己的博客网站。

主要特点：

支持多种主题样式，可以自由切换网站外观

支持评论系统集成，方便读者互动

支持访问统计，了解网站流量情况

支持深色模式切换

支持国际化多语言

支持搜索功能

支持RSS订阅

NotionNext 的部署方式有多种选择：可以使用 Vercel 进行免费托管，也可以部署在自己的服务器上。本教程将介绍如何在 VPS 上部署 NotionNext。

NotionNext-快速免费建站 | NotionNext帮助手册

无需服务器、即使是小白也能几分钟搭建自己的独立博客站～如果你在使用Notion这款神级笔记本的话，不妨来试试顺手建个网站🤣🤣🤣，这是一款基于NotionAPI的博客系统。

https://docs.tangly1024.com/about

二、准备工作

vps购买

本教程以华为云服务器为例进行演示，配置为 CentOS 8 系统、2核2G内存。同时，由于NotionNext要求NodeJS版本≥v18，CentOS 8 是较好的选择。

鉴于如今国内访问Notion速度非常慢，更推荐使用国外（新加坡、香港、日本）的服务器

💡

centos7系统因为不支持更高版本的nodejs，而NotionNext要求Nodejs版本大于中v18,因此推荐使用centos8系统

域名准备

要选择一个合适的域名注册商进行域名购买和管理。以下是一些常见的域名注册商：

GoDaddy - 全球最大的域名注册商之一，提供多种域名后缀选择

NameCheap - 价格实惠，服务稳定，适合个人用户

阿里云 - 国内主流域名服务商，适合国内用户使用

购买域名时需要注意以下几点：

选择易记、简短的域名

确认域名可用性和价格

注意域名续费政策

如需使用国内服务器，需要对域名进行icp备案

建议选择.com、.net等主流域名后缀，这些域名更容易被用户记住和信任。如果是个人博客，也可以考虑.me、.blog等特色后缀。

本地代码配置修改

拷贝下来NotionNext项目源码，根据自己的需求进行代码的修改。

具体配置方法见原项目参考文档：

如何配置站点 | NotionNext帮助手册

如何配置NotionNext站点

https://docs.tangly1024.com/article/how-to-config-notion-next

三、服务器部署

1.安装宝塔面板

我选择使用宝塔一键安装脚本

如果你是Debian系统，可以使用以下指令：

2.上传修改后的源码到vps服务器

项目源码可以通过以下几种方式上传到VPS服务器：

使用宝塔面板的文件管理功能直接上传源码压缩包

通过SFTP工具（如FileZilla）连接服务器上传（我采用的是此方法）

使用Git克隆项目仓库到服务器（可以把代码上传到gitub，然后用git命令在vps上克隆下来）

3.安装NodeJS环境

要在服务器上安装NodeJS环境，我们可以按照以下步骤操作：

安装nvm（Node Version Manager）

使用nvm安装NodeJS

安装项目依赖管理器yarn

NotionNext要求NodeJS版本≥v18，请确保安装的是符合要求的版本。如果安装的版本不符合要求，可以使用nvm安装特定版本：nvm install v18.x.x

4.运行NotionNext

在配置完NodeJS环境后，我们可以开始运行NotionNext项目。按照以下步骤操作：

安装项目依赖

构建项目

启动项目

项目默认运行在3000端口。如需修改端口，可以在package.json中的start脚本中添加端口参数，如： "start": "next start -p 3001"

5.访问项目

项目成功启动后，可以通过 http://服务器IP:3000 访问。如果无法访问，请检查：

服务器防火墙是否开放3000端口

附：centos防火墙相关命令：

云服务器安全组是否允许3000端口入站流量

项目是否正常运行（可查看运行日志）

6.项目后台运行

为了让项目在SSH断开连接后继续运行，可以使用以下方式：

按ctrl+c 退出上面正运行的yarn进程

改用nohup运行

如何关闭进程

pkill -f "yarn start"

7.Nginx反向代理

域名解析

在域名注册商处添加A记录，将域名指向服务器IP地址

等待DNS解析生效（一般需要几分钟到几小时不等）

可以使用ping命令或在线DNS查询工具验证解析是否生效

面板部署

使用Nginx反向代理可以实现：

通过域名访问网站（无需加端口号）

配置SSL证书实现HTTPS访问

负载均衡和缓存优化

推荐使用宝塔面板进行反向代理，具体步骤：

在浏览器中打开宝塔面板网页，登录后进入网站页面

安装并启动Nginx

添加PHP站点，填写已解析的域名（其他默认即可）

设置网站配置文件，添加反向代理：

证书部署

可在宝塔面板申请免费的Let‘s Encrypt证书（有效期90天），到期后需要重新申请。

💡

注意申请let's Encrypt ssl证书时要先把反向代理关闭，申请成功后再打开即可。

自此，NotionNext博客就搭建完毕了，可以使用域名在浏览器进行访问了，更多内容可以参考原项目参考文档。

附录：常见问题解决

项目启动失败- 检查Node.js版本是否符合要求 - 确认所有依赖包安装成功 - 查看错误日志定位具体问题

无法通过域名访问- 验证DNS解析是否生效 - 检查Nginx配置是否正确 - 确认防火墙和安全组设置

SSL证书相关问题- 申请证书前确保关闭反向代理 - 检查域名解析是否正确 - 确保域名可以正常访问