Mix-Space部署最新前端Shiro

Shiro，一个极简主义的个人网站，如纸的纯净和雪的清新。

innei大佬与 Shiro ： Shiro - 全新风格，再次起航

Shiro/Shiroi为Mix-Space前端主题，其中，Shiroi为闭源版本，通过赞助 Innei Innei获取。开源闭源在部分功能上有所区别，可在官方文档看到部分闭源版本功能。

Shiro及相关项目

Vercel 部署

Shiro Vercel 部署请参阅官方文档

https://mx-space.js.org/themes/shiro

云服务器 / 本地部署

系统 / 环境要求

Linux，内核版本>4.19 (推荐 Debian11 / 12) 教程以Debian11 / 12为例
服务器内存需 2~4Gib，构建完成运行只需 512Mib甚至更低（内存小or可用内存不足的可在本地构建或者配置2~4G的 Swap）：博主服务器为2H-2G，故配置了4G Swap。
使用NVM安装Node.js v20.12.2，以及PNPM / PM2 / sharp
Screen 实现后台保活（可选）
采用 1Panel+OpenResty（可选）

必要的准备

域名：本篇所采用双二级域名模式，即前端 www.vlo.cc，后端api.vlo.cc（单域名反代可参考官方文档）
2024/9/14 为了使用OAuth，已经切换为单域名模式；2024/10/22：双二级域名貌似也行的，可以尝试
2024/11/3 叒切换为双二级域名模式，成功解决此模式下的OAuth回调问题
前后端域名所需SSL证书：需要全站HTTPS （前端本地部署跨域问题，后端配置文件 ALLOWED_ORIGINS 加上localhost:*,127.0.0.1:*
~~提前注册 Clerk 账号，前端.env配置需要~~ （core 7.x版本开始移除clerk,，.env配置文件也有所更改）

壹·NodeJS等相关环境

刷新系统包缓存与安装常用/必备软件包

apt update && apt install git curl vim wget git-lfs -y

1、安装NVM

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

2、运行 source ~/.profile 命令将环境变量重新加载到当前会话中。

source ~/.profile

3、列出 Node.JS 的可用版本。

nvm ls-remote

4、确定版本后，运行 nvm install version 命令下载并安装它。例如，安装 Node.JS 20.12.2 ， 强烈推荐 V20.12.2 版本

# 安装
nvm install 20.12.2
# 检查版本
node -v

5、安装 pnpm pm2

npm install -g pnpm pm2

6、安装sharp

npm i -g sharp
pnpm add sharp
# 配置sharp环境变量
# export NEXT_SHARP_PATH=/root/node_modules/sharp

贰·Shiro的配置与构建

一 · Core后端云函数配置

具体可参考官方文档： 后端设置主题配置

进入 Mix Space 后台，进入「配置与云函数」页面，点击右上角的新增按钮，在编辑页面中，填入以下设置：

名称：shiro
引用：theme
数据类型：JSON
数据：右侧复制以下示例，更改为自己的信息

{
  "footer": {
    "otherInfo": {
      "date": "2022-{{now}}",
      "icp": {
        "text": "豫 ICP 备 2022029096号-2",
        "link": "https://beian.miit.gov.cn"
      }
    },
    "linkSections": [
      {
        "name": "😊关于",
        "links": [
          {
            "name": "关于我",
            "href": "/about"
          },
          {
            "name": "关于此项目",
            "href": "https://github.com/innei/Shiro",
            "external": true
          }
        ]
      },
      {
        "name": "🧐更多",
        "links": [
          {
            "name": "时间线",
            "href": "/timeline"
          },
          {
            "name": "友链",
            "href": "/friends"
          },
          {
            "name": "监控",
            "href": "https://halo.vlo.cc",
            "external": true
          }
        ]
      },
      {
        "name": "🤗联系",
        "links": [
          {
            "name": "写留言",
            "href": "/message"
          },
          {
            "name": "发邮件",
            "href": "mailto:i@vlo.cc",
            "external": true
          },
          {
            "name": "GitHub",
            "href": "https://github.com/jiuyue52",
            "external": true
          }
        ]
      }
    ]
  },
  "config": {
    "color": {
      "light": [
        "#33A6B8",
        "#FF6666",
        "#26A69A",
        "#fb7287",
        "#69a6cc",
        "#F11A7B",
        "#78C1F3",
        "#FF6666",
        "#7ACDF6"
      ],
      "dark": [
        "#F596AA",
        "#A0A7D4",
        "#ff7b7b",
        "#99D8CF",
        "#838BC6",
        "#FFE5AD",
        "#9BE8D8",
        "#A1CCD1",
        "#EAAEBA"
      ]
    },
    "custom": {
      "css": [],
      "styles": [],
      "js": [],
      "scripts": []
    },
    "site": {
      "favicon": "https://halo.vlo.cc/upload/pic/J99Y.svg",
      "faviconDark": "https://halo.vlo.cc/upload/pic/J99Y.svg"
    },
    "hero": {
      "title": {
        "template": [
          {
            "type": "h1",
            "text": "Hi, I'm ",
            "class": "font-light text-4xl"
          },
          {
            "type": "h1",
            "text": "JiuYue",
            "class": "font-medium mx-2 text-4xl"
          },
          {
            "type": "h1",
            "text": "👋。",
            "class": "font-light text-4xl"
          },
          {
            "type": "br"
          },
          {
            "type": "h1",
            "text": "语言是思想的直接的现实",
            "class": "font-light text-4xl"
          },
          {
            "type": "code",
            "text": "<Developer />",
            "class": "font-medium mx-2 text-3xl rounded p-1 bg-gray-200 dark:bg-gray-800/0 hover:dark:bg-gray-800/100 bg-opacity-0 hover:bg-opacity-100 transition-background duration-200"
          },
          {
            "type": "span",
            "class": "inline-block w-[1px] h-8 -bottom-2 relative bg-gray-800/80 dark:bg-gray-200/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:animation-blink"
          }
        ]
      },
      "description": "内心湛然，则无往而不乐。"
    },
    "module": {
      "activity": {
        "enable": true,
        "endpoint": "/fn/ps/update"
      },
      "donate": {
        "enable": true,
        "link": "https://afdian.net/@huasui",
        "qrcode": [
          "https://halo.vlo.cc/upload/pic/wxdashang.png",
          "https://halo.vlo.cc/upload/pic/wxdashang.png"
        ]
      },
      "bilibili": {
        "liveId": 23359061
      }
    }
  }
}

