使用Docker部署Hexo5.2

摘要

突然想要折腾一下,解决之前hexo3.9.0的一些小问题:代码块没有水平滚动条、无法显示数学公式的问题,于是干脆顺便升级一下新的hexo5.2.0

容器内装HEXO

docker run -it --net=host centos:7.6.1810
curl -sL https://rpm.nodesource.com/setup_14.x | bash -
yum install -y git-core nodejs
npm install -g hexo-cli

这里是在VPS上做得,国内npm install太慢了,因为docker内无法用ipv6会导致yum install失败,所以用了参数--net=host

保存Hexo镜像

docker commit -m "Hexo5 origin submit" -a "Orange" 1ac140d51bcf hexo5

此处省略保存镜像再拉回本地再导入镜像的步骤

初始化博客目录

docker run -it \
  --name="hexo5" \
  -v /ssd-raid/hexo5/blog:/root/hexo5/blog \
  hexo5
cd /root/hexo5
hexo init blog # 新建工作目录
cd blog
npm install
npm install hexo-deployer-git --save
git clone https://github.com/next-theme/hexo-theme-next themes/next

这个文件夹也是在墙外VPS上做的然后拉回来的

启动容器并启动Hexo

使用一个脚本,将nas里的博客同步过来

./start.sh

start.sh如下

#!/bin/bash

docker rm -f hexo

MOUNT_PATH=/wolf1/seafile/backup/feng/admin

if [ "`ls -A "${MOUNT_PATH}/virtual-drive-dir/My Libraries/私人资料库"`" = "" ]
then
	echo "The seadrive dir ${MOUNT_PATH}/virtual-drive-dir/My Libraries/私人资料库 is empty! The seadrive may have some error, abort start hexo!"
	exit 1
fi

docker run -d \
  --name="hexo" \
  -p 8080:4000 \
  -v /ssd-raid/hexo5/blog:/root/hexo5/blog \
  -v "/wolf1/seafile/backup/feng/admin/virtual-drive-dir/My Libraries/学习/blog":/root/ori-post \
  hexo5 /root/hexo5/blog/start.sh

其中/root/hexo/blog/start.sh用于在容器中转换图片文件路径并启动server,内容如下

#!/bin/bash

set -e

. /root/.nvm/nvm.sh
. /root/.nvm/bash_completion

cd /root/hexo5/blog
hexo clean
rsync -axvh --delete /root/ori-post/* /root/hexo5/blog/source/_posts
/root/hexo5/blog/convert-image.sh /root/hexo5/blog/source/_posts/
hexo generate
hexo server

其中convert-image.sh如下

#/bin/bash

set -e

if [ -z "$1" ]
then
    echo "Use with path!"
    exit
fi

echo cd $1
cd "$1"

IFS=$(echo -en "\n\b")

for file in *
do
    if [ -d "$file" ]
    then
        /root/hexo5/blog/convert-image.sh `pwd`/$file
    elif [ "${file##*.}" = "md" ]
    then
        echo convert $file
        sed -i "s/!\[.*\](\(.\+\)\/\(.\+\))/{% asset_img \2 %}/" "$file"
    fi
done

美化配置

_config.yml目录下

  • post_asset_folder设置为true这样才能读到图片

  • prismjs:enable:设置为true来启用基于prism的代码高亮,这个对bashshell的支持更好一些

其他见Hexo美化设置

Github配置

参考:https://hexo.io/zh-cn/docs/one-command-deployment

docker exec -it hexo bash
cd /root/hexo5/blog
hexo deploy

数学公式

然后在文章大开头加如下内容就可以使公式渲染

<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

但是这个由于github的安全机制,无法在推到github上之后继续渲染公式

可以考虑用如下的动态将公式转成图片的网址来进行渲染

{% asset_img tex2img.php?eq=1%2Bsin%28mc%5E2%29&bc=White&fc=Black&im=jpg&fs=12&ff=arev&edit= %}