萌新hexo博客搭建历程(MacOS 10.13 + CentOS7.0)

前言

本篇文章将介绍如何搭建hexo,以及如何通过git hooks实现远程vps的自动部署
本篇文章适合的条件

  1. 拥有私有的VPS以及域名
  2. 简单的用于个人博客展示,hexo的定位是静态博客,要实现动态服务器的功能并不适合
  3. 运行环境:CentOS7 + nginx服务器

基本流程:在本地生成静态文件,把静态文件部署到VPS上,用Nginx直接做Web服务,由于hexo支持git的部署方式,从而可以实现从本地更新博客,方便快捷。

Figure 1. hexo deploy flow

Hexo本地部署

本地部署的前提

安装hexo前需要检查电脑中是否已安装下列应用程序

如果没有安装,在Mac上可以通过homebrew安装;

brew install node

如果已经安装,接下来只需要使用 npm 即可完成 Hexo 的安装。

$ npm install -g hexo-cli

因为我们在之后需要通过git的方式部署,所以需要安装hexo-deployer-git

$ npm install hexo-deployer-git --save

本地创建网站目录

安装Hexo完成后,执行下列命令,Hexo 将会在指定文件夹中新建网站所需要的文

1
2
3
4
5
6
7
8
# 创建<folder>目录,并初始化hexo项目
$ hexo init <folder>
$ cd <folder>
# 安装hexo依赖,hexo是基于node.js开发的,npm是node.js的包管理工具
$ npm install
$ hexo c&&hexo d -fg
# 启动本地服务,打开localhost:4000测试是否成功
$ hexo serve

打开http://localhost:4000 即可看到你的站点(当然它并没有被部署到VPS上)

新建一篇文章,

1
2
3
$ hexo new "Test"
# 启动本地服务,查看效果
$ hexo server

这样,在/source/_posts目录下就生成了了test.md这样一个文件,.md是markdown文件的扩展名,我们可以使用自己喜欢的工具去编辑markdown,比如Typora、Mweb或者Sublime Text。

VPS部署操作

直接通过Terminal或者SecureCRT远程连接VPS,Win用户可以使用putty连接;
vi操作简介,i键进入编辑模式,编辑结束后按esc退出,此时按:,并输入wq即可保存并推出。
更多的相关Linux基础知识可以参考: 快乐的Linux命令行

安装Git并配置

1
2
$ yum update && apt-get upgrade -y #更新内核
$ yum install git-core

新建git用户添加sudo权限

1
2
3
$ adduser git
$ chmod 740 /etc/sudoers
$ vi /etc/sudoers

在vi编辑中找到如下内容:

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

在下面添加一行;

1
git   ALL=(ALL)     ALL

保存并退出后执行;

1
$ chmod 440 /etc/sudoers

创建git仓库,并配置ssh登录

1
2
3
4
5
6
7
8
$ su git
$ cd ~
$ mkdir .ssh && cd .ssh
$ touch authorized_keys
$ vi authorized_keys//在这个文件中粘贴key(在id_rsa.pub文件中)
$ cd ~
$ mkdir hexo.git && cd hexo.git
$ git init --bare

创建网站目录并赋予git对网站目录的所有权

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

配置git hooks

1
2
3
$ su git
$ cd /home/git/hexo.git/hooks
$ vi post-receive

输入如下内容后保存并退出;

