Hexo-Butterfly 主题镜像的制作过程

使用 node:18-alpine 版本来构建 hexo-butterfly 镜像

1
docker pull node:18-alpine

Hexo 镜像

1
docker run -it -d --name hexo -p 4000:4000 node:18-alpine

进入容器

  1. 全局安装 hexo 客户端
  2. 升级 npm
  3. hexo 初始化
  4. 进入 blog 文件夹
  5. 安装依赖
  6. 运行 hexo ，在浏览器中查看（4000端口）
1
2
3
4
5
6
7
8
9
docker exec -it hexo sh

npm install hexo-cli -g
npm install -g npm@9.6.7
hexo init blog
cd blog
npm install
hexo server
exit

Ctrl + C 取消 hexo server 退出，到这里就可以通过 DockerFile 制作一个 Hexo 的镜像，如下

1
2
docker ps
docker commit d0e58c6f5a71 hexo

构建 hexo 镜像

1
nano DockerFile
1
2
3
4
5
6
7
8
9
FROM hexo
LABEL maintainer="Nome <rainsky512@gmail.com>"

WORKDIR /blog
VOLUME /blog

EXPOSE 4000

CMD ["hexo", "server"]

构建镜像

1
docker build -f DockerFile -t rahn2029/hexo:1.0 .

创建容器

1
2
docker stop hexo && docker rm hexo
docker run -it -d --name hexo -p 4000:4000 rahn2029/hexo:1.0

rahn2029/hexo:1.0 镜像制作完成

1
docker stop hexo && docker rm hexo

Hexo-Butterfly:1.0 镜像

在 hexo 镜像的基础上继续构建，而不是用已经构建完成的 rahn2029/hexo:1.0 镜像

创建容器

1
docker run -it -d --name hexo -p 4000:4000 hexo

进入容器

  1. 进入 blog 文件夹内
  2. 参考 https://butterfly.js.org/posts/21cfbf15/ 进行安装 Butterfly 主题
  3. 安装 Git
  4. 安装 Nano
  5. 下载 Butterfly 到 themes/butterfly 文件夹下
  6. 修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly ，语言为 zh-CN
  7. 安装 butterfly 插件以及渲染器
  8. 将 butterfly 主题的 _config.yml 拷贝一份到根目录，取名为 _config.butterfly.yml
  9. 运行 hexo server ，查看效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
docker exec -it hexo sh

ls
cd blog

apk update
apk add git
git --version

apk update
apk add nano
nano --version

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

nano _config.yml
language: zh_CN
theme: butterfly

npm install hexo-renderer-pug hexo-renderer-stylus --save

cd themes/butterfly/
cp _config.yml /blog/_config.butterfly.yml

hexo server
exit

Ctrl + C 取消 hexo server 退出，到这里就可以通过 DockerFile 制作一个 Hexo-Butterfly 的镜像，如下

1
2
docker ps
docker commit 905d75673c10 hexo-butterfly

构建 hexo-butterfly 镜像

1
nano DockerFile
1
2
3
4
5
6
7
8
9
FROM hexo-butterfly
LABEL maintainer="Nome <rainsky512@gmail.com>"

WORKDIR /blog
VOLUME /blog

EXPOSE 4000

CMD ["hexo", "server"]

构建镜像

1
docker build -f DockerFile -t rahn2029/hexo-butterfly:1.0 .

创建容器

1
2
docker stop hexo && docker rm hexo
docker run -it -d --name hexo -p 4000:4000 rahn2029/hexo-butterfly:1.0

一个安装 butterfly 主题的中文 hexo 镜像创建完毕

Hexo-Butterfly:2.0 镜像

将自己配置好的主题设置，制作 hexo-butterfly:2.0

将从 hexo-butterfly 镜像开始

1
2
docker stop hexo && docker rm hexo
docker run -it -d --name hexo -p 4000:4000 hexo-butterfly
  1. 删除 blog 内部的所有文件，退回到主机
  2. 将本地的 blog 进行压缩，通过 docker cp 拷贝到容器内部
  3. 再次进入，进入 blog 目录进行解压，解压完成后删除
  4. 运行 hexo server ，查看效果
  5. 在导入的文章中，标题有乱码的问题，就此删除了文章，用命令新建了文章，作为演示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
docker exec -it hexo sh
cd blog
rm -rf *
exit

docker cp blog.zip hexo:/blog

docker exec -it hexo sh
cd blog
unzip blog.zip
rm blog.zip

hexo server

hexo new '你好'
hexo new 'hello world'

hexo server
exit

Ctrl + C 取消 hexo server 并退出，到这里就可以通过 DockerFile 制作一个 Hexo-Butterfly:2.0 的镜像，如下

1
2
docker ps
docker commit c7f0862a037d hexo-butterfly2.0

构建 hexo-butterfly2.0 镜像

1
nano DockerFile
1
2
3
4
5
6
7
8
9
FROM hexo-butterfly2.0
LABEL maintainer="Nome <rainsky512@gmail.com>"

WORKDIR /blog
VOLUME /blog

EXPOSE 4000

CMD ["hexo", "server"]

构建镜像

1
docker build -f DockerFile -t rahn2029/hexo-butterfly:2.0 .

创建容器

1
2
docker stop hexo && docker rm hexo
docker run -it -d --name hexo -p 4000:4000 rahn2029/hexo-butterfly:2.0

一个本地的 blog 至此就完整的安装到 docker 镜像之中，rahn2029/hexo-butterfly:2.0

通过 docker-compose 挂载它，制作 2.0 是为了防止配置的丢失

将容器内部的全部文件拷贝到当前位置的 blog 文件夹下

停止删除这个容器，用 docker-compose 作为最终管理方式

1
2
docker cp hexo:/blog $(pwd)/blog
docker stop hexo && docker rm hexo

Docker-Compose

编写 docker-compose.yml

1
nano docker-compose.yml
1
2
3
4
5
6
7
8
9
10
version: '3.3'
services:
    hexo-butterfly:
        container_name: hexo
        restart: always
        ports:
            - '4000:4000'
        volumes:
            - './blog:/blog'
        image: 'rahn2029/hexo-butterfly:2.0'
1
docker-compose up -d

打开 4000 端口

1
ufw allow 4000/tcp

总结

  1. 用 rahn2029/hexo:1.0 hexo-butterfly:1.0 版本就可以将本地的 blog 映射到内部
  2. hexo-butterfly:2.0 的自定义，主要目的其实还是保留了数据，专为私有化
  3. hexo-butterfly:2.0 还是存在一些隐形的问题，在 windows 过度到 Liunx 中
  4. 在使用镜像 rahn2029/hexo:1.0 hexo-butterfly:1.0 进行本地挂载时候，效果相同且优异

官方：https://hexo.io/

主题： https://butterfly.js.org/