利用 hexo 进行博客搭建并部署到阿里云服务器 (保姆级教程)

前言

作为一个涉及过运营，程序的文青废材，有一个自己的博客简直就是必需品。以前也弄过织梦 cms、Wordpress、帝国等这些 cms 系统进行网站搭建，这类有后台 cms 系统搭建的博客，只要有网络就能写博客，不过在使用时，总想着能自己开发一款 cms 系统的博客。后来接触到 Hexo，很喜欢这种风格的建站系统。不过 Hexo 这种静态类博客，在文章发布上就没有前面那些方便了，需要在你部署的电脑上才能进行发布。

之前有用过 Hexo 搭建博客部署在 GitHub 上，由于墙的原因，以及没有进行 cdn 加速，网站的打开速度以及在 SEO 上不够好，决定迁移到阿里云上。选择 Hexo+butterfly 模板部署在阿里云服务器上，并制作视频以及图文教程。

现在你看到这篇文章的时候，也是我从网上看各种教程，然后从零开始进行部署。虽然是从事运营工作，不过没有独立负责过项目，也想将脑海中的各种从零开始以项目的形式进行实现和运营，另外也进行记录，不然后续不操作了，可能也就遗忘了。

由于前面在 GitHub 上有进行部署过，对于 git 安装、NodeJs 安装都已经实现了，这部分的教程，可以在网上进行搜索。这边就不在重新制作了。

环境介绍

我本地电脑安装时在 MacBook 上。

使用的服务器时阿里云 ecs，配置是：

CPU：1 核 内存：1GB 内存，系统盘：40GB 高效云盘 操作系统：centos 7.06

使用 Hexo

安装 Hexo

因为用户的 MacBook，通过在桌面创建一个 Work 文件夹后，通过 Visual Studio Code 软件打开，在终端中输入以下命令

1
npm install -g hexo-cli

我这边花费了 29m 完成了下载和安装

初始化 Hexo

安装好 Hexo 后，新建一个文件夹，我命名为 mooonotes，你可以根据你的喜好进行设定，然后输入以下命令

1
hexo init moonotes

在 moonotes 文件夹中就会将 hexo 的文件结构进行初始化。

_config.yml
网站的配置文件。可以在此配置大部分参数。

package.json
应用程序的信息。EJS Stylus 和 Markdown 渲染引擎已默认安装，可以进行自由移除。

scaffolds
模板文件夹。当新建文章时，Hexo 会根据 scaffols 来创建文件。

source
资源文件夹。是存放用户资源的地方。除_posts 文件夹外，开头命名为_（下划线）的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTMl 文件会被解析并放到 public 文件夹，其他文件也会被拷贝过去。

theme
主题文件夹。Hexo 后根据主题生成静态页面，我目前选择的是 butterfly，后期可能会进行魔改。

然后输入以下命令进行网站安装

1
2
cd moonotes
npm install

安装成功后可以输入以下命令进行本地调试，就可以看到初始效果了。

1
hexo s --debug

访问 http://localhost:4000 / 即可查看效果。

到这里，Hexo 在本地的部署已经完成了。

更换主题为 butterfly

  上面虽然在本地已经部署成功，但是系统默认的主题在美观度上还是差一点的，可以在官网上选择自己喜欢的主题，官网主题链接：https://hexo.io/theme/，我选择的是我们台湾同胞制作的主题 butterfly，链接地址为：https://butterfly.js.org。

下载 butterfly 主题

在终端中输入以下命令进行主题下载

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

如果我们访问 GitHub 不稳定，也可以通过 Gitee 进行安装

1
npm install hexo-theme-butterfly

此方法只支持 Hexo 5.0.0 以上版本，且通过此方法下载并不会在 themes 中生成文件夹，而是在 node_modules 中生成。

修改配置

打开_config.yml，找到下面这段代码

theme: landscape

将 landscape 替换成 butterfly

theme: butterfly

保存修改的配置文件后（我们更换主题但是如果没有安装渲染，在运行时会报错，后面会专门对这个错误进行复现。重新在终端中输入调试命令

1
hexo s --debug

可以看到更换主题后的效果。

在 butterfly 主题中，为了减少升级主题后带来的不便，可以使用以下方法。在 Hexo 根目录创建一个文件_config.butterfly.yml，并将主题目录的_config.yml 内容复制到_config.butterfly.yml 中。
**

配置 SSH 密匙

为了使本地可以跟远程的仓库建立联系，需要在本地配置 SSH 密匙，这样我们就可以在本地将要提交的代码 push 到远程仓库中。我们第一次配置 SSH，需要配置 git 的 username 和 useremail

1
2
git config --global user.name "你要设置的username"
git config --global user.email "你要设置的useremail"

之后生成 SSH 密匙

1
ssh-keygen -t rsa -C "刚刚设置的useremail"

如果不需要设置密码，连续三个回车就好了。会得到 id_rsa 和 id_rsa.pub 文件。找到 id_rsa.pub 文件，用记事本打开，复制全部内容。

服务器部署

可以在阿里云中通过远程控制，也可以通过软件进行实现，我这边是直接新建一个终端通过 ssh 命令进行链接。链接上服务器后，输入以下命令，切换到 root 账户，如果本身就是 root 账户，就不需要进行切换了。

1
sudo su root

git 仓库配置

1、安装 git 仓库
在终端中输入以下命令

1
yum install git

因为我是直接在 ECS 上进行网站的部署，使用的是 root 账户，git 仓库本身也是有安装的，因此，这部分不需要耗费精力。如果你的服务器上没有安装 Git，在输入上面的命令后，中途会提示

1
Is this ok [y/d/N]:

