Hexo框架部署过程

Hexo是个既简洁又强大的博客框架,渲染速度快,原生支持markdown,插件丰富。下面来总结下自己部署Hexo的过程。

本机

在本机部分要做的工作是安装Hexo、Git、npm。这一部分很简单,官方文档说的也很清楚,直接把上面的命令行copy到终端执行就ok了。

需要注意的是,Hexo的官方文档中,中、英文版本并非严格的对照关系,也就是说一部分内容只有英文版的官方文档有,一部分又只有中文版的有,因此可以两边都浏览下以相互补充。

VPS

VPS的操作系统可以考虑CentOS,其他系统也可以,只要把下面的命令换成该系统下的写法就ok了。以下操均是在root下进行,除非特别指定。

安装Git

1
2
3
yum update && apt-get upgrade # 更新内核
git version # 先检查git是否已安装
yum install git

安装nginx

1
2
3
4
yum install nginx
# 如果成功安装,则用浏览器访问服务器的公网IP地址即可看到Nginx的测试页面
systemctl start nginx # 如果nginx已经成功启动,这句就不要执行
systemctl enable nginx # 使Nginx开机自动启动

找到nginx的配置文件

一般nginx的配置文件是/etc/nginx/nginx.conf,另外也可以用如下这个方法来确定nginx的配置文件

1
2
3
4
5
6
7
ps -ef | grep nginx # 在返回的结果中,找到nginx的master process
root 1160 1 0 23:20 ? 00:00:00 nginx: master process /usr/sbin/nginx
nginx 1161 1160 0 23:20 ? 00:00:00 nginx: worker process
root 8853 8836 0 23:24 pts/0 00:00:00 grep --color=auto nginx
/usr/sbin/nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

可见nginx的配置文件确实为/etc/nginx/nginx.conf

新建git用户添加sudo权限

1
2
3
4
adduser git # 在CentOS下useradd命令与adduser命令是没有区别的,都是创建用户,在home目录下自动创建新怎用户的home目录,没有设置密码,需要使用passwd命令修改密码
ls -l /etc/sudoers # 查看sudoers文件的属性,并做记录
chmod 740 /etc/sudoers
vim /etc/sudoers

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

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

在下面添加一行

1
git   ALL=(ALL)     ALL

保存并退出后执行

1
2
3
chmod 440 /etc/sudoers
ls -l /etc/sudoers # 查看sudoers文件的属性,看看是否成功改回了原先的值
passwd git # 给git用户设置密码(这一步只能在root下进行。可以试试用su git命令切换到git用户,再执行此操作,会发现权限不够)

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

1
2
3
4
5
6
7
8
su git # 创建一个裸仓库,裸仓库就是只保存git信息的Repository, 首先切换到git用户确保git用户拥有仓库所有权
cd ~
mkdir .ssh && cd .ssh
touch authorized_keys
vim authorized_keys # 在这个文件中复制粘贴本机的公钥(在id_rsa.pub文件中)
cd ~
mkdir hexo.git && cd hexo.git # 新建hexo.git目录,用来存放裸仓库
git init --bare

测试一下,如果在终端中输入ssh git@VPS的公网IP地址,能够远程登录的话,则表示设置成功了。

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

这一步我是切换到root用户下操作的(理论上在git用户下操作应该也行吧,只要加上sudo应该就ok,下回试试看看是否可行)

1
2
3
cd /var/www # var目录下的www目录起初如果并不存在,就自行创建
mkdir hexo
chown git:git -R /var/www/hexo

配置git hooks

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

输入如下内容后保存退出

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

然后赋予脚本的执行权限

1
2
3
ls -l post-receive # 查看sudoers文件的属性,并做记录
chmod +x post-receive
ls -l post-receive # 查看sudoers文件的属性,感知下发生了哪些变化

配置nginx

一开始时实际上应该是不存在hexo.conf这个文件的,所以执行vim /etc/nginx/conf.d/hexo.conf命令后,hexo.conf会被自动创建。但直接执行该vim命令权限不够,所以添上sudo。

1
sudo vim /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; # 网站的根目录
server_name xxx.com www.xxx.com; # 注意这里要替换成你自己的域名
access_log /var/log/nginx/hexo_access.log;
error_log /var/log/nginx/hexo_error.log;
location / {
root /var/www/hexo;
if (-f $request_filename) {
rewrite ^/(.*)$ /$1 break;
}
}
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;
}
}
1
service nginx restart # 重启nginx

至此服务器端就配置好了。下面只要在本机写文章然后用Hexo渲染下,并用git将静态网页push到服务器端就ok了~

需要注意的是,目前服务器只提供了http连接,尚未提供https连接,所以还需要再捯饬捯饬。具体就不展开了,不然这篇文章也太长了。

其他需要注意的

Front-matter怎么写

引用下官方文档对front-matter的定义:

Front-matter is a block of YAML or JSON at the beginning of the file that is used to configure settings for your writings. Front-matter is terminated by three dashes when written in YAML or three semicolons when written in JSON.

也就是说front-matter是这篇文章的配置信息,是放在文章开头,遵循YMAL语法(default)或JSON语法。以下是个示例。

1
2
3
4
5
6
7
8
9
10
11
12
13
title: title
date: yyyy-mm-dd
categories: category
tags: tag
#多标签请这样写:
#tags: [tag1,tag2,tag3]
#或者这样写:
#tags:
#- tag1
#- tag2
#- tag3
---
正文

ssh git@VPS的公网IP 时被拒绝

SSH使用的端口默认为22端口,所以你的VPS需要开启22端口。一般是在安全->防火墙下开启。

应用类型 协议 端口范围
HTTPS TCP 443
SSH TCP 22
HTTP TCP 80

博客的架构

这张架构图是从网上找的,很直观,记不清在哪找的了,感谢作者

Hexo架构图.jpg

整个工作流程可以总结为

  • 本机将markdown文件渲染成静态文件
  • 本机使用git将静态文件推送到服务器的裸库
  • 服务器再通过git-hooks同步网站根目录
  • 访客通过nginx访问服务器上的静态文件