本地部署 notion-nextjs-starter-kit
🥇

本地部署 notion-nextjs-starter-kit

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

准备条件

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

    配置网站

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

    修改 site.config.js

    notion image
    rootNotionPageId:希望展示的页面的根目录
    name、domain、author:大概是跟SEO相关,修改成自己的信息
    description、socialImageTitle、socialImageSubtitle:改成自己的信息
    twitter、github、linkedin:社交链接,改成自己的,如果不需要可以注释。

    修改网站图标

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

    本地测试

    修改好配置之后,可以本地测试一下是否配置生效。在有 Nodejs 的环境下,在项目根目录执行
    npm install
    npm run dev
    然后就会提示你打开本地的 localhost:3000
    notion image
    这里本地打开的网页是实时抓取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
    notion image
    可以看到,这一服务启动成功,端口为 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_certificatessl_certificate_key ,配置完成后,检验nginx 配置
    nginx -t 
    如有错误,可根据错误Debug,如无误,重载nginx 配置,
    nginx -s reload
    设置好对应的域名解析,即可顺利用你的域名访问你的网站了。

    Loading Comments...