输入 y，然后回车就可以。当终端中提示

1
Complate！

就说明 Git 已经安装成功。

2、创建 git 账户（由于我是直接通过 root 登陆，就不需要进行 git 账户的创建）
在终端中输入

1
adduser gitname

3、添加 git 账户权限

1
2
chmod 740 /etc/sudoers
vim /etc/sudoers

输入上面的命令，然后回车，进入 vim 编辑页面。输入 “i” 键，激活编辑，在编辑区找到如下代码

1
2
## Allow root to run any commands anywhere
root    ALL=(ALL)   ALL

在这段代码下面添加以下代码

1
gitname ALL=(ALL)   ALL

然后按 “ESC”，退出编辑模式，输入 “：wq”，就是保存并退出。

4、将权限修改回来

1
chmod 400 /etc/sudoers

5、为创建的 git 账户设置密码

1
sudo passwd gitname

我当时使用的是 root 账户，使用这个命令，就会提示报错，所以需要注意下。当输入以上命令时，需要输入两次密码，输入完成后回车重新输入即可，密码无误，两次回车后，终端会进行如下提示。

1
passwd: all authentication tokens updated successfully.

6、切换到 git 用户，创建～/.ssh 文件夹和～/.ssh/authorized_keys 文件，并赋予相应的权限

1
2
3
su gitname
mkdir ~/.ssh
vim ~/.ssh/authorized_keys

输入 “i” 进入编辑模式，打开我们在第 4 步骤配置的 ssh 密匙生成的 id_rsa.pub 文件，复制此文件中的密匙到编辑区中，按 “ESC”，输入 “：wq” 进行保存后退出。然后，输入以下命令赋予权限。

1
2
chmod 600 /home/git/.ssh/authorized_keys
chmod 700 /home/git/.ssh

在本地终端中测试能否免密登陆创建的 git 账户，其中 servers 为服务器的公网 ip，输入 yes 执行命令，填写前面创建 git 账户时设置的密码，没有报错就说明配置好了。

1
ssh -v gitname@servers

当终端提示

1
Welcome to Alibaba Cloud Elastic Compute Service !

说明 git 已经成功链接。如果我们直接使用的 root 账户，此阶段的 2-5 几个步骤都是不需要的，第 6 阶段只需要将配置的 SSH 密匙复制进去即可。

创建仓库目录及相关配置

1、创建仓库目录
我说在服务器的 var 文件夹中创建仓库目录的，也可以根据你的喜好进行创建。输入以下命令在 var 文件夹中创建我们的仓库 “repo”

1
mkdir /var/repo

赋予仓库权限

1
2
chown -R git:gitname /var/repo  #这个步骤有点遗忘了，可能因为我是root账户，直接省略了  “git:git“ 后面一个git应该是gitname
chmod -R 755 /var/repo

由于服务器上安装了宝塔，所以我时直接通过宝塔创建了网站目录，若你没有在服务器上安装宝塔，那么可以通过以下命令创建网站目录

1
2
3
mkdir /www/wwwroot/moonotes  # 如果用户宝塔创建了，可以省掉这个步骤 ”/www/wwwroot/moonotes“是网站根目录路径
chown -R git:gitname /www/wwwroot/moonotes
chmod -R 755 /www/wwwroot/moonotes

输入以下命令创建空白的 git 仓库

1
2
cd /var/repo    # 你的仓库路径
git init --bare monotes.git # 对仓库进行初始化

在 /var/repo/moontoes.git 中，有一个自动生成的 hooks 文件夹。我们需要在里面创建一个新的钩子文件 post-post-receive。

1
vim /var/repo/moonotes.git/hooks/post-receive

按 “i” 进入编辑模式，将以下代码输入进去，保存后退出。

1
2
#!/bin/bash
git --work-tree=/var/repo --git-dir=/var/repo/moonotes.git checkout -f

修改钩子文件的权限

1
2
chown -R git:gitname /var/repo/moontes.git/hooks/post-receive
chmod +x /var/repo/moonotes.git/hooks/post-receive

这样我们的 Git 仓库就已经搭建完毕了。

修改 hexo 配置

在我们的本地文件中，打开网站根目录的配置文件_config.yml，不是主题的配置文件，找到 deploy，配置成以下形式

1
2
3
4
deploy
    type: git
    repo: gitname@server:/var/repo/moonotes.git # server是你服务器的公网IP
    branch: master

保存后，在本地终端中通过以下命令将代码部署到服务器端

1
2
hexo cl
hexo d -g

这个时候可能出现权限问题，导致部署到服务器上失败，在服务器端的终端上输入以下命令

1
2
chown -R git:gitname /var/repo  # 给你的仓库赋予权限
chown -R git:gitname /www/wwwroot/moonotes  # 给你的网站根目录赋予权限

在通过 “hexo d -g” 进行部署，这个时候会出现这个一个问题，就是不会爆粗哦，但是没有服务器端没有信息反馈。需要你在本地安装 hexo-deployer-git 依赖。

1
npm install hexo-deployer-git --save

在通过 “hexo d -g” 命令，网站就部署到服务器端了。

总结

在部署网站的时候，之前是参考网上的教程部署到 GitHub 上，一次就成功了，但是从本地部署到服务器端，参考网上的教程，自己动手部署，还是走了很多弯路，出了很多错误，比如上面多次提到的用的是 root 账户，后面干脆将服务器给重置了一遍，将朋友的网站重新部署上，设置了镜像文件后在部署自己的网站，最后还是在参考张洪 Hxo 的将 Hexo 部署到阿里云轻量服务器（保姆级教程）完成了部署，因此进行记录下来，也方便你进行参考。