Arthals' ink

Back

壹・为什么要使用 Shiro#

其实最开始基于 WordPress + Argon 的博客系统可以正常运作,但前段时间发现因为没有设置缓存插件的原因,我的博客甚至扛不起友人的一次全国测速,当请求数只要高到几十 QPS,即可导致 MySQL 的锁表、高 CPU 和高内存占用,进而导致服务器所有服务均不可用,必须需要强制重启才可以恢复,这无疑是十分离谱的。再加上对于 PHP 的完全不了解,所以我就动了迁移博客的想法。

由于自己人菜瘾大还颜控,所以我为新的博客框架设立了如下要求:

  • 足够好看
  • 可定制,足够好玩
  • 使用的技术栈最好是比较新的,如果能和我的已有技术栈重叠就更好了(方便魔改 hhh)

最开始我盯上了 xLog,它足够好看、好玩,内置的 Markdown 编辑器也很合我的口味,但好不容易折腾完了之后才发现其主站域名在国内已经阻断,且 IPFS 系统导致媒体在国内也不可用,更不必提其每次操作都需要 MetaMask 发起区块链操作这种让我感觉很奇怪的问题,所以在草草同步完几篇现有博文后便又搁置了。

我本想在这个暑假尝试移除 xLog 中和区块链相关的东西并尝试私有化部署,但几经搜索都没找到很好的教程,CONTRIBUTING 看了也感觉帮助不大,所以还是不了了之。

正当我心灰意冷准备还是老老实实回到 WordPress 的怀抱时,我无意中看到了 Innei 大佬在 xLog 上发的文章,并顺藤摸瓜找到了他的主站,从而得知了 mx-space + Shiro 这套系统,进过了解后顿时感到其完美符合我的需求,故开始了迁移的尝试。

贰・踩坑#

后端 mx-space#

官方网站

仓库地址

采用 Docker 部署,部署过程中按照文档操作即可。我此前从未用过 Docker,属于是纯现学,顺带捡起了之前下过但没有用过的 OrbStack(一个更好看的 Docker Desktop 的替代品)

OrbStack

按照 社区教程,在腾讯云轻量服务器上通过宝塔面板部署后端,并配置反向代理。

Cleanshot-2023-09-06-at-18.12.41

先申请 SSL 证书,选择 Let’s Encrypt 证书即可。

然后修改配置文件,添加反向代理配置(不要使用宝塔面板自带的反向代理配置,因为其会导致 WebSocket 建立实时状态链接不可用)。

进入后台 - 设定 - 系统 - 网站设置,按照如下配置设定:

Cleanshot-2023-09-06-at-18.23.46

前端地址:https://arthals.ink

管理后台地址:https://api.arthals.ink/qaqdmin

API 地址:https://api.arthals.ink/api/v2

Gateway 地址:https://api.arthals.ink

至此,后端部分完成配置。

前端 Shiro#

参考:

基本上按照官方教材配置即可,注意不要使用 Docker 部署,就正常的 pnpm ipnpm build 编译即可,Docker 部署经尝试存在问题。

注意,如果你的机子配置很低(像我一样,2H4G 的最低配置腾讯云轻量服务器),你可能无法在服务器上编译,这时你需要首先在本地编译后,使用 SFTP 推送 .next 文件夹到服务器。

特别地,你可能会发现 .next 文件夹很大(~1G),导致 SFTP 上传很慢,对此你可以通过将实际运行并不需要但却占有极大体积(~700MB)的 .next/cache 文件夹加入到你的 .vscode/sftp.jsonignore 配置项里,从而忽略它,实现加速上传。

服务器进入包含 .next 的文件后,通过 pm2 启动服务:

↑ 此为 pm2 配置文件,请放到 .next 同一文件夹下。

.
├── ecosystem.config.js
└── .next
text

然后运行 pm2 start 即可启动服务并加入守护进程。

