利用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，然后回车就可以。当终端中提示

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，配置成以下形式

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部署到阿里云轻量服务器（保姆级教程）完成了部署，因此进行记录下来，也方便你进行参考。