Mix-Space 前端Shiro/Shiroi搭建
一个极简主义的个人网站，纸的纯净和雪的清新。
https://github.com/Innei/Shiro
前端主题 shiro 分为开源版和闭源版本
开源版：Innei/Shiro
闭源版：innei-dev/Shiroi
闭源版需要赞助后获得权限后阅览，
作者赞助渠道：Github Sponsors 赞助 - 静かな森
二·准备
在进行这之后的操作之前需确认后端 Core 安装完成。Mix Space 后端搭建
配置系统环境
下面有多个安装 shiro 的方式。
需注意使用 Docker 安装可不必安装下列环境
1.刷新系统包缓存与安装常用/必备软件包
apt update && apt install git curl vim wget git-lfs -y
2.安装 NVM
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
3.运行 source ~/.profile 命令将环境变量重新加载到当前会话中。
source ~/.profile
4.列出 Node.JS 的可用版本。
nvm ls-remote
5.确定版本后，运行 nvm install version 命令下载并安装它。例如，安装 Node.JS 20.12.2 ， 强烈推荐 V20.12.2 版本
# 安装nvm install 20.12.2# 检查版本node -v
6.安装 pnpm pm2
npm install -g pnpm pm2
7.安装 sharp
npm i -g sharppnpm add sharp
# 配置sharp环境变量
# vim ~/.bashrc
# 在底部加上
# export NEXT_SHARP_PATH=/root/node_modules/sharp
设置主题配置
进入 Mix Space 后端，进入「配置与云函数」页面，点击右上角的新增按钮，在编辑页面中，填入以下设置：
- 名称：shiro
- 引用：theme
- 数据类型：JSON
- 数据：（在下方进行复制）
配置 .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=
三·安装使用与更新
Docker
开源版可以使用 docker-compose 进行安装，但需要注意的是 Docker 安装的 shiro 版本可能不是最新版
Innei-Shiro-Docker 此处能查看 docker 构建版本，进行比较选择安装
Docker 安装
mkdir shiro
cd shiro
wget https://raw.githubusercontent.com/Innei/Shiro/main/docker-compose.yml
wget https://raw.githubusercontent.com/Innei/Shiro/main/.env.template .env
vim .env # 修改你的 ENV 变量
Docker 启动
docker compose up -d
Docker 更新
docker compose pull
# 后续更新镜像
预构建安装使用
在 https://github.com/Innei/Shiro/releases 中下载最新预构建项目
# 解压到需要的文件夹
cd standalone
vim .env # 修改你的 ENV 变量
export PORT=2323
node server.js
构建 Shiro 项目
拉取 shiro 项目
cd /opt/mx-space
# 根据需求创建前端路径
git clone https://github.com/Innei/Shiro.git
# 将项目下载
配置 .env 文件
将准备步骤中配置好的 env 内容填入其中
cd /opt/mx-space/Shiro
mv .env.template .env
vim .env
构建项目
cd /opt/mx-space/Shiro
pnpm i && pnpm build
启动项目
1、直接前台启动，在Shiro根目录直接运行 pnpm prod:pm2，可使用 nohup 或其他使其后台运行
2、使用 Screen 实现后台保活 (推荐)
apt install screen -y
# Debian/Ubuntu安装
Screenscreen -R shiro
# 新建shiro会话
cd /opt/mx-space/Shiro
npx next start -p 2323
# pnpm prod:pm2
# 启动shiroi
启动完成后 按 Ctrl+A+D 即可退出并挂起 shiro 对话，完成 Shiro 后台运行。
注意：两种启动方式重启 servers 后都需重新启动下 Shiro
Github Action 安装（闭源版特有）
https://github.com/innei-dev/shiroi-deploy-action 将 shiroi-deploy-action 项目 fork 到自己仓库中
Secret 填写
打开fork之后的库
Settings -> Secrets and variables -> Actions
依次添加以下secret
配置
HOST服务器地址USER服务器用户名PASSWORD服务器密码PORT服务器 SSH 端口KEY服务器 SSH Key（可选，密码 key 二选一）GH_PAT可访问 Shiroi 仓库的 Github Token
配置 shiroi 的系统环境
cd ~
mkdir shiro
cd shiro
touch .env
vim .env
env 文件内容的模板，将相关内容填写到模板后环境配置完成
运行 Github Action
修改 fork 库中的 build_hash 文件为一个随机的初始哈希值 再次回到工作流就会发现开始自动部署了
四·反向代理
OpenResty 设置反向代理
以 1Panel+OpenResty 为例：
- 新建静态网站，填写对应域名
- 配置 SSL 证书开启 HTTPS
- 在配置文件最后一个
}的上方另起一行，粘贴如下配置，并保存。
双域名设置
单域名设置
五·一些问题
Github Action 报错
unzip :command not found
npm :command not found
pm2 :command not found
故障一
情况一
apt-get install zip
如果 npm 和 pm2 未安装则根据本文最开始重新安装即可
若 npm 和 pm2 安装后能使用 npm 命令 但使用 sudo npm 命令便会报 command not found
则根据下列指令进行解决
输入 which npm 可以得到/root/.nvm/versions/node/v20.12.2/bin/npm，这个是普通用户的 bin 目录
而 sudo 执行的是/usr/bin 目录，这是 root 用户的目录
所以使用 sudo 命令是识别不到这个命令的，我们可以使用以下方法来处理这个问题
sudo ln -s /root/.nvm/versions/node/v20.12.2/bin/npm /usr/bin/npm
sudo ln -s /root/.nvm/versions/node/v20.12.2/bin/pm2 /usr/bin/pm2
sudo ln -s /root/.nvm/versions/node/v20.12.2/bin/node /usr/bin/node
## node也需要使用这个方法进行处理才能完整解决
六·特别鸣谢
在搭建Mix-space前后端的过程中，我得到了玖月大佬的极大帮助。无论是技术难题的解答还是宝贵的建议，都让我受益匪浅。在此，我想向玖月表达最诚挚的感谢！他的无私分享和耐心指导不仅帮助我克服了许多难题。
七·参考文献
Mix Space - An Alternative Personal Space - Mix Space 文档
Mix-Space部署最新后端Core - 华岁云小屋