🛠️本站的搭建过程

type
status
date
slug
summary
tags
category
icon
password
😀
打算总结一下本站的建站过程，为各位提供参考，少踩一些坑，以后出现类似的问题也能供自己查阅。

前言

本站主要依赖NotionNext，一个可以同步Notion的博客网站，非常好用，项目主页：
NotionNext-快速免费建站 | NotionNext帮助手册
无需服务器、即使是小白也能几分钟搭建自己的独立博客站～如果你在使用Notion这款神级笔记本的话，不妨来试试顺手建个网站🤣🤣🤣，这是一款基于NotionAPI的博客系统。
NotionNext-快速免费建站 | NotionNext帮助手册
https://docs.tangly1024.com/about
NotionNext-快速免费建站 | NotionNext帮助手册
博主提供了多种搭建方法，最省时省力的就是直接托管到Vercel上。
Vercel 是一个面向前端开发者的云平台，专注于为静态网站和现代 Web 应用提供极致的部署和性能优化体验。它允许开发者快速部署、预览和发布网站或应用，并且提供了自动化的 CI/CD 服务，帮助开发者在每次代码变更后自动构建和部署项目。
部署的过程确实很丝滑，但是出于以下考虑，最终我决定私有化部署：
  • Vercel的访问不太稳定，延迟有点高。我曾尝试过套一些CDN加速，但是效果仍然不能令我满意（CDN加速中国大陆需要有备案）。
  • 托管在Vercel上时，经常出现莫名奇妙的404，难以排查问题（推测还是与访问速度有关）。

主站搭建

服务器配置：腾讯云，广州，2C2G
操作系统：Ubuntu 24.04
NotionNext 版本：4.7.5

NotionNext搭建

搭建过程看似简单，其实也有一些值得注意的点，总结下来：
  1. 注意 Node.js 的版本。
  1. 记得配置镜像源（如果网速不行的话）

安装 Node.js

