一、前言

常规使用Hexo搭建博客的方式为本地计算机+Hexo+GitHub，可由于众所周知的原因，GitHub的链接稳定性很不理想，且难以对Hexo后台进行可视化管理。恰巧手头有一台闲置阿里云服务器，本文将结合自己的经验，详细介绍利用宝塔面板进行阿里云服务器部署Hexo（同样适用于其他家服务器），安装Butterfly主题以及Hexo Pro进行后台可视化管理。

二、安装宝塔及Nginx

（一）登录云服务器

在云服务器管理控制台中选中需要登录的云服务器，点击远程连接，通过Workbench远程连接，通过免密连接或终端连接即可。

云服务器远程登陆

（二）安装宝塔面板（正式版：11.0.0）

通用安装脚本：

if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec

其他兼容系统、更多版本及详细情况请点击进入官网查看

宝塔面板

（ 三）安装Nginx

左侧边栏点击软件商店，安装“Nginx”。

安装Nginx

三、安装Hexo

（一）安装Node.js

安装指令：

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"
# Download and install Node.js:
nvm install 22

安装检查：

# Verify the Node.js version:
node -v # Should print "v22.18.0".
nvm current # Should print "v22.18.0".
# Verify npm version:
npm -v # Should print "10.9.3".

如果显示“v22.18.0”等字样，则说明已经安装成功。

安装Node.js

更多安装命令及方式请点击进入官网查看

（二）安装Git

安装指令：

sudo yum install git-core

安装检查：

git --version

如果正常返回版本号，则说明已经安装成功。

安装Git

更多安装命令及方式请点击进入官网查看

（三）安装淘宝镜像， 加速NPM

由于国内访问npm仓库的速度可能较慢，因此推荐使用淘宝提供的镜像源，提升下载安装模块速度，安装命令：

npm config set registry http://registry.npmmirror.com

（四）安装Hexo

安装指令：

npm install -g hexo-cli

安装检查：

hexo --version

如果正常返回版本号（条目很多），则说明已经安装成功。

安装Hexo

更多安装方式及要求请查看Hexo官方文档：文档 | Hexo

四、Hexo建站

（一）新建文件夹

进入宝塔面板，点击“文件”，新建文件夹（建议新建到/www/wwwroot/，方便管理），执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

hexo init /www/wwwroot/Hexo # 这里我设置的文件夹为/www/wwwroot/Hexo，可自定义为其他文件夹
cd /www/wwwroot/Hexo
npm install

命令执行完毕后，项目文件夹如下所示：

新建文件夹

（二）编辑配置文件

打开进入宝塔面板，进入你所安装的Hexo文件夹，修改_config.yml，将url条目修改为： http://<你的云服务器公网ip>，修改 language 条目为 zh-CN，即简体中文。

编辑配置文件

其他配置文件条目参考官方文档：配置 | Hexo

（三）部署静态网站

输入以下指令：

cd /www/wwwroot/Hexo/                   # 进入 Hexo 项目根目录
hexo g -d                               # 生成静态文件并部署
hexo server -p 4000                     # 运行服务

如果返回显示项目文件，说明部署成功。

部署网站

-p 后即服务运行端口，浏览器访问需从该指定端口访问，可修改，默认为4000。

此时在浏览器输入http://<服务器公网ip>:4000，会发现显示无法访问，因为云服务器未允许该端口的访问，需要在安全组以及宝塔面板防火墙中配置开启入方向对应端口。

（四）配置安全组规则

在云服务器管理控制台中，选择左侧安全组，点击对应云服务器中的管理规则。

配置安全组

选择入方向->手动添加，填写目的端口（上一步hexo服务指定运行的端口），源端口选择所有IPv4（0.0.0.0/0），然后保存即可。

配置安全组

配置安全组

进入宝塔面板，选择安全->添加端口规则，填写4000，然后保存即可。

配置宝塔防火墙

配置完成后，在浏览器输入http://<服务器公网ip>:4000，即可访问到我们部署的Hexo个人博客。

Hexo

（五）Nginx 托管静态文件

[!IMPORTANT]

前文我们使用hexo server -p 4000 命令，成功打开我们部署的个人博客，但hexo server 只是临时本地调试用的服务，它启动了一个进程监听在4000端口，适合本地预览，不适合正式部署。所以我们需要让Nginx托管静态文件，不启动 Hexo 服务。

宝塔面板新建静态网站文件夹，注意不要新建到Hexo根目录下！！！

新建静态网站文件夹

输入指令：

