利用Docker搭建Hexo

发表于 分类于 Waline：

利用Docker部署Hexo

参考：Hexo官方文档
NexT主题文档

安装镜像

由于Hexo未提供官方Docker镜像，去docker hub找一个别人搭建好的。

执行拉取指令即可

1
$ docker pull spurin/hexo

查看一下镜像

1
2
3
$ docker images
REPOSITORY    TAG       IMAGE ID       CREATED       SIZE
spurin/hexo   latest    aded3af49d50   3 weeks ago   292MB

启动容器

1
2
3
4
5
6
7
$ docker run --name=st.hexo -e HEXO_SERVER_PORT=4000 -e GIT_USER="st" -e GIT_EMAIL="st.email@domain.com" -v /blog/domain.com:/app -p 4000:4000 spurin/hexo

-e HEXO_SERVER_PORT=4000          Hexo端口
-e GIT_USER="Your Name"           git用户信息
-e GIT_EMAIL="your.email@domain.tld" 
-v /blog/domain.com:/app          文件夹挂载 容器里的app目录映射到主机/blog/domain.com
-p 4000:4000                      端口映射 容器4000端口映射到主机4000

由于要从github拉取镜像，可能由于网络问题导致容器启动失败，请提前解决好网络问题。

运行docker ps查看镜像状态，或者ip:4000进行访问。

安装主题

我这里用的NexT主题

首先进入容器并进入hexo所在文件夹（按上面步骤配置即app目录），然后直接拉取

1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

等待安装完毕…

打开hexo目录下_config.yml设置主题，由于镜像内通常都没有vim，可以装一个，但是前面容器设置了挂载，在主机对应文件夹操作更方便。

找到 theme 字段，并将其值更改为 next，保存退出。

每次对hexo改动后最好清除缓存重新加载配置文件

1
2
3
hexo clean
hexo g
hexo s

但是因为采取docker方式部署，直接重启容器更加方便。重启一下容器，刷新网页发现显示：

1
2
3
{%- extends "_layout.swig" -%} {%- import '_macro/post.swig' as post_template -%} {%- import '_macro/archive.swig' as archive_template -%} {%- block title -%} {{ config.title }} {%- endblock -%} {%- block content -%} {%- set mode = theme.mode.toLowerCase() -%}
{%- if mode == 'default' -%} {%- for post in page.posts -%} {{ post_template.render(post) }} {%- endfor -%} {%- include "_partial/pagination.swig" -%} {%- else -%} {{ archive_template.render() }} {%- endif -%}
{%- endblock -%}

进入容器安装swig

1
2
$ docker exec -it st.hexo bash
$ npm i hexo-renderer-swig

重启容器刷新网页显示正常。

可视化编写

通过hexo-admin插件实现网页端发布与管理

1
$ npm install --save hexo-admin

在配置文件中设置管理员账号密码（密码为MD5后的）可以在网页端设置自动生成该段配置然后复制至_config.yml

1
2
3
4
5
# hexo-admin authentification
admin:
  username: root
  password_hash: "加密后的密码" 
  secret: my super secret phrase

重启。

新建页面

标签页

新建一个标签页面，并在index.md写入：

1
2
3
4
5
6
---
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

目录页

新建一个目录页面，并在index.md写入：

1
2
3
4
5
6
---
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---

最后在主题的配置文件中添加对应信息，这里/和||间没有空格，否则点进相应页面显示Cannot GET /%20。其他页面类似。

1
2
3
4
5
6
7
8
9
menu:
  home: /|| home                           //首页
  categories: /categories/|| th            //分类
  tags: /tags/|| tags                      //标签                     
  #archives: /archives/|| archive          //归档                   
  #about: /about/ || user                  //关于
  #schedule: /schedule/|| calendar         //日程表
  #sitemap: /sitemap.xml|| sitemap         //站点地图
  #commonweal: /404/|| heartbeat           //公益404

重启hexo服务后主页成功显示。

发布文章

在hexo-admin页面利用Post新建并编写一篇文章，在发布旁边设置标签与分类。

主题升级

分别在hexo和next的package.json中的查看当前版本

1
2
Hexo v5.4.1
NexT v5.1.4

将Next升级至最新版，根据官方检查是否满足升级需求。

NexT对Hexo版本需求对照表

Version Hexo 3.0.0-beta.4 or earlier Hexo 3.0.0-rc.1 ~ 3.9 Hexo 4.0 ~ 4.2.1 Hexo 5.0 or later
NexT v0.4.5.1 or earlier ✅ ✅ ❌ Icon (2) ❌ Icon (2)
NexT v0.4.5.2 ~ v7.4.1 ⚠️ Data Files (1) ✅ ❌ Icon (2) ❌ Icon (2)
NexT v7.4.2 ~ v8.1.0 ⚠️ Data Files (1) ✅ ✅ ✅
NexT v8.2.0 or later ⚠️ Nunjucks (3) ⚠️ Nunjucks (3) ⚠️ Nunjucks (3) ✅

(1): Hexo 3.0.0-beta.4 or earlier does not support Data Files.
(2): Icons may not be displayed normally.
(3): Nunjucks renderer plugin required.

NexT 仓库

NexT不同版本对应不同仓库：

Years Version Repository
2014 ~ 2017 v5 https://github.com/iissnan/hexo-theme-next
2018 ~ 2019 v6 ~ v7 https://github.com/theme-next/hexo-theme-next
2020 v8 https://github.com/next-theme/hexo-theme-next

进行升级

推荐升级到v8版本，对应 Theme-Next 。

重要变更

  1. 简体中文参数
    从 v6.0.3开始, zh-Hans 更改为 zh-CN: https://github.com/theme-next/hexo-theme-next/releases/tag/v6.0.3 ，并且需要在Hexo的配置文件中设置language。
  2. 从v8.0.0开始, next/source/lib 下所有目录均移至 @next-theme/plugins. 查看第三方插件安装方式: Adding Plugins.

升级

将v5.1.4升级至v8

  1. 备份配置文件:
    1.1. _config.yml
    1.2. CSS文件 next/source/css/_custom/* 与 next/source/css/_variables/* 目录.
    1.3. 布局文件 next/layout/_custom/*.
    1.4. 其他.
  2. 将旧的主题文件夹改个名并从theme文件夹移走，例如 mv next-old/ /blog/domain.com/next-old.
  3. 安装新版本 installation instructions. 随后执行 hexo clean 和 hexo s 后刷新网页查看升级是否成功。

Hexov5以后直接使用npm安装，由于是docker部署的需要进入容器再执行指令。

1
2
$ docker exec -it st.hexo bash
$ npm install hexo-theme-next@latest

根据npm安装的需要到node_modules/hexo-theme-next/_config.yml下修改参数配置。
将新版的配置文件复制一份到根目录方便修改

1
2
3
4
5
# Installed through npm
cp node_modules/hexo-theme-next/_config.yml _config.next.yml
# Installed through Git
cp themes/next/_config.yml _config.next.yml

新版本配置文件参数设置与旧版不同，需要重新设置。