Hexo+Docker+NGINX搭建个人博客

搭建思路

• 使用轻量应用服务器（Ubuntu 20.04）搭建。

• 在Docker容器中搭建Hexo环境，用于生成静态站点文件。

• 通过Docker文件夹映射，实现宿主服务器和容器内的文件互通。

• 宿主服务器配置NGINX作为Web服务器，指向映射文件夹中生成的静态站点目录。

• 将Hexo博客工程提交到GitHub，通过GitHub Actions实现自动化发布和站点更新（本文不做讨论）。

方案说明

1. 在Docker容器中搭建Hexo是为了环境隔离，也方便以后迁移。
2. 在宿主服务器配置NGINX是因为想搭建多个站点，以后还可能会部署一些API服务，想共用NGINX。
3. 使用GitHub仓库存放博客工程，方便对主题、配置的修改做记录和管理；配合GitHub Actions可以实现自动化发布和站点更新，而且支持在未配置Hexo环境的设备上更新博客，只需要能够将文件提交到GitHub仓库中。

实施步骤

安装 Docker

在Ubuntu下，使用官方脚本安装。

# 获取Docker安装脚本，安装Docker
curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun
# 验证是否成功 - 信息中包含Client和Server两部分说明成功
docker version

构建 Docker Image

把宿主服务器/usr/blog文件夹作为博客的工作目录，创建dockerfile文件夹存放用于构建Docker Image的Dockerfile。

# 创建dockerfile文件夹
mkdir dockerfile
# 使用vim创建和编辑Dockerfile
vim dockerfile/Dockerfile

Dockerfile用来配置构建镜像的基础环境、构建步骤和构建指令。目标是通过Docker镜像自动搭建好Hexo的运行环境，安装需要的组件，应用Icarus主题，需要自动化处理的事项有：

1. 安装 hexo-cli
2. 初始化Hexo博客工程。
3. 安装必要的 Hexo 插件。
4. 应用 Icarus主题

# 使用最新的node镜像作为基础环境  
FROM node:latest  
MAINTAINER Steven <vilsteven@gmail.com>  
# 设置临时工作目录  
WORKDIR /usr/temp  
# 配置 npm 镜像站点  
RUN npm config set registry https://registry.npm.taobao.org  
# 安装 hexo-cli  
RUN npm install hexo-cli -g  
# 初始化 hexo blog  
RUN hexo init  
# 安装 icarus 主题需要的依赖  
RUN npm install --save bulma-stylus@0.8.0 inferno inferno-create-element hexo-renderer-inferno hexo-component-inferno  
# 方便图片附件引用  
RUN npm install hexo-asset-image --save  
# 资源压缩  
RUN npm install hexo-all-minifier --save  
# 生成唯一链接  
RUN npm install hexo-abbrlink --save  
# 生成sitemap，优化SEO  
RUN npm install --save hexo-generator-sitemap hexo-generator-baidu-sitemap  
# 手动编译optipng-bin，否则会报错，找不到文件  
RUN node node_modules/optipng-bin/lib/install.js  
# 下载 icarus 主题  
RUN curl -o "theme.zip" -L https://github.com/ppoffice/hexo-theme-icarus/archive/refs/tags/4.4.0.zip  
RUN unzip theme.zip -d themes/  
RUN mv themes/hexo-theme-icarus-4.4.0 themes/icarus  
RUN rm -f theme.zip  
# 配置 hexo 使用 icarus 主题  
RUN sed -i "s/landscape/icarus/g" _config.yml  
# 删除默认 landscape 主题  
RUN npm uninstall hexo-theme-landscape --save  
RUN rm -f _config.landscape.yml
RUN rm -r -f themes/landscape
# 配置正式工作目录  
WORKDIR /usr/blog  
# hexo 默认端口号 4000  
EXPOSE 4000

Dockerfile说明：

1. Docker容器的主工作目录为/usr/blog，Hexo工程和插件存放在临时工作目录为/usr/temp，是因为后续创建容器会把宿主服务器的博客站点目录映射到容器内的/usr/blog，需要在映射后，再将/usr/temp的文件移动到/usr/blog中。有些繁琐，没有想到怎么处理更方便。
2. 主题使用下载源码手动配置的方式，方便后续按需要对主题进行修改。在将博客工程提交到GitHub时，准备忽略node_modules文件夹，主题源码放到themes文件夹中的方式也可以更方便地记录主题代码的修改历史。