1
2
3
4
5
6
7
8
9
#! /bin/bash -l
echo "received"
GIT_REPO=/opt/hexo.git # Git 项目路径(与你上面初始化的仓库地址路径相同)
TMP_GIT_CLONE=/tmp/64mb # 临时路径
PUBLIC_WWW=/var/www/hexo # Web 目录
rm -rf ${TMP_GIT_CLONE} # 删除临时路径下的文件
git clone $GIT_REPO $TMP_GIT_CLONE # 将提交上来的文件 clone 到临时路径
rm -rf ${PUBLIC_WWW}/* # 删除 Web 目录下的文件
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW} # 临时路径下的文件复制到 Web 目录下

然后赋予脚本的执行权限;

1
chmod +x post-receive

安装Nginx

配置nginx yum源

yum install nginx -y发现yum作为软件包管理器不在其默认存储库中包括nginx的最新版本,安装EPEL将确保CentOS上的nginx保持最新
安装EPEL,
$ yum install epel-release
在这之后发现依然不能安装nginx,于是我们手动配置nginx源,

1
$ vi /etc/yum.repos.d/nginx.repo
1
2
3
4
5
6
# 添加下列配置后保存并退出
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=0
enabled=1

保存“/etc/yum.repos.d/nginx.repo”文件后,我们就使用 yum 命令查询一下我们的 nginx 的 yum 源配置好了没有。

1
2
3
4
5
6
7
8
9
10
11
12
$ yum list |grep nginx
nginx.x86_64 1:1.10.1-1.el7.ngx nginx
nginx-debug.x86_64 1:1.8.0-1.el7.ngx nginx
nginx-debuginfo.x86_64 1:1.10.1-1.el7.ngx nginx
nginx-module-geoip.x86_64 1:1.10.1-1.el7.ngx nginx
nginx-module-image-filter.x86_64 1:1.10.1-1.el7.ngx nginx
nginx-module-njs.x86_64 1:1.10.1.0.0.20160414.1c50334fbea6-1.el7.ngx
nginx
nginx-module-perl.x86_64 1:1.10.1-1.el7.ngx nginx
nginx-module-xslt.x86_64 1:1.10.1-1.el7.ngx nginx
nginx-nr-agent.noarch 2.0.0-9.el7.ngx nginx
pcp-pmda-nginx.x86_64 3.10.6-2.el7 base

如果执行命令是这样的显示效果,那么我们的 nginx 的 yum 源就配置成功啦!

安装nginx并检查安装情况

然后要安装我们的 nginx 就直接执行:

1
$ yum -y install nginx

当然你还可以使用命令查一下究竟是否安装完成。

1
$ rpm -q nginx

启动nginx

刚安装的Nginx不会自行启动。运行Nginx:

1
$ systemctl start nginx.service

如果一切进展顺利的话,现在你可以通过你的域名或IP来访问你的Web页面来预览一下Nginx的默认页面;

Figure 2. nginx demo

设置CentOS 7 开机启动Nginx

1
$ systemctl enable nginx.service

Nginx配置信息

网站默认站点配置;

1
/etc/nginx/conf.d/default.conf

自定义Nginx站点配置文件存放目录;

1
/etc/nginx/conf.d/

Nginx全局配置;

1
/etc/nginx/nginx.conf

配置自己的Nginx配置文件

1
$ vi /etc/nginx/conf.d/hexo.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/hexo;//这里可以改成你的网站目录地址,我将网站放在/var/www/hexo
server_name example.com www.example.com;//这里输入你的域名或IP地址
access_log /var/log/nginx/hexo_access.log;
error_log /var/log/nginx/hexo_error.log;
location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
root /var/www/hexo;
access_log off;
expires 1d;
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
root /var/www/hexo;
access_log off;
expires 10m;
}
location / {
root /var/www/hexo;//这里可以改成你的网站目录地址,我将网站放在/var/www/hexo
if (-f $request_filename) {
rewrite ^/(.*)$ /$1 break;
}
}
}

重启Nginxservice nginx restart;

本机的最后配置

配置hexo配置文件

位于hexo文件夹下,_config.yml,修改deploy选项,写入如下内容;

1
2
3
4
5
6
deploy:
type: git
message: update
repo: git@your IP address:/home/git/hexo.git
port: 22(default)
branch: master

参考教程

参考了网上的诸多教程,感谢各位原作者!
https://blog.viosey.com/2016/10/05/Install-hexo-vps-git/
http://hello-fh.com/2016/11/03/VPSdajianHexo/
https://tiktoking.github.io/2016/01/26/hexo/
https://blog.csdn.net/u012486840/article/details/52610320

Author: Lu Shan & Lu Qiumei
Link: http://www.lslqm.com/2018/06/11/萌新hexo博客搭建历程(MacOS-10-13-CentOS7-0)/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.