Notion发布博客(nextjs-notion-starter-kit)

环境及配置

环境支持

1. 如果本地运行或者服务器部署，需要 node.js 最低版本为 16。由于 node 18 及以上版本需要 glibc-2.28 支持，建议直接安装 node 16 最新版本即可；

2. 本地运行或者服务器部署，需要安装 git

site.config.ts 配置

• rootNotionSpaceId 配置
• 此配置决定博客访问的根目录。通过 Notion 分享的页面的 ID 确定访问的页面。
• 在 Notion 中选定作为博客主页的页面，点击右上角的 share 按钮，打开 share to web，就会生成类似 https://muddy-xylocarp-8cd.notion.site/Foxit-Blog-9bc1d175052c444287306270bee69601 链接的分享链接，获取 Foxit-Blog- 之后的 ID 串，此 ID 串配置到 rootNotionSpaceId 即可。

• rootNotionSpaceId 配置
• 此配置可以限定当前博客访问子页面时，仅仅控制在 Notion 当前空间，如果不需要严格的权限控制，可以不设置
• spaceId 可以在 setting & members → Identity & provisioning → Setup information → Workspace ID 获取

• name，domain，author 配置
• 此配置应该是用于搜索引擎抓取博客信息，配置个人网站信息即可

• social usernames 配置
• 默认会设置 GitHub，twitter等社交账号链接展示在主页右侧和底部，如果不需要注释掉即可

• isPreviewImageSupportEnabled，isRedisEnabled 配置
• 用于启用或禁用 Notion 页面的预览图像支持。在 Notion 中，每个页面都可以设置一个预览图像，它通常用于在社交媒体等平台上展示页面的缩略图。
• 如果想要提高加载图像的速度，可以开启 redis 支持。redis 信息在 .env 文件中配置。

• pageUrlOverrides 配置
• 此配置用于给链接以访问别名，如果一个访问链接为 xxx.notion.site/xxx-blog-xxxidxxx ，如果使用 /foo 指向 xxxidxxx ，则使用博客访问此页面时，访问链接则会替换为 域名/foo 。
• 可以根据需求设置

• navigationStyle 设置
• 此配置用于设置导航样式

• navigationLinks 设置
• 添加导航链接

其他设置

• 去除页面右上角GitHub链接
• 可以通过隐藏 svg 链接图标的方式，去除此链接。
• components 文件夹下，GitHubShareButton.tsx 文件修改 svg 标签属性，width 和 height 设置为 0 即可

本地部署

1. 本地安装 node 环境和 git

2. clone 项目

3. 运行 npm install

4. 运行 npm run dev

5. 通过浏览器访问 localhost:3000

服务器部署

安装 git

#!/bin/bash

# 安装依赖包
yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-ExtUtils-MakeMaker

# 创建安装目录
mkdir -p /home/data/git
cd /home/data/git

# 下载Git源码包
wget https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.40.0.tar.gz

# 解压源码包
tar -zxvf git-2.40.0.tar.gz

# 进入源码目录
cd git-2.40.0

# 编译并安装
make prefix=/home/data/git all
make prefix=/home/data/git install

# 添加环境变量
echo "export PATH=/home/data/git/bin:$PATH" >> /etc/profile
source /etc/profile

# 验证版本
git --version

安装 node

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

nvm install 16
nvm use 16
nvm alias default 16

服务器运行

1. clone 项目代码

2. npm install ,如果报错提示 npm install --force ,可以执行 npm install --force 安装 node 包

3. npm run build 构建

4. npm run start 启动

pm2 管理 node 进程

npm install -g pm2

pm2 start npm --name notion-blog -- run start

pm2 logs notion-blog

pm2 stop notion-blog

Nginx 配置

server {
      listen       80;
      server_name  blog.xxx.com;

			add_header Cache-Control no-cache;
    	add_header Cache-Control private;
			add_header Cache-Control max-age=3600;
	
			return 301 https://blog.xxx.com;
  }

server {
      listen       443 ssl;
      server_name  blog.xxx.com;

      ssl_certificate      ./cert/cert.pem;
      ssl_certificate_key  ./cert/cert.key;

      ssl_session_cache    shared:SSL:1m;
      ssl_session_timeout  5m;

      ssl_ciphers  HIGH:!aNULL:!MD5;
      ssl_prefer_server_ciphers  on;

			add_header Cache-Control no-cache;
    	add_header Cache-Control private;
			add_header Cache-Control max-age=3600;

      location / {
				proxy_pass http://{ip}:{port};
      }
  }