在前几天，我搭建了我的另一个博客网站，选用的是 Hexo 博客框架。为了给广大想搭建自己的博客网站的小伙伴们提供参考，也为了让我能够记住搭建的操作流程，我决定推出这篇简易教程。

一、GitHub 还是 VPS

通常来说，Hexo 相比于其他博客框架最大的优势就是轻量——轻量到可以部署在 GitHub 或者其他能托管静态网页的平台上。用把 Hexo 源文件放在自己的电脑上，生成的静态文件部署到 GitHub 上这一方法，甚至可以实现零成本建站。相比之下，如果你用其他博客框架建博客网站，租用一个 VPS 服务器的费用就是就是必须的花销，如果你恰好选择的是 WordPress 这种对服务器配置要求对较高的建站框架，那你还得要租用一个配置较好的 VPS 服务器。

看完上面一段话，再看我这一章节的标题，你可能会觉得有点奇怪——GitHub 还是 VPS？为什么要纠结这两个东西？难道不是哪个成本低选哪个？为什么要多此一举加一个要钱的 VPS？

我还是建议你把 Hexo 搭建在 VPS 上的原因其实很简单——GitHub 服务器毕竟在境外，对于中国大陆的访客来说，访问你搭在境外服务器的网站加载速度会比较慢。

二、Linux - 纯命令行

1、准备安装

Hexo 是基于 Node.js 的博客框架，很自然地，你在搭建 Hexo 之前需要安装 Node.js。在 Debian 11 中，你可以用 apt 命令直接安装 node.js，作为 Node.js 的包管理

#安装 node.js
sudo apt install -y nodejs

安装后可以用 node -v 和 npm -v 查看是否安装成功。

但是在不那么新的 Debian 系统中，例如 Debian 9 你可能无法直接用 apt 命令安装，这时候你需要使用以下命令将 PPA 存储库添加到系统，再用 apt 命令安装。

#将 PPA 存储库添加到系统，可以将 setup_18.x 替换为最新版本的 NodeJS
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
#安装 node.js
sudo apt install -y nodejs

2、开始安装

2.1 Hexo 安装

使用 npm 命令安装 Hexo，等待进度条走完，当你看到”added 60 packages, and audited 61 packages in 6s“提示时，代表安装完成。如果你不确定是否安装成功，可以用 hexo -v 检查，如果有值返回，代表成功。

#安装 Hexo
sudo npm install hexo-cli -g

为了让后续初始化 Hexo 命令成功执行，你需要为你的 Hexo 创建一个新文件夹，文件夹名字按喜好自选。

#创建文件夹
mkdir 你的文件夹名

使用 cd 文件夹名 进入刚刚创建的 Hexo 文件夹，并初始化 Hexo，让系统在这个文件夹内创建 Hexo 运行所需要的模板文件。

#初始化 Hexo
hexo init

等待进度条走完，在初始化完成后，你应该能在 Hexo 文件夹内看到如下文件、文件夹：

• _config.yml
• _config.landscape.yml
• node_modules
• package-lock.json
• package.json
• scaffolds
• source
• themes

其中，_config.yml、source/、themes/ 这个三个文件/文件夹值得你多注意。其中 _config.yml 是博客的基本配置文件，你可以在这个文件里修改博客的基本信息，比如博客名、博客作者、博客网址；博客中的文章等用户资源都存放文件夹 source/ 中；文件夹 themes/ 是存放博客主题文件的文件夹，如果你要修改主题，你就需要把所下载的主题文件放在这里。

现在模板文件已经创建完成，你可以通过 hexo g 命令让 Hexo 根据模板文件生成静态网页了。系统会在 Hexo 文件夹内新创建一个 public/ 文件夹，你可以在这个文件夹内看到生成的静态网页相关文件。

如果你想立马预览网页，使用 hexo s 启动 Hexo 服务端，在浏览器打开 服务器IP:4000 预览网页，不过此步骤需要你提前打开服务器 4000 端口，并保证 4000 端口没有被其他服务占用。

