部署hexo安装主题shokax

# 1. 根据 GitHub 指引初始化 hexo

Install Hexo

npm install hexo-cli -g

Setup your blog

	mkdir hexo
	hexo init hexo
	cd hexo

Start the server

hexo server

修改端口启动 (option) hexo server -p 8002

# 2. 安装主题 shokax

	npm -g install shokax-cli
	SXC install shokaX -pm npm

我之前服务器安装了有 yarn，走了很多弯路，如果你之前使用的是 hexo-cli 的 npm 全局安装版本，但是你想用 pnpm 环境安装。混用会报错。

如果执行正常，没有问题，最后会输出以下界面：

跟着提示把对应 theme 更换为 shokax ，并把对应的配置文件进行更改（这里建议直接把 node_modules/hexo-theme-shokax/_config.yml 内容复制到我们改好的 _config.shokax.yml 文件中），改完之后顺手把 syntax_highlighter 后面的 js 删了。

刷新浏览器，会发现主题发生了变化。

服务器端运行报错解决方法请参考补充

# 3. 细节改动

以下文件的修改均在 /source/_data/ 中预设的素材文件夹中进行，如 /source/_data/assets

详细步骤

在 Hexo 的根目录 /source 文件夹下；

进入 /_data 目录（如果没有则创建）；

根据 /_config.shokax.yml 或 /_config.shokaX.yml 中自定义的图片目录（如 assets ），在 _data 目录下创建对应的目录。

不同的文件名称分别代表对应的图片。
- avatar.jpg 默认情况下对应主页上的个人头像，可修改
- favicon.ico 网站图标
- apple-touch-icon.png 将网页链接添加到主屏幕时的图标
- failure.ico 网站被隐藏时的网站图标
- alipay.png 支付宝捐赠付款码
- wechatpay.png 微信捐赠收款码
- paypal.png PayPal 捐赠收款码
- search.png 搜索下显示的图片

源码资源中缺失 avatar.jpg ，自行上传到指定位置解决，其余图片可以从 ./node_modules/hexo-theme-shokax/source/assets 参考。

修改完之后路径之后运行界面图片不会正常显示，参考目前封面图片无法显示的临时解决方案・Issue #6・theme-shoka-x/hexo-theme-shokaX (github.com)，修改 _config.shokax.yml 文件

gradient: true # 使用 CSS 渐变作为文章封面

随后重新 hexo g 即可。

# 4. 部署评论

参考快速上手 | Waline，底部也有视频教程。注意 serverURL 最后没有反斜杠

再根据配置 | Hexo 完善相关细节，散花！

# 5. 加入守护进程

	# 查看 hexo 路径
	which hexo
	# /usr/local/bin/hexo

	# 新建一个服务
	vim /etc/systemd/system/hexo.service
	# 编写以下内容，并修改 YOUR HEXO WEB PATH（eg: /home/**）
	[Unit]
	Description=hexo web
	After = network.target
	Requires = network.target

	[Service]
	WorkingDirectory= YOUR HEXO WEB PATH
	ExecStart=/usr/local/bin/hexo server -p 8002

	[Install]
	WantedBy=multi-user.target

	# 重新加载服务的配置文件
	sudo systemctl daemon-reload
	# 设置开机自启
	sudo systemctl enable hexo
	# 原神启动！
	sudo systemctl start hexo
	# 查看运行状态
	sudo systemctl status hexo

关于 _config.shokax.yml 下的 image_server 的配置，悄咪咪告诉你几个推荐 API，香窝窝哦😋

樱花:https://www.dmoe.cc

夏沫:https://cdn.seovx.com
搏天:https://api.btstu.cn/doc/sjbz.php

姬长信:https://github.com/insoxin/API
保罗:https://api.paugram.com

岁月小筑: https://img.xjh.me
东方 Project : https://img.paulzzh.com

Bing 每日壁纸（官方）：https://bing.img.run/bingwallpaperapi.html

# 6. 补充：

# [1]error1

npm ERR! Cannot read properties of null (reading 'matches')
如果之前系统安装过 pnpm 或者 yarn，会报错：

需要删除 node_modules文件夹 ，再执行 npm install 。

# [2]error2

ERROR Plugin load failed: hexo-lightning-minify

出现这种情况不要慌！把 hexo-lightning-minify 配置复制到 _config.yml 中即可^[1]。

	minify:
	js:
	enable: true # ShokaX 自带 esbuild 优化，不建议开启，其他主题建议开启
	exclude: # 排除文件，接受 string []，需符合 micromatch 格式
	css:
	enable: true # 开启 CSS 优化
	options:
	targets: ">= 0.5%" # browserslist 格式的 target
	exclude: # 排除文件，接受 string []，需符合 micromatch 格式
	html:
	minifier: html-minifier
	enable: true # 开启 HTML 优化
	options:
	comments: false # 是否保留注释内容
	exclude: # 排除文件，接受 string []，需符合 micromatch 格式
	image:
	enable: true # 开启图片预处理和自动 WebP 化
	options:
	avif: false
	webp: true # 预留配置项，现版本无作用
	quality: 80 # 质量，支持 1-100 的整数、lossless 或 nearLossless
	effort: 2 # CPU 工作量，0-6 之间的整数 (越低越快)
	replaceSrc: true # 自动替换生成 html 中的本地图片链接为 webp 链接
	# 我们更建议使用 Service Worker 来在用户侧实现 replaceSrc 的功能，这将能够以一种侵入式更小的方式实现链接替换
	exclude:

更多配置 | Hexo-theme-ShokaX (kaitaku.xyz) ↩︎

hexo