使用编辑好的Dockerfile创建Docker镜像。

docker build -t hexo-icarus /usr/blog/dockerfile/

运行 Docker 容器

使用创建好的镜像运行Docker容器，做以下配置：

1. 容器的4000端口映射到宿主服务器的4000端口。
2. 宿主服务器/usr/blog/oxygen-coder目录映射到容器/usr/blog目录。
3. 容器命名为oxygen-coder。

docker run -itd -p 4000:4000 -v /usr/blog/oxygen-coder/:/usr/blog --name oxygen-coder hexo-icarus

配置 Hexo

进入Docker容器，默认会进入到容器的/usr/blog目录。

docker exec -it oxygen-coder /bin/bash

将临时工作目录/usr/temp中的文件移动到当前工作目录，删除临时目录。

mv /usr/temp/* /usr/blog/
rm -r /usr/temp

修改_config.yml文件，进行基本的Hexo配置。

# 只列出做出修改的配置项

# 站点信息
## 站点名称
title: OxygenCoder  
## 站点作者
author: 王大猫  
## 站点语言
language: zh-CN  
## 站点时区
timezone: 'Asia/Shanghai'

# 站点URL配置
## 站点URL
url: https://www.oxygencoder.com
## 定义文章链接
permalink: posts/:name.html

启动Hexo的内置Web服务器。

hexo server

Hexo Server默认使用的端口号是4000，前面已经将宿主服务器的4000端口和Docker容器的4000端口做了映射，通过虚拟服务器的控制台，开通服务器4000端口的访问权限，就可以在浏览器中通过http://serverIP:4000访问预览Hexo博客了。

通过Hexo生成站点静态文件。

hexo clean
hexo generate

站点静态文件会生成在Docker容器中的/usr/blog/public文件夹中，按照配置的映射关系，对应的宿主服务器路径为/usr/blog/oxygen-coder/public。

安装 NGINX

在宿主服务器上，通过APT安装NGINX。

sudo apt update
sudo apt install nginx

配置 NGINX 站点

NGINX相关的文件在/etc/nginx/目录下，在sites-available文件夹中创建和编辑站点配置文件。

vim /etc/nginx/sites-available/oxygencoder.com.conf

编辑配置文件，达到以下目标：

• 站点根目录指向Hexo生成的静态文件目录/usr/blog/oxygen-coder/public。
• 设置www.oxygencoder.com为默认域名，访问oxygencoder.com也会自动跳转到www.oxygencoder.com
• 站点默认使用https，且通过http访问域名也会自动跳转到https。
• 使用自定义的404页面。
• 支持http2。

完整的配置文件如下。

server {
	listen 443 ssl http2;
    listen [::]:443 ssl http2;

	server_name www.oxygencoder.com;

	keepalive_timeout   70;
	
	# 根目录指向Hexo生成的静态文件目录
	root /usr/blog/oxygen-coder/public;
	index index.html;

	location / {
		try_files $uri $uri/ =404;
	}

	# 自定义404页面
	error_page 404 /404.html;

	ssl_certificate cert/6116736_www.oxygencoder.com.pem;
    ssl_certificate_key cert/6116736_www.oxygencoder.com.key;
    ssl_ciphers EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
}
server {
    listen 80;
    listen [::]:80;

    server_name www.oxygencoder.com;
	
	# 跳转到 https://www.oxygencoder.com
	rewrite ^/(.*) https://www.oxygencoder.com/$1 permanent;
}
server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    listen 80;
    listen [::]:80;

    server_name oxygencoder.com;
	
	# 跳转到 https://www.oxygencoder.com
    rewrite ^/(.*) https://www.oxygencoder.com/$1 permanent;
}

将配置文件链接到sites-enabled文件夹内，使之生效。

ln -s /etc/nginx/sites-available/oxygencoder.com.conf /etc/nginx/sites-enabled/oxygencoder.com.conf

重启NGINX，加载新的配置。

sudo service nginx stop
sudo service nginx start

如果已经在虚拟服务器控制台配置好了域名解析，现在就可以通过域名www.oxygencoder.com访问搭建的博客了。

---

完成Hexo博客站点的搭建才是刚刚开始，后面还要实现Hexo博客的自动发布和更新，配置和自定义修改主题，优化站点配置，最最重要的是坚持学习、坚持记录和输出，让自己和博客一起成长。