#生成静态网页
hexo g
#启动 Hexo 服务端
hexo s

2.2 Nginx 安装和配置

现在，你已经完成了 Hexo 博客的安装以及博客静态网页的生成，你甚至能在浏览器打开你的网页，但是现在还有一个小小的问题存在 —— 你的网站没有域名。

要解决这个小问题，你只需要完成几步简单的配置工作。直接使用 hexo s 命令启动 Hexo 服务使用的其实是 Node.js 的内置服务端，由于配置繁琐等原因，我们通常会选择用 Nginx 来代替 Node.js 作为服务端。前面讲到，在使用 hexo g 命令后，在本地会生成一个 public/ 文件夹，里面有我们博客网页所需要的文件。

所以简单来说，你只要把 Nginx 配置文件中的 root 改成 public/ 文件夹路径就行。

首先安装 Nginx，直接用 apt 命令安装就行。

sudo apt install -y nginx

等待几分钟直到安装完成。在安装完成后，用 nano 命令修改 Nginx 默认配置文件，目录为 /etc/nginx/sites-enabled/default 。

#编辑 Nginx 配置文件
nano /etc/nginx/sites-enabled/default

把 root 这一行改成 public/ 文件夹目录，注意最后不要加斜杠；在 server_name 填上你的域名，记得把那个下划线删了。

root /home/hexo/blog/public;                    #这里改成你的文件路径，注意最后没有斜杠
index index.html index.htm index.nginx-debian.html;
server_name aaa.mcu.edu.kg                        #这里改成你的域名

在修改完成后，按 Ctrl + X 退出编辑，使用 service nginx restart 重启 Nginx 服务。等待一小会儿，打开浏览器，输入你的域名，你就可以看到 Hexo 初始网页了。

二、Linux - aaPanel

1、准备安装

本章标题中的 aaPanel 是宝塔面板的海外版，它在功能和界面上和原版宝塔面板是完全一样的，但是相比于原版最大的优点是在登录时不需要绑手机，代价就是 aaPanel 没有中文界面。在 aaPanel 安装时要注意一点，如果你看到 “Do you need to enable the panel SSL”的提示，记得选择“n”项。

你也可以选择直接安装宝塔面板，使用宝塔面板安装 Hexo 同样可以参考本教程。

#安装 aaPanel
wget -O install.sh http://www.aapanel.com/script/install-ubuntu_6.0_en.sh && bash install.sh forum
#安装宝塔面板
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh ed8484bec

等待一段时间，直到出现安装完成的提示，如下图。红框内的就是你的 aaPanel 的控制面板地址、用户名和密码。复制面板地址到浏览器，输入账号密码登录。

登录面板后会跳出【推荐安装】的对话框。假如你以后不需要用你的 VPS 搭建其他项目，那么只勾选安装第一个 Nginx 就可以了，不然 LNMP 这四个还是全安装为好。推荐使用编译安装，也就是图中的“Complied”。

经过漫长的等待，直到安装完成。点击进入【App Store】页面，在搜索框里搜索“pm2”，把搜索出的两个应用全部安装。

等待安装完成后，点击 Node.js version manager 后面的【Setting】按钮。在弹出的对话框中，第一个框选择版本为“LTS ver”，在下面给出的版本中选择最新版安装，然后在后面的【Command line version】中选择刚刚安装的版本。如果你的服务器在国内的话，【Registry】选择“Taobao”，切换安装源为国内镜像。

关闭对话夸，点击 PM2 Manager 后的【Setting】，点击【Node Version】，把版本切换为刚刚安装的版本。

2、开始安装

点击 aaPanel 的【Files】选项，进入 www/wwwroot/ 文件夹，你看到只有一个 default 文件夹就代表已经进入了。点击上方的【new】按钮创建一个新文件夹，文件夹名可以任意选择。

进入你创建的文件夹，点击上方的【Terminal】按钮打开终端。

在终端中使用如下命令开始安装 hexo 并生成静态网页。

#安装hexo
npm install hexo-cli -g
#初始化hexo
hexo init
#生成静态文件
hexo g

