使用 HexoJS 配合 Nginx 构建 CMS

漫游感知 Lv1

在阿里云上一直有一台空闲的 Ubuntu 服务器,同时,手里还有一个已经备过案的域名,闲着也是闲着,不如拿来搭建 CMS,但不打算使用 WordPress,而是使用国人开源的 HexoJS 来构建,原因是 HexoJS 支持众多主题并且操作更简单,对于 CMS 搭建完全足够,SSL 证书使用 Certbot 通过赛博活佛 Let’s Encrypt 免费获取并自动续期。

环境准备

基础包更新

1
sudo apt update && sudo apt upgrade -y

安装 NodeJS 和 Nginx

1
sudo apt install nodejs npm nginx -y

使用 npm 包管理器即可,如果想用 pnpm 或 yarn 应该也可以,但其实搁不住,npm 足矣。

另外,建议给 npm 上国内的镜像源,加速依赖拉取。

1
2
# 设置为淘宝镜像源 
npm config set registry https://registry.npmmirror.com/

第一个 Hexo 项目

全局安装 HexoJS

1
npm install hexo-cli -g

官方网站: hexo.io

初始化项目

随便找一个目录来初始化 Hexo 项目,这里我在 /home/hexo_blog 搭建,实际可以是任意目录。

1
2
3
4
5
6
7
cd /home

hexo init hexo_blog

cd ./hexo_blog

npm install

至此,环境都已经部署完成并且创建了一个基本的 Hexo 项目,接下来挑选 Hexo 主题并使用 Nginx 代理服务。

配置主题

使用 Redefine 主题

Hexo 的主题汇总:themes

Hexo 主题很多,基本都是开源的,但建议选择那些文档比较完整的,这样子后续要是进行自定义也方便很多。

这里我选择 Redefine 主题,文档很完整,界面也比较美观。

这个主题的文档十分完整,直接看官网就足够完成主题的替换,不再赘述。

点这里查看 Redefine 主题安装文档

配置完成后跟着文档搞定自定义的部分即可,如 IPC 备案号和网站名称等。

Nginx 服务代理

我们这里使用 Nginx 服务代理实际就是让 Nginx 监听 80 和 443 端口,当有请求进来,返回 Hexo 编译的静态文件,也就是返回我们的网站页面,算是充当后端了。

编译项目

Hexo 编译项目非常简单,在项目目录下执行:

1
hexo generate

Generate 指令

没有报错的话,你应该可以发现你的 Hexo 项目根目录下多了一个 public 文件夹,我这里对应的就是 /home/hexo_blog/public

打开文件夹可以发现就是一些编译好的 CSS、JS、HTML 和字体文件,我们一般不需要手动修改这里面的文件。

Nginx 要做的就是返回这些文件,因此,我们编写一个 Nginx 配置来完成这个操作。

申请 Let’s Encrypt 颁发的 SSL 证书(可选)

如果手上有空闲并且已经通过 IPC 备案的域名,可以用上,这也有利于 SEO。

首先通过 Snap 安装 Certbot(官方详细指南):

1
sudo snap install --classic certbot

然后关闭 Nginx,因为要确保 80 和 443 端口没有被监听,否则会申请失败:

1
sudo systemctl stop nginx

软连接一下 Certbot,确保指令可用:

1
sudo ln -s /snap/bin/certbot /usr/bin/certbot

接着执行 Certbot SSL 证书申请指令:

1
sudo certbot --nginx

Certbot 会要求填写一个邮箱做为消息接收,随便填写也可以,但不建议这么干,Certbot 相关的操作文章很多,有问题gg一下就可以快速解决。

编写 Nginx 配置

这里贴出来两个我写好的配置模板,你基本只需要改几处路径和域名即可。

  • 适用于有域名且申请到了 SSL 证书 (温馨提示,如果支持大陆访问,那么一定要先通过域名备案)

    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
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    # HTTP: 直接重定向到 HTTPS
    server {
    listen 80;
    listen [::]:80;
    # 注意!替换为你的域名
    server_name yourdomain.com www.yourdomain.com;

    # 一律跳转到 HTTPS
    return 301 https://$host$request_uri;
    }

    # HTTPS: 真正提供静态内容
    server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    # 注意!替换为你的域名
    server_name yourdomain.com www.yourdomain.com;

    # 注意!替换为你的 SSL 证书路径
    # SSL 证书(Certbot 默认路径)
    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;

    # 注意!替换为你的 SSL 证书设置路径
    # 推荐的 SSL 设置(Certbot 自动生成的配置文件)
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # 证书续期时的强制刷新
    ssl_stapling on;
    ssl_stapling_verify on;

    # 注意!将 root 的值替换为你的 Hexo public 文件夹路径
    root /home/hexo_blog/public;
    index index.html;

    # 静态文件优化与缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 30d;
    access_log off;
    add_header Cache-Control "public";
    }

    # 默认请求处理:直接返回文件,否则 404
    location / {
    try_files $uri $uri/ =404;
    }

    # 可选:如果你在 Hexo 中使用 history API(SPA 模式),可以改成下面的配置
    # location / {
    # try_files $uri $uri/ /index.html;
    # }
    }
  • 适用于 IP 裸连

    1
    2
    3
    4
    5
    6
    7
    8
    server {
    listen 80;
    listen [::]:80;

    # 注意!将 root 的值替换为你的 Hexo public 文件夹路径
    root /home/hexo_blog/public;
    index index.html;
    }

启用 Nginx 配置文件

在 sites-available 下创建新的 Nginx 配置文件 hexo_blog:

1
sudo vim /etc/nginx/sites-available/hexo_blog

记得把 Nginx 配置模板里的内容替换为你的信息

软链接到 sites-enabled 并删除该位置下的默认配置的软链接

1
2
3
sudo ln -s /etc/nginx/sites-available/hexo_blog /etc/nginx/sites-enabled

sudo rm /etc/nginx/sites-enabled/default

重启 Nginx,在浏览器输入你的域名或服务器 IP 即可看见你的 CMS 网站啦~

如果重启 Nginx 的时候报错提示端口已经被占用,可以直接 kill 占用端口的程序或重启一下服务器即可,这可能是 Certbot 验证程序的小 bug,影响不大。

1
sudo systemctl restart nginx

Finished!

至此,搭建完成。

每次编写完新的文章或进行文章修改后,只需要执行一次 hexo generate 即可,浏览器显示若不是最新的文章内容,刷新一下即可,设置的缓存失效期是 30day,可以自行在 Nginx 配置修改。

  • Title: 使用 HexoJS 配合 Nginx 构建 CMS
  • Author: 漫游感知
  • Created at : 2025-08-05 11:53:54
  • Updated at : 2025-08-06 19:53:25
  • Link: https://lewland.top/2025/08/05/hello-world/
  • License: This work is licensed under CC BY-NC-SA 4.0.