使用 HexoJS 配合 Nginx 构建 CMS
在阿里云上一直有一台空闲的 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 | # 设置为淘宝镜像源 |
第一个 Hexo 项目
全局安装 HexoJS
1 | npm install hexo-cli -g |
官方网站: hexo.io
初始化项目
随便找一个目录来初始化 Hexo 项目,这里我在 /home/hexo_blog 搭建,实际可以是任意目录。
1 | cd /home |
至此,环境都已经部署完成并且创建了一个基本的 Hexo 项目,接下来挑选 Hexo 主题并使用 Nginx 代理服务。
配置主题
使用 Redefine 主题
Hexo 的主题汇总:themes
Hexo 主题很多,基本都是开源的,但建议选择那些文档比较完整的,这样子后续要是进行自定义也方便很多。
这里我选择 Redefine 主题,文档很完整,界面也比较美观。
这个主题的文档十分完整,直接看官网就足够完成主题的替换,不再赘述。
配置完成后跟着文档搞定自定义的部分即可,如 IPC 备案号和网站名称等。
Nginx 服务代理
我们这里使用 Nginx 服务代理实际就是让 Nginx 监听 80 和 443 端口,当有请求进来,返回 Hexo 编译的静态文件,也就是返回我们的网站页面,算是充当后端了。
编译项目
Hexo 编译项目非常简单,在项目目录下执行:
1 | hexo 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
8server {
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 | sudo ln -s /etc/nginx/sites-available/hexo_blog /etc/nginx/sites-enabled |
重启 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.