如何在 VPS 上搭建 Hexo 博客并使用 Git Hooks 更新？

Magic
Git Hooks, Hexo, VPS

几个你或许会问我的问题

为什么是 Hexo ？

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

- @tommy351 ( Hexo 作者 ）

现在是 2015 年，身在开发者圈里，如果想开始写一个 Blog ，使用静态网站生成器搭建无疑是最好的选择，而最热门的三款生成器 Jekyll / Octopress / Hexo 中，对于不懂前端的我们， Hexo 有着质量最高的主题，几乎可以说是唯一的选择，相比 Jekyll / Octopress ，安装简便，生成页面效率有质的区别（可以想象某一天积累到 100 篇 Blog ， Jekyll / Octopress 生成需要花费数分钟，而 Hexo 仍仅需几秒的血泪对比）。

为什么是在 VPS 上？

因为种种原因，如 GitHub 的 CDN 提供商是 fastly ，而 fastly 同时为 Twitter 提供服务； GitHub 上有许多并不和谐的项目…… GitHub 在国内多次被墙。使用 VPS 相比于 GitHub Pages 更为自由，比如可以为博客 配置 SSL ，无论是 从前面进还是从后面进 的你，最终目标都是把自己补全为一个 full-stack developer ，更早地向 Dev-Ops 方向迈进对你没有任何坏处。我始终认为，每一位 梦想成为魔法师的男孩 都应该有一个 VPS ，无论在你学习的哪个阶段，它总是可以用来做许多有趣抑或有用的事。

为什么通过 Git Hooks 更新？

其实你也可以本地什么都不做，每次都把文章的 *.md 通过 sftp 上传到 VPS 上，然后在 VPS 的网站目录中执行 hexo d -fg 更新博客，至于这个过程感受如何，请自行品味。

我还没有 VPS ？

/*以下提及的两款 VPS 同时均可搭建个人独享的代理服务*/

  • 如果可以接受每 月 5 的价格 -> DigitalOcean /*通过链接注册赠送 10 ，在开发者社区中有很好的声誉，是这个行业中为数不多的靠谱提供商之一，堪称最优性价比。*/
  • 如果可以接受每 年 4.5 的价格 -> 123Systems /*需要输入优惠码 LABOR 才可以以 4.5 的价格购买。机房一定要选择 Los Angeles 。如果缺货，属于正常情况，请耐心等待。 越便宜的东西，很可能就越容易出问题，因为商家不可能在卖给你那么便宜的同时还用足好料。而且如果出了问题，因为本身就是没有利润的东西，商家很可能也就不会当回事了。 作为练手可以，但是请一定做好数据备份，并在资金充裕时及时迁移到更好的服务。*/
  • 不愿意/不能为 VPS 付费？请使用 GitHub Pages 和免费代理服务，关于是免费代理服务，一句话忠告：免费的是最贵的。既然总还是需要购买代理服务的，为什么不自己搭建呢？

域名如何注册、配置？

如果还没有注册域名，推荐使用 namesilo ，这是目前在国外注册域名的最廉价注册商（各种数年一遇的活动不计），在这里注册的所有域名都 免费赠送域名保护 ，至于为什么不在国内注册？你懂的。使用优惠码 EscapeFromChina 可以获得 1 美元优惠（即每年 8.99 - 1 ≈ ￥50 ），可以使用 支付宝 付款。

配置即在域名注册商（如 namesilo ）的管理台将域名的 NS 服务器设置为 DNSPod / CloudXNS 的，并在 DNSPod / CloudXNS 上为域名配置一条 A 记录和一条 @ 记录，记录值为你的 VPS IP ，配置较为基础，如果你不知道具体如何配置，请自行搜索。

搭建过程

搭建过程分为两部分，一部分在本机进行，另一部分则在服务端进行，大致需要完成的工作是在本机和 VPS 各安装一次 Hexo 和 Git ，并在 VPS 上安装 Nginx 服务器、配置 Git Hooks 以实现更新。

本机1

Linux Desktop

Linux Desktop 用户一定都是 Power User ，此处略。

Windows

以下下载 强烈 建议在 代理 下进行，或者自行寻找国内源。

安装 Node.js

在 Node.js 官网下载最新版，一路默认安装。

安装 Git

下载 Git for Windows ，一路默认安装。

Mac

安装 Homebrew

安装 Node.js

使用 Homebrew 安装 Node.js
brew install node

安装 Git

系统自带，无需手工安装。

Windows && Mac

/*以下操作， Windows 涉及 Node.js 、 Hexo 的操作都在 cmd 中输入 node 后执行，涉及 Git 的都在 Git Bash 中执行。 Mac 所有操作都在 Terminal 中执行。*/

创建网站目录

在任意位置创建一个文件夹，作为网站目录，并通过 cd 命令进入文件夹。

本地安装 Hexo

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

打开 http://localhost:4000 即可看到你的站点（当然还没有发布到网络）。

本地 Git 配置

同样通过 cd 命令进入文件夹，之后执行

1
2
3
git init
git add .
git commit -m "Initial commit"

VPS

此处为 Debian / Ubuntu 在 root 用户下的操作，使用其他发行版本的一定是 Power User ，略。

关于连接 VPS ， Windows 用户请使用 Putty （提示： Putty 中使用粘贴仅需鼠标右键）， Mac 则直接在 Terminal 中输入 ssh root@IP 。

关于 vi 操作，不会用 vi 可以将下列命令中的 vi 全部替换为 nano (可能需执行 apt-get install nano -y )，如果觉得 nano 使用还是相对复杂，请使用 SFTP 工具， Windows 用户可使用 WinSCP ， Mac 可使用 Cyberduck 。

1
2
3
4
5
6
7
8
9
apt-get update && apt-get upgrade -y
apt-get install git-core -y
curl -sL https://deb.nodesource.com/setup | bash
apt-get install nodejs -y
apt-get install nginx -y
cd /etc/nginx/sites-available
rm -rf default
touch example.com
vi example.com

在其中输入如下内容并保存，注意 IP 和 example 需替换

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 IP:80 ;
    root /var/www/example.com/public;
    server_name example.com;
    access_log  /var/log/nginx/example_access.log;
    error_log   /var/log/nginx/example_error.log;
    location ~* ^.+\.(ico|gif|jpg|jpeg|png) {
            root /var/www/example.com/public;
            access_log   off;
            expires      1d;
        }
    location ~* ^.+\.(css|js|txt|xml|swf|wav) {
        root /var/www/example.com/public;
        access_log   off;
        expires      10m;
    }
    location / {
        root /var/www/example.com/public;
        if (-f request_filename) {
            rewrite ^/(.*)  /1 break;
        }
    }
}