点击进入 aaPanel 的【Website】选项，点击【Add site】按钮。在【网页路径】这一栏中，也就是图中框起来的部分，填写刚刚创建的 Hexo 文件夹路径。确认信息无误后点击【Submit】按钮提交，创建网页。

在网页创建完成后，点击【Conf】按钮，在弹出的对话框中点击【Site directory】，把这个页面中的【Running directory】改成/public 文件夹。

完成上面操作后，打开浏览器，输入你的域名，就可以看到 Hexo 初始网页了。

三、Windows

1、准备工作

在使用 Windows 搭建 Hexo 前，你只需要先安装 node.js 和 git 。

2、开始安装

2.1 安装命令

在 Windows 下安装 Hexo 方法和前面介绍的在 Linux 下安装差不多。在本地创建新文件夹，在新建文件夹中右键选择【Git Bash here】，新建 git 窗口。在 git 窗口输入命令安装 Hexo。

#使用 npm 命令安装 Hexo。
npm install -g hexo-cli
#Hexo 安装完成后进行初始化操作。
hexo init

生成网页并将网页部署到本地服务器，这个时候打开 127.0.0.1：4000 就能看到 Hexo 的初始网页了。

#生成静态网页并启动 Hexo 服务端
hexo g && hexo s

2.2 部署到 GitHub

在 GitHub 官网按照提示创建 GitHub 账号，创建完成后在 Hexo 文件夹中右键打开 Git Bash here（Windows），依次输入以下三条命令，生成 SSH key。

git config --global user.name "你的用户名"
git config --global user.email "你的注册邮箱"
ssh-keygen -t rsa -C "你的注册邮箱"

输入 cat /root/.ssh/id_rsa.pub 查看你生成的公钥。把生成的公钥，也就是图片中框起来的部分复制到剪贴板。

回到 GitHub 网页，点击网页右上角头像，选择个人信息设置选项，进入 SSH and GPG keys 页面，点击创建新 SSH key。

在红框内粘贴刚刚复制到剪贴板的公钥，点击添加 SSH 公钥。

添加公钥后点击右上角加号创建一个 repository。

创建的 repository 名字一定要是 你的用户名.github.io。

在这个 repository 的设置中点击进入 pages 选项中，选择一个主题并确认，这个主题并不重要，随便选择一个就行。

等待片刻，看到出现“Your site is ready to be published at ......”，就代表你的这个 GitHub page 创建成功了。

打开 Hexo 文件夹中 _config.yml 文件，补全 Deployment 模块中的信息。type 后面填 git 就行，repo 后面填图片中箭头位置处的信息，这里要注意图片中框起来的部分选择的是 SSH，_config.yml 文件里 branch 后填 main。

填好后你的配置文件应该是下面这个样子。

#修改前
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''
  
#修改后
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git 
  repo: [email protected]:你的用户名/你的用户名.github.io.git
  branch: main

回到Git Bash here（Windows）中，安装 Hexo 部署插件。

npm install hexo-deployer-git --save

剩下的就只有一步，使用 hexo d 把本地静态网页文件部署到 GitHub 上。

hexo clean && hexo g && hexo d

部署完成后，等待几分钟，打开 你的用户名.github.io 就能看到你刚刚创建的 Hexo 博客了。

2.3 添加域名

可能你会觉得用 xxxx.github.io 访问自己的博客实在不大优雅，为解决这个小问题，可以通过创建一个 CNAME 来为你的博客自定义域名。

你只需要在 Hexo 文件夹的 \source 目录下先创建一个 txt 文件，内容为你想要自定义的域名。保存后将文件名改为 CNAME，要注意的是，这个文件名没有后缀，就是 CNAME。

再次部署到 GitHub，如果你发现在 GitHub 上多了一个 CNAME 文件，那就自定义域名代表成功了。

打开网站，地址栏的域名已经变成你自定义的域名。

四、结语

这篇教程到这里就结束了，可能有一些地方介绍地不够清楚。如果你有不明白的地方，可以发邮件到[email protected].