cd /www/wwwroot/Hexo/                   # 进入 Hexo 项目根目录
hexo clean                              # 清除旧的缓存文件
hexo generate                           # 生成新的静态文件到 public/
rm -rf /www/wwwroot/MYBLOG*             # 删除旧的站点文件，这里我设置的文件夹为/www/wwwroot/MYBLOG，可自定义为其他文件夹
cp -r public/* /www/wwwroot/MYBLOG      # 复制新生成的文件到站点目录
echo "部署成功！"                        # 输出提示信息

执行命令

面板左侧网站->添加站点，填入你的服务器公网ip或者域名，文件夹选择前文新建的静态网站文件夹，点击确定即可。

添加站点

随后直接访问服务器公网ip或者域名，无需添加端口，即可成功进入我们部署的Hexo个人博客页面。

五、安装Butterfly主题

（一）安装

输入指令：

cd /www/wwwroot/Hexo/                   # 进入 Hexo 项目根目录
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

如果返回cloning提示，说明部署成功。

cloning提示

（二）应用主题

进入宝塔面板，修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly，并点击保存。

theme: butterfly

应用主题

（三）安装插件

输入指令：

npm install hexo-renderer-pug hexo-renderer-stylus --save

安装插件

（四）复制 _config.butterfly.yml

在 Hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。

[!NOTE]

注意:

复制的是主题的 _config.yml ，而不是 hexo 的 _config.yml

不要把主题目录的 _config.yml 删掉

以后只需要在 _config.butterfly.yml 进行配置就行。如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。

（五）一键三连执行命令

输入指令：

cd /www/wwwroot/Hexo/                   # 进入 Hexo 项目根目录
hexo clean                              # 清除旧的缓存文件
hexo generate                           # 生成新的静态文件到 public/
rm -rf /www/wwwroot/MYBLOG*     # 删除旧的站点文件
cp -r public/* /www/wwwroot/MYBLOG  # 复制新生成的文件到站点目录
echo "部署成功！"                        # 输出提示信息

Ctrl+F5刷新页面，即可显示安装的Butterfly主题。

Butterfly主题

更多有关Butterfly主题的配置，请进入官方文档查看。

六、安装Hexo Pro

（一）什么是Hexo Pro？

Hexo Pro 是专为 Hexo 静态博客框架打造的后台管理系统插件，旨在为博客作者和开发者提供更强大、更便捷的内容管理体验。

功能亮点：

  • 文章管理：创建、编辑、删除文章，支持 Front-matter 可视化编辑
  • 页面管理：轻松管理静态页面
  • 图床集成：支持图片粘贴上传与批量管理
  • 配置管理：可视化编辑 Hexo 配置文件
  • 全局搜索：基于 Fuse.js 的极速全文检索
  • 一键部署：多种部署方式，轻松上线
  • 国际化支持：多语言界面，全球用户友好
  • 桌面端专属：多项目管理、自动认证、原生菜单、离线支持、智能端口管理等

（二）安装使用

输入指令：

cd /www/wwwroot/Hexo/                   # 进入 Hexo 项目根目录
npm install --save hexo-pro             # 安装 Hexo Pro 插件
hexo server                             # 启动 Hexo 服务器

显示下方页面，说明安装成功。

安装Hexo Pro

随后在浏览器输入http://<服务器公网ip>:4000/pro，即可成功进入 Hexo Pro 管理后台。

Hexo Pro

更多介绍及具体使用方法请进入官方文档查看

（三）Hexo Pro后台运行脚本（长期运行）

上文我们介绍过， hexo server 只是临时本地调试用的服务，它启动了一个进程监听在4000端口，运行的Hexo服务在断开云服务器远程连接后便会停止运行，无法正常投入使用。虽然我们使用Nginx 托管了静态文件，但Hexo Pro需要4000端口一直启动，因此需要编写一个后台运行脚本，使其可以长期运行，只要云服务器未关闭，即可在浏览器中访问。

1.创建run.js文件

在宝塔面板中进入博客根目录（/www/wwwroot/Hexo/ ），创建一个文件run.js，添加以下内容后保存退出，注意按需更改脚本第二行-p 后的指定运行端口。

const { exec } = require('child_process')
exec('hexo server -s -p 4000 ',(error, stdout, stderr) => {
if(error){
            console.log('exec error: ${error}')
            return
}
console.log('stdout: ${stdout}');
console.log('stdout: ${stderr}');
})

如图所示：

设置脚本

2.安装pm2

输入指令：

npm install -g pm2

3.使用pm2运行脚本

执行以下指令，即可长期运行Hexo服务。

pm2 start run.js

输入下列指令，即使服务器重启，进程也会自动拉起：

pm2 save
pm2 startup

运行pm2

显示以上内容，表示PM2运行成功。

七、引用

本文主要多引用于CSDN@kbybbb0313大佬的《云服务器搭建hexo》，在此表示感谢。如有更多问题，欢迎联系我766686216@qq.com或者评论区留言，收到都会回复。