# 前言
近日尝试在新电脑上配置博客环境，发现原来的 Shoka 主题已经过于陈旧了，环境搭建非常困难，依赖的软件包版本老旧，并且原作者没有时间在进行维护和开发，已经到了需要动手解决以下的时候了。在之前的文章《从 Valine 迁移到 Waline》中，介绍了从 Valine 迁移到 Waline 的方法。因为 Shoka 主题的原因，在迁移过程中遇到了很多问题，只能通过一些临时的方法来解决，造成了维护上的困难。这也最终让我下定决心更换到新的 ShokaX 主题。
一段时间前曾经尝试过切换到 ShokaX 主题，但是当时这个新主题也还未稳定，存在一些问题，加之工作太忙，没时间抽空完成迁移。最近 ShokaX 主题也算稳定了下来，于是趁着在新电脑上搭建环境的机会，正好一并迁移过来。
按照 ShokaX 自己的说法，它是 “ Shoka 的一个二次开发版（算精神续作），致力于提高性能和优化魔改体验，诞生原因是目前 Shoka 已经三年没有更新了，积压了大量 BUG 和功能请求。”
本篇文章就是对迁移过程中问题的一个记录，便于之后复现博客环境。
# 第三方工具
# Git
这次新环境的网络遇到些问题， Git 仓库总是无法拉取。
首先是报错 port 22 connection refused ，这个参考外网的一个办法[1]解决了。其做法是在 ~/.ssh/config 中添加如下配置，让 Git 连接走 443 端口：
# GitHub config | |
Host github.com | |
Hostname ssh.github.com | |
Port 443 | |
User git |
上述问题解决后，一段时间能够正常工作，后来又遇到问题，这次换 443 端口也拒绝连接请求了…。最后配置了 WSL 环境的代理之后才总算是告一段落。
具体而言是添加如下环境变量：
export hostip=$(ip route show | grep -i default | awk '{ print $3}') | |
export https_proxy="http://${hostip}:7890" | |
export http_proxy="http://${hostip}:7890" |
也可以在 .bashrc 或者 .zshrc 等环境配置文件中添加，这样每次启动之后就会自动设置代理。这里的端口注意修改为自己代理软件对应的端口。这里主要参考了一篇 WSL2 环境使用 Clash 代理的记录[2]以及微软官方 WSL 使用命令说明[3]。
# Node.js
然后是 Node.js 安装。这里推荐使用 nvm [4] 这个软件包来管理 Node.js 的环境。
如果想使用其他方法安装，可以参考相关博客[5]。
首先执行以下命令安装 nvm ：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash |
注意版本号可能会有差别。
然后初始化环境：
source ~/.zshrc |
使用 bash 的话就是 source ~/.bashrc 。
nvm list-remote # 查看 NVM 哪些版本的 Node 可用 | |
nvm install --lts # 下载 lts 最新版 | |
# 验证版本 | |
node -v | |
npm -v |
# ShokaX 主题安装
ShokaX 官方推荐使用 pnpm 管理包，因此需要先安装：
npm install -g pnpm |
ShokaX 的官方文档[6]中有详细的安装说明。如果不想折腾，那么可以选择其中的第一种方式，所谓 “ShokaX 即食罐头”：
git clone https://github.com/theme-shoka-x/shokax-can --depth=1 | |
cd shokax-can | |
pnpm install | |
hexo s # 如果报错更换为 pnpm dlx hexo s |
我因为有之前写的文档，所以采用 Git 安装的方式，将 ShokaX 主题安装到 themes 文件夹下：
cd themes | |
git clone https://github.com/theme-shoka-x/hexo-theme-shokaX.git # 可替换为你自己的项目 | |
cd shokax | |
node ./toolbox/compiler.mjs | |
cd ../.. | |
hexo s # 或 pnpm dlx hexo s | |
node ./themes/shokax/toolbox/hoistdep.mjs |
上述 node 命令执行中可能会缺少一些依赖，直接安装即可：
# 安装 node 执行命令依赖 | |
pnpm install esbuild | |
pnpm install glob | |
# 安装主题依赖 | |
pnpm install |
# ShokaX 主题配置
主题配置主要参考 ShokaX 的官方文档[6:1]中的配置相关部分，其中注意以下配置：
syntax_highlighter: false |
在 hexo 大于等于 7.0.0-rc1 的时候需要按照上面的方式设置，否则可能代码块渲染不对。
此外， ShokaX 中的某些图片资源存放在了 assets 文件夹而非原来的 images 文件夹，如果有图片链接出现了问题，可以 F12 浏览器工具查看图片是否路径正确。
其他的配置基本上是从原来的 Shoka 配置中复制而来。
# 重新部署 Vercel
在本地部署之后，发现评论系统的无法访问到后端的地址。经过排查发现是 Vercel 部署的评论后端和当前主题使用的 waline 版本不匹配导致的。新版的 waline 在请求链接中会添加 /api 的部分，而原来的版本中则没有，因此访问会产生 404。解决方法即用新版本 waline 重新部署。具体部署步骤可以查看之前的文章《从 Valine 迁移到 Waline》。
记得复制环境变量以及添加域名。
# 一键部署
一键部署需要安装 hexo 的工具：
pnpm install hexo-deployer-git |
并在配置文件中配置部署的仓库信息：
deploy: | |
type: git | |
repo: https://github.com/YangLinzhuo/yanglinzhuo.github.io | |
branch: master |
搭建完成并部署到 GitHubPages 之后发现网页白屏，排查发现是生成的 index.html 文件为空[7]。重新生成部署后解决。
# 修改主题
排查中顺便修改了一下主题内容 themes/shokax/layout/_partials/post/footer.pug ：
div(class="meta") | |
if date(post.date) !== date(post.updated) || time(post.date) !== time(post.updated) | |
span(class="item") | |
span(class="icon") | |
i(class="ic i-calendar-check") | |
span(class="text") | |
!= __('post.edited') + __('symbol.space') | |
time(title=__('post.modified') + __('symbol.colon') + full_date(post.updated) itemprop="dateModified" datetime=moment(post.updated).format()) | |
!= date(post.updated) | |
if theme.twikoo.enable || theme.waline.pageview | |
span(class="item") | |
span(class="icon") | |
i(class="ic i-eye") | |
span(class="text") | |
!=__('footer.total_views') + __('symbol.colon') | |
- var prefixedPath = post.path.startsWith('/') ? post.path : '/' + post.path | |
span(id="twikoo_visitors" class="waline-pageview-count" data-path=prefixedPath) 正在加载... | |
!= shokax_inject('postMeta') |
