Hexo个人博客完全指南 (2017最新零基础手册)

概述

折腾了不少博客系统，但是发现到现在位置还是一直再用 Evernote 记笔记，偶尔总结一下再转发到博客上，总是觉得发博客的过程比较繁琐，所以一直没有坚持记录。

想一想折腾过 WordPress 免费服务器超慢，需要花钱买服务器，所以逐渐放弃了。之后开始使用 Jekyll 在Github上构建了一组网站，网站免费而且稳定，但是总是想不起来更新（实际上懒..）。前一段时间弄过一个 HubPress，这个的好处是可以在线后台更新，略微方便了很多，但是有一个问题，速度很慢，通过抓包分析，每次提交做了好多事情，所以更新的很少，而且只是点滴内容。最近发现了 Hexo，虽然这个已经不是什么新东西了，但是使用 Travis CI 自动构建好像也是近一段时间才流行起来，而且随着CI的加强，构建也更加方便简单。下面我就从头开始介绍如何完全免费构建一个Hexo博客，并且支持自动构建。

网站结构设计
获取 tk 免费域名
获取 cloudflare 免费DNS解析及简单的CDN
本机环境配置（如果不需要本机调试查看，该步骤可以省略）
Hexo 获取及主题安装配置（如果需要可以提供一份基本纯净的配置好的系统）
Gihub Repository 部署策略
Travis CI 配置

详细步骤

网站结构设计

建立网站前可以思考一下我们的博客应该是什么样子的。可以域名直达博客，也可以域名进入主页，然后子域名进入博客等等。对于我希望自己有两种语言的博客：英语和中文，所以我选择如下结构的博客：

mengxin.tk -> 主页，简单HTML静态网页
notes.mengxin.tk -> 中文博客，Hexo系统
blog.mengxin.tk -> 英文博客，Hexo系统
xxx.mengxin.tk -> 其他项目主页，任意系统以及链接跳转

如果你希望简单一点，可以直让主域名指向博客即可，当然如何设计结构对于后面 Github 的 Repository 有一定的影响，毕竟我们的网页实际上是部署在 Github 上的。

注册`tk`免费域名

这步这不是必须的，你可以使用 Github 的原生域名 xxx.github.io，然后子域名使用子路径 xxx.github.io/notes 等等。当然你也可以花钱注册任意域名，我们这里主要是为了介绍后面的 CNAME 配置，所以介绍如何注册免费域名。（这里没有任何广告，毕竟免费）虽然 tk 域名的索引率不高，但好歹也算是顶级域名，不花钱先凑活用吧。

域名注册很简单，登陆 Freenom主页，网页支持中文，先检查一下你的域名是否可用，如果可用就开始填注册信息，使用邮箱验证后就可以开始下单，选择12个月免费，直接下单就可以了。这里超过12个月的都是收费的，但是12个月后可以免费续。如果你还能坚持12个月，那就去买个高级的域名吧！

注册完之后，就可以在 我的域名 中看到刚刚注册域名啦，如下图所示：

然后我们需要配置该域名的 DNS nameserver，因为我们会用cloudflare来配置我们域名的DNS，这里我们选择 cloudflare 的免费 nameserver。ns1和ns2如下，其他ns删除留空

1 2	ns1：NS1 ns2：NS2

到这个页面大家可以先保留，这两个NS名称我们等会配置完 cloudflare 再回来填写再保存。

配置`cloudflare`免费DNS解析

cloudflare是一家专业的网站加速公司，其中包含多种产品，比如DNS解析及加速，网页优化，CDN，以及SSL。这里我们只是用其免费产品即可。

首先注册账号，然后添加网站（Add Site），添加完网站后需呀进行扫描然后可以继续配置。

下一步是验证已有的DNS记录，可以忽略直接下一步

然后是就是选择套餐，我们就选择免费的即可，目前功能足够啦。

接下来这一步比较重要，主要检查当前域名的 nameserver 名称以及需要配置的nameserver。还记得上一步的域名nameserver的配置我们还没有填完吧，这时候我们就可以把这两个需要配置的 NS 填入域名的 NS 配置页中（图中标明的NS1和NS2）。也就是告诉域名服务器我们要用cloudflare的DNS解析服务啦。然后点击 continue 进入下一步。

