本地部署 notion-nextjs-starter-kit

notion-nextjs-starter-kit 是 transitive-bullshit 开源的一款用 Notion 建站的项目，相比于 Notion 自身的分享页面、cloudflare worker 建站，它都有其更加可取之处，本站也是用这个项目建站的。作为项目本身，其在 README 中只提供了部署到 vercel 的方法，但 vercel 在几个月前的一个时间点以后，中国大陆访问其速度差了很多。因此，对于有境内访问需求的，需要将网站部署在线路更好的境外服务器或者境内服务器，也便有了此文章。

准备条件

一台 Linux 服务器。推荐 RAM > 256MB

配置网站

fork nextjs-notion-starter-kit，Clone 代码到本地，按照其 README 的说明配置相关信息。

修改 site.config.js

rootNotionPageId：希望展示的页面的根目录

name、domain、author：大概是跟SEO相关，修改成自己的信息

description、socialImageTitle、socialImageSubtitle：改成自己的信息

twitter、github、linkedin：社交链接，改成自己的，如果不需要可以注释。

修改网站图标

网站的图标位于 public 目录下，为了避免尴尬，建议删除或者改成自己喜欢的图标

本地测试

修改好配置之后，可以本地测试一下是否配置生效。在有 Nodejs 的环境下，在项目根目录执行


npm install
npm run dev

然后就会提示你打开本地的 localhost:3000

这里本地打开的网页是实时抓取Notion上的数据处理渲染的，因此存在刚打开时较慢的情况，耐心等待。

浏览后如果没有问题，修改完成后将代码推送到 Github（方便服务器拉代码）。

部署

配置第一次启动

ssh 进入 Linux 服务器后，安装 NodeJs 环境。这里使用一种非常快速粗暴的安装方法


// debian/ubuntu
apt install npm
npm install -g n
n stable

拉取代码后，进入到项目目录


npm install 
npm run build

这需要一定的时间，你会看到终端打出很多页面内容的信息。npm build 相当于是先把Notion上的页面信息抓取了一遍存起来。


npm run start

可以看到，这一服务启动成功，端口为 3000

使用 pm2 管理进程

为了使 Node 进程持久化，使用进程管理工具，推荐使用 pm2


npm install -g pm2

在项目目录下，启动进程


pm2 start npm --name mysite -- run start # --name 后面可以修改为你喜欢的名字

检查进程是否启动成功，即查看该进程的日志，检查是否有 error，


pm2 logs mysite

查看所有进程


pm2 l

有时会遇到服务卡死的情况，这时就需要重启该进程


nginx reload mysite

Nginx 反向代理

使用源里默认的nginx


apt install nginx -y

在 /etc/nginx/site-enables 创建配置文件 yourdomian.conf


server {
      listen 80;
      listen [::]:80;
      server_name yourdomain.com;
      server_name www.yourdomain.com;

      listen 443 ssl http2;
      listen [::]:443 ssl http2; 
      ssl_certificate /etc/nginx/ssl/youdomian.com/fullchain.pem;
      ssl_certificate_key /etc/nginx/ssl/youdomian.com/key.pem;
      ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
	    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
	    ssl_prefer_server_ciphers on;
	    ssl_session_cache shared:SSL:10m;
	    ssl_session_timeout 10m;

    location / {
	    proxy_pass http://127.0.0.1:3000;
		  proxy_set_header Host $host;
	    proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	    proxy_set_header REMOTE-HOST $remote_addr;
    }

修改 server_name 后面的 domain 为你的域名，为你的域名申请证书并放到指定目录下，配置正确的 ssl_certificate 和 ssl_certificate_key ，配置完成后，检验nginx 配置


nginx -t

如有错误，可根据错误Debug，如无误，重载nginx 配置，


nginx -s reload

设置好对应的域名解析，即可顺利用你的域名访问你的网站了。