之后执行

1
2
3
4
5
6
7
8
ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
cd ~
mkdir repos && cd repos
mkdir example.com.git && cd example.com.git
git init --bare
cd hooks
touch post-receive
vi post-receive

在其中输入如下内容并保存，同样注意前四行的替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#!/bin/bash -l
GIT_REPO=HOME/repos/example.com.git
TMP_GIT_CLONE=HOME/tmp/git/example.com
PUBLIC_WWW=/var/www/example.com
rm -rf {TMP_GIT_CLONE}
git clone GIT_REPO TMP_GIT_CLONE
rm -rf {PUBLIC_WWW}/*
cp -rf {TMP_GIT_CLONE}/* {PUBLIC_WWW}
cd ~
cd {PUBLIC_WWW}
hexo d -fg
cd ~
exit

最后执行

1
2
3
chmod +x post-receive
cd ~
service nginx restart

本机2

以下操作需要先 cd 到网站目录，注意替换

1
2
git remote add example root@IP:repos/example.com.git
git push example master

此时需要输入一次 VPS 密码，稍等片刻即安装完成。打开 example.com 即可看到你的博客。

关于更新 Blog

使用一款 MarkDown 编辑器写 Blog 。写完后将文件以 *.md 的格式保存在本地 [网站目录]\source\_posts 中。 文件编码必须为 UTF-8 ， 这一点仅 Windows 用户需注意。 如果你不知道使用什么 MarkDown 编辑器，请自行搜索。

每篇 Blog 都有固定的参数必须填写，参数如下，注意每个参数的 : 后都有一个空格。

title: title
date: yyyy-mm-dd
categories: category
tags: tag
#多标签请这样写：
#tags: [tag1,tag2,tag3]
#或者这样写：
#tags:
#- tag1
#- tag2
#- tag3
---
正文

cd 网站目录后执行

1
2
3
4
hexo d -fg
git add .
git commit -m "Post A New Blog"
git push example master

最后的几句话

靡不有初，鲜克有终。坚持做下去，你生活中的每一条河流都会在这里留下痕迹，你可以一直做到你老去的那一天，让你的整个人生沉淀成一个页面丰富的 html 文件夹。

感谢@Sunyanzi 在加班中抽出时间对搭建的帮助:)

分享到