如果我们域名服务的 NS server已经设好（一般需要等待一段时间，实测很快就能生效了，我们将会看到配置成功的界面，表示 cloudflare 也识别了域名服务，并且确定域名服务器配置了cloudflare的NS。

最后我们只需要在 cloudflare 配置网站的记录即可，这里可以参考我的配置，当然你也可以任意配置。我把A记录指向了 Github 的IP，然后把 www 以及二级域名都指向根域名 @。配置如下图所示：

至此，基本域名配置完成了，这时候访问你的tk域名回显示 Github 的 404 页面。因为我们还没有部署 Github Page。下面我们开始博客的配置。

本机环境配置

（如果不需要本机调试查看，该步骤可以省略）

本机配置环境相当简单，只需要你正确装了 nodejs，具体版本不能太低，一般用当前稳定版和最新版都可以。另外推荐使用nvm安装nodejs，方便管理版本。装好node之后只需要一个命令装好Hexo就可以了。

1	sudo npm install hexo-cli -g

之后我们就可以使用 hexo 命令了。

Hexo 获取及主题安装配置

如果正确配置好本地开发环境，我们就可以使用 Hexo 来进行 Hexo 的安装和测试了。（如果你没有配好本地环境，文章最后会提供一份基本纯净的配置好的系统，不过强烈建议自己搭建）

Hexo 初始化博客

通过 Hexo 命令行工具很快就能创建一个 Hexo 的博客：

//进入你的博客文件夹，比如 blog-hexo
hexo init
//这个命令会在文件夹中初始化一个hexo博客，并且安装所需要的依赖。
//当然也可以后面指定一个文件夹名称，这样博客就会创建在这个子文件夹中
hexo server
//这个命令之后我们就可以访问 http://localhost:4200 查看Hexo博客了

下载主题并安装

主题的下载推荐进入 Github 项目的 release 来下载 release 的版本。这样文件不会带有 git 信息，否则我们会发现后面如果我们用git 管理我们的 blog-hexo，里面会有一个主题的 submodule，个人感觉 submodule 在 git 里面用的人不多，可能会带来麻烦。

下载 Next最新release的主题包（当前5.1.1, 2017 Mar 24）然后把内容解压到刚才 blog-hexo 中 themes 目录中，并重命名文件夹为 next。

然后关键是在 blog-hexo文件夹 中的 _config.yml 将 theme 设为 next（和刚才修改的文件夹名称一致）

1 2	# theme: landscape theme: next

这时候该主题就算是安装成功了。

主题的基本配置

这里说明一下，hexo有两种配置文件，一种是外层的配置，一种是主题的配置。大家不要混淆。下面我使用

HexoConfig: 表示外面的 _config.yml
ThemeConfig: 表示里面的 _config.yml

这里简单的介绍一下如何配置主题，具体配置方法参考主题官方手册，或者Github上的wiki，两者互为补充。

主题语言，设置 HexoConfig language: zh-Hans
主题的样式，有三种，需要设置 ThemeConfig scheme: Pisces

Gihub Repository 部署策略

其实之前Hexo博客及主题网上已经有很多配置的方法的博文介绍，我这里只是做了一些概要的总结。总之并不难，基本按照步骤一步一步即可。下面我来介绍一下如果在Github上部署网站。

这一步首先需要规划网站的结构，这里简单说明一下Github Page，比较关键的是我们需要知道，如果你的 Repository 的名字你的用户名加上 .github.io，那么这个 Repository 的 master 分支将会直接被渲染成页面。但是如果你的 Repository 是其他名字，需要创建 gh-pages 分支来渲染页面。所以我的Repository的构建策略如下：

xmeng1.github.io ：master分支，为主页面的代码
notes：gh-pages分支，为中文博客
blog：gh-pages分支，为英文博客

所以我们的静态博客文件需要部署到上述的 Repository 以及对应的分支。

