在云服务器上部署Hexo个人博客教程

前言

Hexo 是一个基于 Node.js 的静态博客框架。它主要用于生成静态博客网站，并具有以下特点和用途：

  1. 静态网站生成：Hexo 将 Markdown 或其他格式的内容文件转化为静态 HTML 页面，这样的网站加载速度更快，安全性更高，并且更易于托管。
  2. 快速部署：由于是静态网站，Hexo 生成的博客可以轻松部署到 GitHub Pages、Netlify、Vercel 等静态网站托管服务上。
  3. 简单易用：通过 Hexo 的命令行工具，用户可以方便地创建、管理和发布博客文章。其语法简单，尤其适合开发者使用。
  4. 插件和主题支持：Hexo 拥有丰富的插件和主题生态系统，用户可以根据需要安装各种插件（例如 SEO 优化、RSS 生成、标签管理等），并选择或自定义主题以美化博客外观。
  5. 快速生成：Hexo 使用的 Node.js 平台和其优化的生成机制，使得它能够快速生成大量的静态文件，适合有大量内容更新需求的博客站点。
  6. 支持 Markdown：Hexo 原生支持 Markdown 语法，方便用户以简单的文本格式撰写和管理博客内容。

Hexo 官网：https://hexo.io/

Hexo on GitHub：https://github.com/hexojs/hexo

Hexo 官方文档：https://hexo.io/docs/)

一、 整体流程

Hexo 本身不是传统意义上的 CMS（内容管理系统），它是一个静态网站生成器（Static Site Generator，SSG）。与传统的 CMS（比如 WordPress）不同，Hexo 不具备数据库驱动的动态内容管理能力，而是通过将 Markdown 文件或其他格式的源文件转换为静态 HTML 页面来生成网站。

具体来说，Hexo 的工作流程包括使用 Markdown 编写文章，然后通过 Hexo 提供的命令行工具生成静态文件。这些静态文件可以使用Hexo 提供的命令轻松地一键部署到各种个人网站服务器或静态网站托管服务（如 GitHub Pages 等），前提是我们事前安装配置好本地及服务器端的环境。

本文主要介绍如何在云服务器上部署搭建Hexo博客，包含本地环境配置及服务器端环境配置。

二、 本地环境准备

本文使用的本地环境是Windows11

2.1 安装 Node.js 和 Git

下载安装 Node.js， 下载地址：https://nodejs.org/en/

默认选项完成安装

下载安装Git， 下载地址：https://git-scm.com/

选择组件时，勾选将Git Bash 添加到 Windows 终端

选择Git 使用的命令行工具时，选择使用Windows默认控制台窗口，其余默认选项安装

此处两个操作，是为了后续能够直接在Windows终端(powershell)中直接使用GIT命令，Windows 11 的终端已经可以在任意位置右键打开，整体使用体验比GIT BASH更好。

image.png

image.png

(1) 验证 Node.js是否安装成功，打开 Windows终端 输入node -v，出现版本信息，则 ok

1
node -v

更换为国内镜像源（可选）

1
npm config set registry https://registry.npmmirror.com

