我的第一篇博客

🚀 从零开始:使用 Docker & Nginx 搭建属于你的 Hexo 静态博客

作为本站的第一篇文章,今天来手把手带大家搭建一个兼顾高性能、低内存、自动化部署的 Hexo 博客系统。

我们采用的方案是:将 Hexo 作为“静态生成器”(用完即扔),由工业级 Nginx 负责 24 小时高并发静态驱动。这种架构不占服务器内存,安全性极高。


🛠️ 第一步:准备工作与目录结构
在服务器上,我们首先建立一个干净的项目目录。这一步至关重要,规范的目录结构能让我们后续的运维省心百倍。

请在服务器创建以下目录结构:

1
2
3
4
5
6
7
8
my-blog/
├── docker-compose.yml
├── nginx/
│ └── conf.d/
│ └── default.conf # Nginx 配置文件
├── acme_certs/ # 存放你的 SSL 证书
└── html/
└── blog/ # 👈 你的 Hexo 项目源码将放在这里

2️⃣ 第二步:配置文件编写

  1. 编写 docker-compose.yml
    在 my-blog/ 目录下创建该文件,贴入以下内容。我们定义了 Nginx 服务,以及一个专门用来编译博客的工具人容器 hexo-gen:
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
27
28
29
30
31
32
33
services:
nginx:
image: nginx:alpine
container_name: nginx
ports:
- "80:80"
- "443:443"
volumes:
- ./nginx:/etc/nginx
- ./acme_certs:/etc/nginx/ssl:ro
- ./html:/var/www/html
networks:
- proxy_net
restart: unless-stopped

# 🚀 Hexo 编译容器(只在需要更新博客时启动,编译完自动销毁,不占内存)
hexo-gen:
image: node:20-alpine
container_name: hexo-gen
working_dir: /usr/src/app
volumes:
- ./html/blog:/usr/src/app # 挂载源码目录
command: sh -c "npm install && npx hexo clean && npx hexo generate"
networks:
- proxy_net

networks:
proxy_net:
driver: bridge
ipam:
config:
- subnet: 172.20.0.0/16
gateway: 172.20.0.1
  1. 编写 Nginx 配置文件
    在 ./nginx/conf.d/default.conf 中写入以下配置。特别注意我们加入了防端口乱跳的“特效药”:
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
27
28
29
server {
listen 9443 ssl default_server;
http2 on;
server_name mydomain.com www.mydomain.com; # 👈 改成你的域名

ssl_certificate /etc/nginx/ssl/mydomain.com.cer; # 👈 改成你的证书名
ssl_certificate_key /etc/nginx/ssl/mydomain.com.key; # 👈 改成你的证书密钥名

# 🚀 核心防坑:防止 Nginx 在子目录重定向时自动加上内部的 9443 端口
port_in_redirect off;
absolute_redirect off;

# 开启全局 Gzip 压缩,大幅提升网页加载速度
gzip on;
gzip_types text/plain text/css application/javascript application/json;

# 主站根目录(可以放你的个人主页)
location / {
root /var/www/html;
index index.html;
}

# Hexo 静态访问(放在 /blog 子目录下)
location /blog {
alias /var/www/html/blog/public; # 👈 指向 Hexo 编译出的静态文件夹
index index.html index.htm;
try_files $uri $uri/ /blog/index.html; # 👈 确保刷新页面不报 404
}
}

3️⃣ 第三步:初始化 Hexo 博客
因为我们把源码映射到了 ./html/blog,现在该目录还是空的,我们需要初始化一个标准的 Hexo 模板。

在服务器项目根目录下,借助 Node 容器执行初始化命令:

1
docker compose run --rm hexo-gen sh -c "npx hexo-init . && npm install"

执行完毕后,你会发现 ./html/blog 目录下多出了一堆 Hexo 的源文件(如 source/, themes/, _config.yml 等)。

⚠️ 必须修改的 Hexo 核心配置
打开 ./html/blog/_config.yml 文件,找到 # URL 区域,必须手动修改为子目录模式:

1
2
url: https://mydomain.com/blog   # 👈 改成你的真实域名和子目录
root: /blog/ # 👈 手动添加这一行,前后斜杠不能少!

4️⃣ 第四步:写下你的第一篇文章 📝
万事俱备,现在可以开始创作了!

  1. 新建文章
    在服务器终端执行以下命令创建一篇新文章:

    1
    docker compose run --rm hexo-gen npx hexo new "我的第一篇博客"

    此时,在 ./html/blog/source/_posts/ 目录下,会静静躺着一个叫 我的第一篇博客.md 的文件。

  2. 编辑文章
    使用你最喜欢的 Markdown 编辑器(如 Typora、VS Code),打开这个 .md 文件。你会看到顶部的基本信息(Front-matter):

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 我的第一篇博客
    date: 2026-05-17 14:00:00
    tags: [教程, Docker]
    ---

    这里写你的正文内容,支持标准的 Markdown 语法...

5️⃣ 第五步:一键编译与上线 🚀
文章写完并保存后,就是见证奇迹的时刻。

启动 Nginx 容器(首次启动即可,后续无需重启):

1
docker compose up -d nginx

触发 Hexo 编译(以后每次写完新文章,只需执行这一行):

1
docker compose run --rm hexo-gen

💡 原理解析:这一行命令会让工具人容器 hexo-gen 瞬间启动,在后台执行清除缓存并打包(hexo clean && hexo g)。生成的纯静态 HTML 文件会自动吐到 public/ 目录中。运行结束后,该容器会自动彻底销毁,不占一丁点服务器内存!

现在,打开浏览器访问 https://mydomain.com/blog,你的第一篇博客已经完美上线,开始你的独立博客之旅吧! 🎉