Travis CI 配置

下面这一节最为重要，也是实现博客自动更新的关键。

我们知道Hexo本身只是一个静态博客生成器，一般的流程是：

第一步：撰写MD博客文件
第二步： Hexo g 生成博客静态文件
第三步：将静态文件push到Github的Repository

显然每次更新文章都这样做将会很麻烦，而且需要配置本地环境。这里我们将会把上面那个过程的后两步使用 Travis CI 来完成。也就是说我们把CI理解为在本地进行的操作放到了云端。

创建博客源码Repo

我们之前已经创建好博客静态文件的 Repository，但是如果我们用CI，需要创建一个博客源代码的Repository，如下所示，这些代码仓库可以使公开或者私有都没有关系：

notes-hexo master 对应 notes
blog-hexo master 对应 blog

然后我们把之前的博客源码上传至对应的博客源码仓库。

添加Travis配置文件

一般只有仓库中就了 tarvis 的配置文件，才能触发CI进行操作，所以我们创建该文件.travis.yml与仓库的根目录下，一下以notes-hexo为例子。

安装依赖
生成静态文件
配置git，并commit代码
强制向我们的静态仓储提交代码

这里面有两点非常重要

echo "notes.mengxin.tk" > CNAME 我们知道如果我们需要使用自定义的域名，我们需要在仓库里添加一个CNAME文件，内容就是定义的域名，而每次强制提交代码，代码都会覆盖，所以我们需要每次都生成一个这个文件
其中的 GH_TOKEN 和GH_REF 安全起见使用travis的环境变量来配置，下一节会展示如何配置这两个变量。

language: node_js
node_js: stable

# Travis-CI Caching
cache:
  directories:
    - node_modules


# S: Build Lifecycle
install:
  - npm install

script:
  - hexo cl  #清除
  - hexo g  #生成

after_script:
  - cd ./public
  - git init
  - echo "notes.mengxin.tk" > CNAME
  - git config user.name "xmeng1"
  - git config user.email "[email protected]"
  - git add .
  - git commit -m "Update notes"
  - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:gh-pages
# E: Build LifeCycle

branches:
  only:
    - master

配置Travis

Travis的配置很简单，注意如果你是 private 的仓库，需要进入com网站来配置，其他 public 的仓库，则使用org网站，具体配置见下图，主要是开启自动构建以及只有travis配置文件才进行构建的选项，以及增加构建参数，记得参数需要进行保密，不能再日志中明文可见。

GH_TOKEN 是静态博客仓库所在的账号的develop token，这个一定要保密。
GH_REF 是静态博客仓库的git地址，这个其实没必要保密

Push代码

最后一旦我们push了新的代码到 notes-hexo，CI将会自动构建生成静态博客代码并把代码推送到你的notes仓库，然后添加一个CNAME文件，最终网站将会正确显示。

如何撰写一篇日志

最后博客配置完成，如何撰写博客呢？我这里有几种方案供大家选择：

本地修改并推送

这种方法最简单，只需要用hexo命令或者直接在 _post 文件夹中创建markdown文件，编辑并推送即可。但是不方便，需要本地有git以及完整的仓库代码。

Github直接创建文件

现在Github支持直接在网站上创建文件，这种方法相当方便，可以随时随地的写博客，但是鉴于github的markdown编辑并不是很好用，所以可能不太好写复杂的博客。

使用 stackedit.io

stackedit.io对于经常写markdown的人不陌生，开源免费的markdown编辑器，最关键的是它支持向github推送，所以用这个编辑器推送既方便又有强大的markdown编辑功能，可以说是目前在线编辑博客的最佳方案。

使用小书匠编辑器

当然如果你偏爱客户端编辑并且习惯在本地进行撰写博客，小书匠编辑器将是你的不二选择，同样是免费的编辑器，同时又全平台客户端。另外功能丰富基本覆盖了所有目前你需要的功能。我个人认为有几个功能最好用

图床功能，该功能可以直接把博客的图片放到图床上了
多平台保存，我目前常用的就是Github和evernote，github上发布，evernote留作备份

概述