Springwon

在VPS上配置hexo博客

我本人是一个比较喜欢写东西的人,从很早以前的QQ空间,到后来的各种SNS。

建博客的初衷是写一点学习过程中的想法和一些平时的笔记。

刚开始的时候为了翻过防火墙,搞了一个VPS,煞有介事的申请了一个域名,安装了wordpress。

但是wordpress对于一个平时的博客来说,还是太沉重了。在一次没有备份的情况下数据库无法修复的情况以后,我就决定换一个框架。

一番寻觅之后,我发现了Hexo。Hexo是一款基于Node.js的静态博客框架,对于用过github Pages的同学想必不陌生。

A fast, simple & powerful blog framework, powered by Node.js.

这是作者@tommy351对hexo的描述。
P.S.作者是台湾同胞

0.写在前面

需要的准备:

  • 一个VPS服务器,这里我使用Digitalocean提供的服务,VPS服务器为Ubuntu 14.04
  • 一个域名
  • 一台可以上网的macbook
  • 基本的命令行操作和基础的计算机网络知识

So 为什么是VPS?


静态网页完全可以放在Github Page和Gitcafe上。 这点我想可能因为我linux用得不太好,以及我一颗fullstack developer的心。

我推荐Digitalocean的原因是在国内DO的访问速度还是可以的,而且价格比Linode的最便宜的少一半(5刀一个月),而且DO有github上的student pack,学生用户可以拿到50$的优惠,相当于免费10个月。。

为什么macbook?


1000个人心中有1000个哈姆雷特。

好看,UNIX环境,更专业,更省心。

域名?


小学的时候拥有个人网页的想法终于实现啦。

1.开始搭建

博客的搭建过程分两部分,需要在本机和服务端都安装Hexo和Git,VPS上还需要安装Nginx服务器,配置Git Hooks。

因为OS X自带Git,所以本机不用安装Git

2.本地搭建

2.1本机安装Node.js


使用Homebrew安装Node.js

1
$brew install node

2.2创建目录


在任意位置创建一个文件夹,作为博客的目录。并进入该目录。

2.3本机安装Hexo


1
2
3
4
5
$ npm install -g hexo-cli
$ hexo init
$ npm install
$ hexo d -fg
$ hexo serve

打开http://localhost:4000如果看到hexo的初始页面证明安装成功。

2.4配置Git


通过cd命令进入文件夹,然后执行

$ git init
$ git add .
$ git commit -m "Initial commit"

2.5生成ssh密钥


输入命令ssh-keygen -t rsa -C "blog",生成公钥和私钥,打开生成密钥的文件夹,找到blog.pub。
关于密钥的知识,参看阮老师的博客

3.VPS端搭建

3.1Nginx配置

3.1.1安装Nginx和Node.js

$ curl -sL https://deb.nodesource.com/setup | bash
$ apt-get install nodejs -y
$ apt-get install nginx -y

3.1.2在Nginx中新建虚拟主机

$ touch /etc/nginx/sites-available/blog
$ vi /etc/nginx/sites-available/blog

配置如下:

3.1.3配置Nginx


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 YOURIP:80 ;
root /var/www/blog;
server_name YOURDOMAIN;
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 10m;
}
location / {
root /var/www/blog;
if (-f $request_filename) {
rewrite ^/(.*)$ /$1 break;
}
}
}


其中/var/www/blog是存放博客静态文件的目录,后面会用到

注意替换YOURIPYOURDOMAIN

3.1.4创建目录和分配权限


1
2
3
$ cd /var/www
$ mkdir blog
$ sudo chmod 775 -R /var/www/blog


3.1.5运行Nginx


1
2
$ ln /etc/nginx/sites-available/blog /etc/nginx/sites-enabled/blog
$ /etc/init.d/nginx restart


3.2服务器git配置


3.2.1新建git用户


1
$adduser git --ingroup sudo


3.2.2切换到git用户,并处理公钥


1
2
3
4
5
$ su git
$ cd ~
$ mkdir .ssh && cd .ssh
$ touch authorized_keys
$ vi authorized_keys


把公钥blog.pub里的内容粘贴到authorized_keys里,这样本地和VPS之间就可以通过ssh使用git了

3.2.3测试


在本机的terminal中输入ssh git@YOUR IP,如果可以登录,那么就算成功

3.2.4安装git,并为静态内容新建仓库

1
2
3
4
5
$ apt-get update && apt-get upgrade -y
$ apt-get install git-core -y
$ cd ~
$ mkdir blog.git && cd blog.git
$ git init --bare

3.2.5本地设置

1.设置git用户名,在Bash终端
1
2
$ git config --global user.email "email@example.com"
$ git config --global user.name "username"
2.修改hexo配置文件_config.yml中的deploy选项
1
2
3
4
5
deploy:
type: git
message: update
repo:
s1: git@YOURDOMAIN:blog.git,master

3.检测

运行hexo g hexo d,如果一切正常,静态文件已经被成功的push到了blog的仓库里

3.3配置Git hooks

本地deploy只是把静态文件push到了VPS的git仓库里。使用git hooks在每次push完成后,执行一段脚本,把blog.git里的内容clone出来,再复制到/var/www/blog目录。就可以实现博客的更新了。

1
2
3
$ cd ~/blog.git/hooks
$ touch post-receive
$ vi post-receive

使用下面的脚本

1
2
3
4
5
6
7
8
#!/bin/bash -l
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}

更改脚本权限

1
$ chmod +x post-receive

这时在本地执行hexo g && hexo d 就可以完成博客的更新