使用 nvm 进行安装，可以方便的控制版本。
NVM（Node Version Manager）是一个用于管理和切换 Node.js 版本的工具，方便开发者在同一台机器上安装、卸载和切换不同的 Node.js 版本。
⚠️
这里的 Node.js 的版本非常重要。
版本过低满足不了依赖需求，编译会出错误；
过高的版本，如v20及以上会出现莫名其妙的http请求错误，请一定注意！
  1. 下载
    1. 安装
      我尝试了许多版本，v18.20.4 可以成功部署。

      NotionNext & build

      1. 前期准备
          2. 从github上拉取代码
          推荐先安装yarn，如果无法访问到官方源，可以考虑切换镜像
          Yarn 是一个快速、可靠且安全的 JavaScript 包管理工具，旨在替代 npm，提供更好的依赖管理和一致的安装体验。
      1. 安装项目依赖
        1. 构建项目
            2. 在 blog.config.js 中配置页面ID后，构建项目
        1. 启动项目
            2. 构建完成之后，运行项目
        应用默认监听3000端口，可以利用端口转发打开看看效果，或者直接 curl 测试下也行。

        应用管理

        1. nohup 挂起
            2. 使用 nohup 将应用挂在后台运行，并输出日志到文件当中。
            使用 tail 命令查看日志
        1. pm2 管理
            2. PM2 是一个功能强大的 Node.js 应用进程管理器，专门用于管理和守护 Node.js 应用程序。它可以确保应用程序在崩溃或服务器重启后自动重启，并提供了一些高级功能，如负载均衡、日志管理和性能监控。
            安装 pm2
            启动应用
            查看应用
            查看输出日志
            重启应用
            注意，如果重写了相关的环境变量，请开启 --update-env 选项。
            默认情况下，pm2 不会更新应用的环境变量。

        域名 & SSL证书

        域名

        1. 购买域名
            2. 搭建网站需要有一个好记的域名，主要从
            1. 云服务器商（腾讯云、华为云、阿里云等）
            1. 域名商（Namesilo等）
            购入。
        1. DNS解析
            2. 在域名托管处（一般是你购入域名的地方）会有DNS解析服务，请将你的域名解析到你的云服务器所有的公网IP上。
            如果你不使用子域名，那我推荐至少将根域名和www添加到解析表当中。

        SSL证书

        申请SSL证书是为了给服务提供TLS安全支持，毕竟http是明文传输。
        一般的云服务器厂商允许可以帮你申请免费证书（但是有上限数量），我使用 acme.sh 申请并管理证书。
        acme.sh 是一个纯 Shell 脚本的 ACME 协议客户端，用于自动化获取和管理 SSL/TLS 证书（如 Let’s Encrypt 证书）。它轻量、无依赖且支持多种 DNS API，能够方便地为网站实现 HTTPS。
        1. 安装 acme.sh
            2. 安装完成后，acme.sh 脚本会自动添加到 ~/.acme.sh/ 目录中，并自动配置好环境变量。
            可以尝试运行 acme.sh 观察安装成功，如果提示没有该命令，请自行配置PATH环境变量。
        1. 邮箱注册
          1. 验证所有权
              2. 申请证书的过程，acme.sh会验证域名的归属权，请在 nginx 做好相应的配置。
              nginx 的配置文件一般在 /etc/nginx/conf.d 文件夹下。
              新建一个配置文件 yourconf.conf ，该文件夹下的配置文件都会被引入 nginx.conf 配置文件。
              配置完成之后，重载 nginx。
          1. 申请证书
            1. 安装证书
                2. 不出意外，证书申请成功，接下来需要安装证书。
                至此，证书申请完成，上述的
                即为证书相关的密钥。
            1. 配置 nginx
                2. 配置文件的参考如下，需要修改的地方有
              1. server_name ，上一步你所申请的域名。
              2. ssl_certificate & ssl_certificate_key ，已经安装的密钥和证书。
                3. 当然，也可以增加一个虚拟主机，转发流量到443端口。
            至此，一个基础的NotionNext博客已经搭建完成，现在应该能够通过HTTPS请求访问你的博客。

            加速配置

            NotionNext 通过 NotionAPI 来请求页面信息。
            我测试下来，每一次页面获取消耗的时间在 5000～10000ms左右。
            这是非常难以接受的速度（对我而言）！
            NotionNext 底层依赖 react-notion-x 项目，而该项目底层的 HTTP 请求使用 ky。
            非常遗憾，ky 目前并不支持设置流量转发。

            global-agent

            但是，我们可以另辟蹊径，使用 global-agent 来托管 Node.js 的HTTP请求。
            global-agent 是一个 Node.js 库，用于全局代理 HTTP(S) 请求。它可以让所有通过 http 和 https 模块发出的请求自动走代理，适用于需要通过代理访问外部资源的场景，无需手动为每个请求配置代理。

            安装依赖

            在 NotionNext 4.7.5，global-agent的依赖会与其有些不兼容，但是可以强行安装，目前测试下来没有问题。

            修改源码

            既然涉及到了请求的部分，那不可避免需要对 NotionNext 的源码进行一定的修改。
            具体需要修改的文件为 NotionNext/lib/notion/getPostBlocks.js
            具体函数为 getPageWithRetry
            修改部分如下：
            需要注意对客户端的检测即可。

            环境变量

            在启动的时候，先进行环境变量的设置，global-agent会自动检测环境变量初始化。
            接着启动项目即可。
            如果你使用了 pm2 进行应用管理，别忘记更新环境变量。
            pm2 restart 命令不会自动更新环境变量。

            关于图片

            如果直接将图片托管在Notion上，那么会有两个问题：
            • 图片加载太慢
            • Notion对图片会有压缩
            因此，我建议自建图床。
            我的图床分别搭载在腾讯云和七牛云上，其中七牛云每个月有10G的免费流量，对于我这种体量的博主已经非常足够。
            关于图片上传，
            • windows端，我选择的是PicGo
            • Mac端，我使用uPic
            二者的使用体验都非常丝滑。
             
            上一篇
            UE5 网络同步入门
            下一篇
            std::forward 原理解析
            Loading...
            文章列表
            目录