(2) 验证 Git 是否安装成功，打开 cmd 输入`git -v，出现版本信息，则 ok

1
git -v

配置Git用户名和邮箱，信息可以任意填写

1
2
git config --global user.email "xxxxxxxxxx@xx.com"
git config --global user.name "xxx"

2.2 安装 Hexo

(1) 修改Windows Powershell 脚本执行策略，Powershell的默认脚本执行策略为Restricted即不允许任何脚本运行，这会导致无法运行hexo相关命令，我们需要将powershell脚本运行策略修改为UNRESTRICTED或者RemoteSigned

以管理员身份打开 PowerShell 

查看当前Powershell 脚本执行策略

1
get-executionpolicy

修改Powershell 脚本执行策略

1
Set-ExecutionPolicy -ExecutionPolicy UNRESTRICTED

(2) 新建一个文件夹作为Hexo项目文件夹，名字任意。

image.png

(3) 进入该文件夹，右键打开终端（powershell），输入以下命令安装 Hexo相关工具安装到系统的全局环境中

1
2
3
npm install hexo-cli -g
npm install hexo-deployer-git --save
npm install hexo-server

(4) 输入以下命令，初始化Hexo项目，并且安装 Hexo 项目所需的依赖项

初始化Hexo

1
hexo init

安装 Hexo 项目所需的依赖项

1
npm install

最后，会在 Hexo文件中生成如下文件：

image.png

(5) 执行指令hexo server，启动hexo服务

1
hexo server

image.png

执行完毕后，打开本地浏览器，访问http://localhost:4000/，出现以下界面，说明本地Hexo已经安装成功了

image.png

3. 服务器端环境配置

本文使用的环境是Ubuntu 24.04 LTS

3.1 Nginx 环境配置

3.1.1 安装 Nginx

下载 Nginx

1
sudo apt install nginx

查看版本

1
nginx -v

3.1.2 配置 Nginx

需要将 Nginx 的配置文件中网站的根目录(root)指向 hexo 的部署目录，以及修改域名(server_name)为自己已备案的域名，如果没有，则填公网ip

所以，
(1) 首先创建一个文件夹作为hexo网站目录 

1
sudo mkdir -p /home/hexo

(3) 通过nano编辑器在/etc/nginx/conf.d文件夹下面，新建一个空白的配置文件hexo.conf

1
sudo nano /etc/nginx/conf.d/hexo.conf
  • 情况 1：如果没有域名的话，复制以下内容
    (需要改下“服务器IP”)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
server {
    listen        80;
    listen   [::]:80;
    server_name  服务器IP;

    location / {
        root   /home/hexo;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
  • 情况2：如果有域名，且有 SSL 证书的话，复制以下内容：
    (需要改下“域名”和 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
server {
    listen        80;
    listen   [::]:80;
    server_name  域名;

    rewrite ^(.*)$ https://${server_name}$1 permanent;
}

server {
    listen  443 ssl;
    server_name  域名; 

    ssl_certificate   存放pem的位置;
    ssl_certificate_key   存放key的位置;

    ssl_session_cache   shared:SSL:1m;
    ssl_session_timeout   5m;

    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers   on;
   
    location / {
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   Host             $http_host;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        root   /home/hexo;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

(5) 启动 Nginx 和 关闭 Nginx

输入以下命令，查看Nginx配置配置是否正确

1
sudo nginx -t

重启Nginx以应用配置

1
sudo systemctl restart nginx

3.2 Node.js 环境配置

安装 node.js，依次执行以下命令：

1
2
sudo apt update
sudo apt install nodejs npm

查看安装结果，打印对应版本号则安装成功

1
2
node -v
npm -v

3.3 Git 环境配置

3.3.1 安装 Git

依次执行以下命令：

1
sudo apt install git

查看版本号

1
git --version

3.3.2 创建 Git 用户

依次执行以下指令：

创建git用户

1
sudo adduser git

修改git用户的权限

1
sudo chmod 740 /etc/sudoers

进入 sudo 命令文件

1
sudo vi /etc/sudoers

找到root ALL=(ALL) ALL，在下面添加git ALL=(ALL) ALL

image.png

继续执行以下指令

修改文件权限

1
sudo chmod 400 /etc/sudoers

设置 git 用户的密码

1
sudo passwd git

3.3.3 配置 SSH 免密登录

为了实现用hexo d命令一键将本地的hexo文件推送到服务器的 Git 仓库中，所以要配置 ssh 免密登录服务器

(1) 在服务端，依次执行以下指令：

切换到 git 用户

1
su git

在git用户目录下创建.ssh文件夹

1
2
cd ~
mkdir .ssh

新建一个authorized_keys

1
2
3
touch ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

(2) 在本地计算机打开 Git Bash，执行以下指令，在本地生成公钥/私钥对

1
ssh-keygen -t rsa

image.png

遇到系统询问，就按回车键。最后生成的公钥和秘钥会自动保存在Windows用户目录的.ssh文件夹下下

image.png

(3) 使用文本编辑器打开公钥文件(id_rsa.pub)，全选复制全部内容

image.png

(5) 回到服务器，将公钥内容粘贴到刚刚新建的authorized_keys文件中并保存：

1
vi ~/.ssh/authorized_keys

(6) 测试本地免密登录服务器

打开本地计算机的 终端（powershell），输入：

1
ssh git@xxx.xxx.xxx.xxx（服务器IP）

最后面出现以下，表示成功连接服务器，SSH免密登录配置完成：

image.png

3.3.4 配置 Git 仓库

创建Git仓库并使用Git-hooks实现自动部署

(1) 在服务器新建一个 Git 仓库，同时新建一个钩子文件

1
2
3
cd ~
git init --bare hexo.git
vi ~/hexo.git/hooks/post-receive

输入以下内容，保存并退出

1
git --work-tree=/home/hexo --git-dir=/home/git/hexo.git checkout -f

(2) 授予钩子文件可执行权限

1
2
3
chmod +x ~/hexo.git/hooks/post-receive
cd ~
sudo chmod -R 777 /home/hexo

重启 服务器，服务端配置完成

4. 部署 Hexo 博客到服务端 Git 仓库

(1) 在本地计算机打开 Hexo 项目，修改_config.yml文件中的deploy：

1
2
3
4
deploy:
  type: git
  repo: git@服务器ip:/home/git/hexo.git
  branch: master

image.png

(2) 生成静态文件和发布博客

在本地计算机Hexo项目目录下右键打开终端，或者在 Vscode 的终端中输入：

1
2
3
4
5
6
7
8
# 清除之前生成的静态文件
hexo clean

# 生成静态文件
hexo generate

# 部署到 Git 仓库
hexo deploy

至此，已经全部配置完毕了

此时可以通过前面在nginx中配置的域名或服务器IP访问博客了

image.png