将hexo部署到VPS

关于如何将Hexo部署发布到互联网上,官方文档已经有很详细说明。其中hexo支持的部署方式有以下几种:

  • Git
  • Heroku
  • Rsync
  • OpenShift
  • FTPSync
  • SFTP
    除了以上方式外,因为hexo是静态博客,所有的文章数据都保存在public这个文件夹下,所以你甚至可以直接通过复制将public文件夹下的内容发布到任何你想要发布的地方。这次我要写的是如何将hexo生成的文章部署到自己的VPS上,并使用nginx作为web服务器来提供访问服务。

建立远程Git仓库

要将hexo部署到VPS上也有多种方式,例如SFTP。这里我自己用的是通过git的方式,即:在VPS上创建一个Git仓库,然后将hexo生成好的博客内容通过gitpush到VPS上的仓库,再在VPS上通过git的一个hooks将内容复制到nginx的站点根目录下。

新建git用户

在VPS上执行如下命令(假设在root用户下操作)

创建新用户:

1
adduser git

将新用户加入sudo用户组:

1
gpasswd -a git sudo

添加SSH Key:

SSH key的生成方式有很多种,例如windows平台下,可以使用putty的密钥生成工具 puttygen 或者反正要用到git,那不如就直接用Git Bash。而Linux或者Mac平台下,则可以直接在命令行生成。这里以Windows环境为例,下载 git for Windows,下载安装完成后,在Git Bash中操作:

1
2
3
4
cd ~
mkdir .ssh
cd .ssh
ssh-keygen -t rsa

执行完以上命令后,会在.ssh文件夹下生成两个文件:私钥id_rsa和公钥id_rsa.pub,其中公钥id_rsa.pub就是要上传到VPS上,这样Hexo通过git部署到VPS时,就可以直接用SSH密码来登录服务器了。
现在回到VPS上,执行如下命令:

1
2
3
4
5
su git
cd ~
mkdir .ssh
cd .ssh
vim authorized_keys

然后把之前生成的id_rsa.pub中的内容粘贴到authorized_keys中并保存。

建立Git仓库

在VPS上安装git我就不说了,不同Linux发行版,安装命令大同小异。在VPS上安装好git后,执行如下命令,git仓库就算是建好了:

1
2
3
4
cd ~
mkdir blog.git
cd hexo.git
git init --bare

配置Web服务

Linux上可以作为web服务器的主要有apachenginx。在这里,以nginx例。安装nginx的过程就不说了。

创建Web根目录

一般安装好nginx后,会默认生成一个目录/var/www/html,这里我们自定义一个目录叫做blog。以下命令默认在root用户下执行:

1
2
3
cd /var/www
mkdir blog
chown git:git -R /var/www/blog

同时,把blog这个目录的拥有者变更为用户git,方便git用户自动部署。

nginx站点配置

这里以Ubuntu为例,通过apt-get命令安装完nginx后,nginx的目录主要在/etc/nginx/下,在这个文件夹下面,主要有三个文件夹来存放nginx的配置文件,分别是

  • conf.d
  • sites-available
  • sites-enabled
    其中,conf.d里面主要用来存放一些与nginx本身相关的配置信息,web站点的相关配置文件则是存放在sites-available里面,sites-enabled里面存放的只是对应sites-available里面配置文件的软连接。

简单来说,就是有多个站点的话,配置文件都存放在sites-available里面,但不是所有的站点都启用,对于需要启用的站点,就可以针对相应的配置文件做一个软连接,存放到sites-enabled里面。当然,也可以直接把配置文件扔sites-enabled里面,但是用软连接的话有一个好处就是,启用和关闭站点比较简单。关闭站点,直接将sites-enabled里的软连接删掉就行,而sites-available里的配置文件不受影响。

所以我们先创建一个配置文件:

1
2
su root
vim /etc/nginx/sites-available/blog.roadofgrowth.com.conf

下面是配置文件的内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server {
listen 80 ;
root /var/www/blog;
server_name blog.roadofgrowth.com;
access_log /var/log/nginx/blog.access.log;
error_log /var/log/nginx/blog.error.log;
location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
root /var/www/blog;
access_log off;
expires 1d;
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
root /var/www/blog;
access_log off;
expires 5m;
}
location / {
root /var/www/blog;
if (-f $request_filename) {
rewrite ^/(.*)$ /$1 break;
}
}
}

创建软连接:

1
ln -s /etc/nginx/sites-available/blog.roadofgrowth.com.conf /etc/nginx/sites-enabled/blog.roadofgrowth.com.conf

最后,重启nginx:

1
service nginx restart

添加Git hooks

现在Git仓库创建好了,Web服务器也配置好,就差一个Git Hooks:当我们从本地deploy Hexo到VPS上的Git仓库时,我们希望的是能够自动部署到nginx的web根目录下,也就是/var/www/blog/中的。所以这里就需要用到Git的post-receive这个勾子。我们进到git仓库的hooks目录下:

1
2
su git
cd ~/blog.git/hooks

编辑post-receive文件,如果没有则新建:

1
vim post-receive

然后输入如下内容:

1
2
3
4
5
6
7
8
#!/bin/bash
GIT_REPO=/home/git/blog.git
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=/var/www/blog
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

简单来说,post-receive的逻辑就是,当接收到客户端的推送后,就会先把git仓库中的内容,克隆到一个临时目录下,然后再从临时目录复制到web根目录下。

编辑完post-receive文件,最后再赋予其可执行权限:

1
chmod +x post-receive

至此,VPS上的配置就结束,现在就差在hexo本地环境的配置了。

配置hexo使用git形式部署

文章开头已经介绍过hexo所支持的一些部署方式,这里用的是git,所以在使用git方式来部署之前,需要安装一个hexo-deployer-git插件

1
npm install hexo-deployer-git --save

这个在官网文档中有介绍。接下来就是修改配置文件_config.yml,找到deploy相关的配置项

1
2
3
deploy:
type: git
repo: git@VPSIP:blog.git

关于repo的配置,上面这种写法是默认你的SSH端口为22,如果你修改过VPS的SSH端口,那上面这种写法是不会部署成功的。例如我自己是有修改过SSH端口的,所以我是用下面这种写法

1
repo: ssh://git@VPS的IP:1234/home/git/hexo.git

其中1234为你的SSH端口。

部署博客到VPS

做完上面讲述的所有配置后,即可以将hexo一键部署到VPS上了:

1
hexo g & hexo d