搭建个人博客:Github、Hexo

去年使用搬瓦工的 VPS,使用 Ghost 搭建的博客,前几天忘记续费,又赶上 Vultr 做活动,所以更换为 Vultr 的 VPS 了。
Vultr 搭建了 Shadosocks,速度杠杠的,通过这个链接购买有优惠哦:Vultr 优惠通道

想在新环境下搭一套 Ghost 博客,可是总有问题,Ghost开始商业化后也对源码不怎么样上心。自己从头搭建博客,网站内容也需要自己想办法备份,在搬瓦工上就是忘记备份了 ┑( ̄Д  ̄)┍。
想要尝试下Hexo + Github,不用准备服务器,也不用考虑备份,就是需要本地生成再 push 到 github,没有直接在网站后台编辑文章方便。

快速概览

Github Pages 是 Github 提供的,用于展示用户 / 项目,特定仓库放的静态网页可以直接通过域名访问到,就像访问网站似的。它的官方好基友是 Jekyll,Ruby 实现,用于转换Markdown 为静态网页。
Hexo是另一个使用广泛的静态网页生成框架,由 Node.js 实现,使用更简单。
NexT是 Hexo 的一个主题,简单大气,配置方便,并且集成了一些插件,很强大。

有能力的同学可以直接看官方文档,更加清晰、直观、全面:
空间 Github Pages
框架 Hexo
主题 NexT

简单搭建

从零开始简单使用的教程,网上有很多可参考:20 分钟教你使用 hexo 搭建 github 博客
在下面记录稍微高级点的用法,主要包括:独立域名、自动备份、跨机使用、自定义主题

备份与跨机使用

通过上一步,我们已经可以通过 hexo new xxx; vi xxx.md; hexo g -d 这简单几步来写文章并发布了。
但如何在另一台机器上写文章?在公司写了一半回家接着写怎么办?

首先了解下 Hexo 在 github 发布文章的机制:

  1. github 提供仓库 xxx.github.io,并且使得我们可以通过域名 xxx.github.io 来访问该仓库的 master 分支下的内容
  2. 在本地搭建 Hexo,使用 Hexo init 构建所需的组织结构,通过 hexo new xxxsource/_posts文件夹下生成文件xxx.md,然后手动编辑该文件写作。
  3. hexo generat会使用 source 目录下所有内容生成静态网页,并置于 public 目录下
  4. hexo deploy时,会将 public 种的内容在 .depoly_git 目录 add 并 commit,然后 git push -f 到仓库的 master 分支上,注意是强制 push。

上述过程可以看到,目前发布的内容是依赖于本机的配置以及 source 目录中的内容生成的。如果切换到新机器,没有 hexo 可以重装,没有相应配置可以再配一次(虽然比较麻烦),可是没有 source 目录执行 hexo g -d 时就会将原有网页清掉,完全变成新机器上所生产的内容了。
我们希望 可以方便地在新机器获得与原有机器相同的使用环境 。其实很简单,将用到的配置、源文件自动备份就可以了。
Hexo 会自动生成网页并 push 到相应 master 分支,我们手动将与生成网页相关的文件备份。Git 方便备份也方便还原,所以可选择 Oschina 等私有仓库,也可选择 Github 等公开仓库,还可使用同一仓库的不同分支。
这里我们使用 Github 仓库 xxx.github.io 的 hexo 分支:

  1. 仓库 xxx.github.io 新建 hexo 分支,并将其设置为默认分支
  2. git clone https://github.com/xxx/xxx.github.io.git 到本地 xxx 目录
  3. 本机hexo init project,并将 project 中内容复制到 xxx 中。(!不可直接在 xxx 中执行hexo init,这个命令会将原有.git 文件夹清空)
  4. 大力配置一番,并将无用文件加入.gitignore,git add -all; git commit; git push

我的.gitignore 文件为:

1
2
3
4
5
db.json
debug.log
node_modules/
public/
.deploy_git/

之后再写文章,改配置,换主题等,按如下步骤:

1
2
3
4
5
6
7
8
9
# 新增文章或做更改
hexo new "post name"
# 源文件 push 到 hexo 分支
git add .
git commit -m 'message'
git push
# 生成网页并部署
hexo generate
hexo deploy

在另一台新机器上使用时

1
2
3
4
5
6
# GIT_URL 是仓库地址,PROJECT 是在本机的目录
git clone $GIT_URL $PROJECT
cd $PROJECT
#
npm install hexo
npm install

在另一台机器上继续写文章时

1
2
git pull # !!! 不要忘记 !!!
#

还记得之前说过 hexo deploy 使用的命令类似 git push -f 吗?如果想保留之前的发布记录,即 master 分支历史,在①处执行操作git clone $GIT_URL --branch master --single-branch .deploy_git。不执行会按照当前记录强制 push,更改 github 上的 commit 历史,当然这点对我们部署的网站没有太大影响,我们最终要看的是展现出来的网站,并且源文件的历史记录在 hexo 分支上也有。

独立域名

独立域名是指使用自己申请的域名,yulianfei.cn这种;而不是分配的 xxx.github.io 这种。

  1. 向域名服务商申请独立域名 xxx.com;服务商有万网、Godaddy 等
  2. 在仓库 xxx.github.io 的 setting 中,在 Custom domain 中填入申请到的xxx.com
  3. 在 Hexo 的 source 文件夹下新建文件,文件名为 CNAME,内容为 xxx.com,然后通过 hexo g -d 生成并部署
  4. 在域名服务商出设置 DNS 解析,添加 A 纪录,指向 IP 192.30.252.153192.30.252.154,若有变动可查看Github Pages Custome domain
  5. 等待解析生效,不同服务商生效时间不同,5 分钟到 24 小时都有可能,生效后直接输入 xxx.com 就可以看到自己的博客了。

自定义主题

太累了,不想写了,NexT配置起来很简单,文档看起来也很方便。
这个主题还集成了 多说评论 访问统计 等,打开这两个功能,一个博客的基本功能就都有了。