二 · 拉取 Shiro/Shiroi

cd /opt/mx-space
 # 个人习惯在/opt/mx-space目录下部署Mx-Space与前端Shiro/Kami
 # 所以此处./mx-space为mx后端/前端项目文件夹
git clone https://github.com/Innei/Shiro.git
 # shiroi的仓库自己赞助获取即可

三 · 配置 .env

复制 .env.example 为 .env并编辑 .env 文件

cd /opt/mx-space/Shiro
mv .env.template .env
vim .env

.env示例

# 后端API地址
NEXT_PUBLIC_API_URL=https://api.example.com/api/v2
# 后端网关地址
NEXT_PUBLIC_GATEWAY_URL=https://api.example.com
# TMDB信息获取
TMDB_API_KEY=
# GitHub token，用来获取前端版本哈希
GH_TOKEN=

四 · 开始构建 Shiro/Shiroi项目

cd /opt/mx-space/Shiro
pnpm i && pnpm build

若服务器所在区域无法访问NPM官方源，可能导致依赖安装失败而出现如下报错

解决：构建前手动修改项目 .npmrc 配置文件

cd /opt/mx-space/Shiro
vim .npmrc
  # 1 ↑修改registry为taobao源(https://registry.npmmirror.com)或其他国内镜像源
  # nrm use taobao
  # 2 ↑若安装有nrm (npm 的镜像源管理工具）也可使用nrm
pnpm i && pnpm build
  # 最后重新安装依赖、构建

构建时间较慢长，需耐心等待...

叁·Shiro 启动！

1、直接前台启动，在Shiro根目录直接运行 pnpm prod:pm2，可使用nohup或其他使其后台运行

2、使用Screen实现后台保活 (推荐)

apt install screen -y
  # Debian/Ubuntu安装Screen
screen -R shiro
  # 新建shiro会话
cd /opt/mx-space/Shiro
npx next start -p 2323
# pnpm prod:pm2
  # 启动shiroi

启动完成后按 Ctrl +A+D即可退出并挂起 shiro 对话，完成Shiro后台运行。

注意：两种启动方式重启servers后都需重新启动下Shiro

Screen食用教程：https://www.mintimate.cn/2021/09/02/howToUseScreen/ 很不错的教程

肆·反代与更新

一 · 反向代理

以1Panel+OpenResty为例

新建静态网站
配置SSL证书开启HTTPS
在add_header Strict-Transport-Security "max-age=31536000";下方或者最后一个}的上方另起一行CV反代配置

二 · Shiro 更新

# 进入工作目录
cd /opt/mx-space/Shiro
# 更新
git pull
# git push
screen -R shiroi -X quit
# nrm use taobao (根据服务器 位置 / 网络 情况选择是否换源)
# 安装依赖、构建
pnpm i && pnpm build
# 使用screen实现后台启动
screen -R shiroi
npx next start -p 2323

~~上面更新方法没试过~~，试过了，很棒！是参考Arthals大佬的文章 ~~偷来的~~

国内服务器拉不到git的话我就只能用笨方法更新：本地拉取git在上传服务器，然后从上文的 贰·Shiro的配置与构建中二到四流程再走一遍🤣（🥹

三 · Markdown 扩展语法

请阅读 https://shiro.innei.in/#/markdown

伍·踩坑

一 · 字体拉取失败

Shiro构建时会拉取字体文件，若服务器无法Ping通fonts.googleapis.com / fonts.gstatic.com，可能会出现如下报错，最终构建失败
大概是服务器解析到的IP不太行.....

解决：更改hosts文件，为fonts.googleapis.com / fonts.gstatic.com指定一个服务器可以Ping通的IP

可以用itdog查下字体域名的ip，然后服务器尝试ping一下，哪个ping的通就改哪个

二 · OAuth2 相关问题

回调报错redirect_uri

第二种方法：复制Core/Shiro部署两篇文章内新的双域名反代配置

FAQ：

新的配置文件有什么更改呢？

我在原前后端反代配置示例文件的每个location中都添加了如下配置（貌似后端添加就行，我为了保险前后端全部添加了）。

做完这些仍然redirect_uri怎么办？

大概率是缓存问题，清除缓存OR浏览器开隐私模式测试是否正常。

location / {
    ...
    proxy_set_header X-Forwarded-Proto $scheme;
    ...
}

后端不认主
如果你的后端core版本在7.0.3-7.0.6, 或7.0.6之后的某版本开始配置OAuth的，一直无法成功（猜测原因可能是某个版本有BUG,Core升级无法解决，回退版本可解）

包括不限于：后端不认主人，前后端主人无法登录，redirect_url 错误等，

可以尝试Core退回7.0.2-alpha.0版本：配置oauth并验证设为主人账户，前后端使用OAuth进行登录测试（仍然有redirect_url的问题可能有缓存作怪，可以尝试新环境测试），测试没问题后直接升级latest版本

参考文章

感谢官方以及社区大佬们的贡献！

Arthals:mx-space + Shiro：如纸一般纯净的新博客
官方文档
Yukina