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

几个你或许会问我的问题

为什么是 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

在其中输入如下内容并保存,注意 IPexample 需替换

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 在加班中抽出时间对搭建的帮助:)

分享到 评论