你可以使用 pm2 listpm2 monit 来监视运行状况。

注意对于配置中使用的后端配置 json,前端并非动态绑定的,而是在打包的时候单次请求,所以如果你有任何对于 shiro theme config 的修改,都需要重新编译(以及使用 pm2 重启该服务)。

最后,按照后端的同样配置方式,建站并设置 2323 端口的反向代理即可。

叁・不足#

以下为具体使用过程中遇见的问题 / 想要改进的地方,正在抓紧学习 React / Next.js 中,希望能尽快提请 PR 来帮助 Innei 大佬解决 / 改进吧。

  • 不支持定时发布、草稿保存

  • Markdown 不支持 LaTeX 渲染,支持,但需要在 $ $ 和内容间额外加入空格,且不支持块级语法: 都已完全支持。

     $ \lim _{R \rightarrow+\infty} I(R)=0 $
    latex

    lim_R+I(R)=0\lim \_{R \rightarrow+\infty} I(R)=0

  • 希望 Markdown 支持类似 xLog 一样的实时预览,支持,但实测编辑器仍存在 Bug。

  • Github 代码块在网络不佳时无法正常显示

  • 后台有新版本的时候的升级提示无法永久关闭(甚至不关闭的话会堆叠) mx-admin 的最新版已解决。

肆・更新#

更新前端#

如果你有本地更改,你可以参照下述方法更新:

# 进入工作目录
cd /home/ubuntu/Mx-Space/shiro
# 设置代理
export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:7890
# 更新
git fetch origin
git merge origin/main --no-gpg-sign -m "merge: sync with latest version"
# git push
pm2 stop Shiro
# 重新安装依赖,打包,部署
nrm use taobao
pnpm i
pnpm build && pnpm prod:pm2
bash

注意,Next.js 打包所需内存较大,如果你的内存不够(≤ 4 GB),请不要尝试在服务端打包,而是在本地打包后上传 .next 文件。另外 git merge 有冲突的时候,你可能需要手动合并。

如果你没有本地更改:

# 进入工作目录
cd /home/ubuntu/Mx-Space/shiro
# 设置代理
export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:7890
# 更新
git pull
# git push
pm2 stop Shiro
# 重新安装依赖,打包,部署
nrm use taobao
pnpm i
pnpm build && pnpm prod:pm2
bash

如果你有本地更改:

更新后端#

更新 core,同时更新捆绑的 admin#

docker pull innei/mx-server:latest
# 重新运行
docker compose up -d
# 可选,移除旧的镜像
docker images | grep 'innei/mx-server' | grep -v 'latest' | awk '{print $3}' | xargs docker rmi
bash

注意,这只会更新最新的 latest tag 版本,如果你想要体验 alpha 版本,请自行更改 docker pull 指令至对应的 tag 版本。

单独更新 admin#

mx-admin 有时候会出现 admin 的跨小版本升级,此时无法通过更新 core 的 docker 版本更新,你可以参照下述方式更新:

首先,前往 Release 页面,找到最新的版本,复制 release.zip 的下载链接,然后:

# 在容器外部下载 release.zip(也可以直接在容器内部下载,如果网络通畅的话)
wget https://github.com/mx-space/mx-admin/releases/download/v3.38.1/release.zip
# 如果是在容器外部下载,将 release.zip 上传到容器内部
docker cp release.zip mx-server:/app
# 进入容器
docker exec -it mx-server /bin/bash
# 进入工作目录
cd /app
# 解压 release.zip,解压出来的应该是 dist 文件夹
unzip release.zip
# 删除旧的 admin 文件夹
rm -rf /app/admin
# 移动新的 admin 文件夹
mv /app/dist /app/admin
bash

如此,即可完成 mx-admin 的手动更新。

mx-space + Shiro:如纸一般纯净的新博客
https://arthals.ink/blog/shiro
Author Arthals
Published at September 6, 2023
Comment seems to stuck. Try to refresh?✨