Hexo博客搭建与部署：从本地到服务器

为什么选 Hexo

对比了几个静态博客框架之后，我选了 Hexo：

框架 语言 速度 生态 中文支持
Hexo Node.js 快 丰富 优秀
Hugo Go 最快 一般 一般
Jekyll Ruby 慢 丰富 一般
VitePress Vue 快 新 好

Hexo 的优势：中文社区活跃，主题多（尤其是好看的中文主题），插件生态成熟。

本地搭建

安装

1
2
3
4
5
6
7
8
# 安装 Node.js (推荐 v20 LTS)
# 安装 Hexo CLI
npm install -g hexo-cli

# 初始化博客
hexo init my-blog
cd my-blog
npm install

选主题

我用的是 AnZhiYu 主题，颜值高，功能全。安装方式：

1
git clone https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

然后修改 _config.yml：

1
theme: anzhiyu

写文章

1
hexo new "文章标题"

会在 source/_posts/ 下生成 Markdown 文件。Front Matter 格式：

1
2
3
4
5
6
7
8
9
10
11
12
---
title: 文章标题
date: 2025-06-01 11:00:00
categories:
  - 分类名
tags:
  - 标签1
  - 标签2
cover: 封面图片路径
---

正文内容...

本地预览

1
2
hexo server
# 访问 http://localhost:4000

部署到服务器

方案：Nginx 静态托管

最简单直接的方案。Hexo 生成静态文件，Nginx 直接服务。

服务器端配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
server {
    listen 80;
    server_name aicncn.cn www.aicncn.cn;
    root /root/blog/public;
    index index.html;

    # 缓存静态资源
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    # SPA 路由回退
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 禁止访问隐藏文件
    location ~ /\. {
        deny all;
    }
}

部署脚本：

1
2
3
4
5
6
#!/bin/bash
# deploy.sh - 在服务器上执行
cd /root/blog
hexo clean
hexo generate
echo "Deploy complete: $(date)"

自动化部署

可以用 GitHub Actions 实现推送自动部署：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# .github/workflows/deploy.yml
name: Deploy Hexo
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx hexo generate
      - name: Deploy to server
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.SERVER_IP }}
          username: root
          key: ${{ secrets.SSH_KEY }}
          source: "public/*"
          target: "/root/blog/"

图片管理

开启 post_asset_folder：

1
2
# _config.yml
post_asset_folder: true

这样每篇文章会有自己的同名文件夹，图片放里面，引用时直接写文件名：

1
![描述](image.png)

性能优化

  1. 图片压缩：用 WebP 格式，体积小画质好
  2. 懒加载：主题一般自带，图片滚动到可视区域才加载
  3. CDN：静态资源走 CDN，减轻源站压力
  4. Gzip/Brotli：Nginx 开启压缩

总结

Hexo 搭博客的门槛不高，半天就能搞定。关键是坚持写内容。技术博客不需要多华丽，把自己的经验记录下来，对自己是复习，对别人是参考。