利用GitHub和Hexo打造免费的个人博客

每个程序猿都需要一个个人博客，目前广泛出现在大家视野里的有CSDN、博客园、简书，但是他们却没有给用户一个专属的站点、一个好记的域名。你需要一个https://xxx.xxx.xxx/格式的网址，一个自由书写代码的站点，一个真正的个人博客。

1. GitHub提供的免费网站

1.1 GitHub——面向开源及私有软件项目的托管平台

GitHub官网

作为开源代码库以及版本控制系统，Github拥有超过900万开发者用户。随着越来越多的应用程序转移到了云上，Github已经成为了管理软件开发以及发现已有代码的首选方法。

——来源：百度百科

GitHub是目前最大的代码仓库，如果你还没有GitHub账号的话，就赶紧去官网注册一个吧。

1.2 GitHub Pages——免费提供最基础的静态网站

GitHub Pages官网

每个GitHub账户都可以免费开一个自己的静态网站（域名为 username.github.io），该网站由GitHub Pages提供，省去了域名、服务器、备案等一系列建站需要考虑的问题，只需要一份静态网站的代码即可。

首先你需要创建一个GitHub Pages repository。GitHub Pages repository跟普通的repository是一样的，唯一的区别就是他的名字必须叫做username.gihub.io。这个官方教程 GitHub Pages 写的十分好懂，按这个做完之后你就有了一个你的网址username.github.io！

比如你的GitHub用户名是abc，那么你的repository名称和网址就是abc.gihub.io

现在离一个好网站只差一步了，就是把某个好网站的所有文件拷贝到你的库里面。

GitHub官方建议你使用博客生成工具Jekyll 。GitHub在库的设置里面还提供Jekyll主题选择。

本文将介绍的是Hexo生成工具。

2. Hexo搭建的静态博客网站

2.1 Hexo——快速、简洁且高效的博客框架

Hexo官网

超快速度

Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。

支持 Markdown

Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。

一键部署

只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。

丰富的插件

Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade, CoffeeScript。

2.1.1 安装前提

安装Hexo相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序：

• Node.js (Should be at least nodejs 6.9)
• Git

如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用npm即可完成Hexo的安装。

$ npm install -g hexo-cli

如果您的电脑中尚未安装所需要的程序，请根据以下安装指示完成安装。

Mac 用户

您在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

2.1.2 安装 Git

Windows：下载并安装 git.

Mac：使用 Homebrew, MacPorts ：brew install git;或下载 安装程序 安装。

Linux (Ubuntu, Debian)：sudo apt-get install git-core。

Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core。

Windows 用户

由于众所周知的原因，从上面的链接下载git for windows最好挂上一个代理，否则下载速度十分缓慢。也可以参考这个页面，收录了存储于百度云的下载地址。

2.1.3 安装 Node.js

安装 Node.js 的最佳方式是使用 nvm。

cURL:

$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

$ nvm install stable

或者您也可以下载 安装程序 来安装。

Windows 用户

对于windows用户来说，建议使用安装程序进行安装。安装时，请勾选Add to PATH选项。

另外，您也可以使用Git Bash，这是git for windows自带的一组程序，提供了Linux风格的shell，在该环境下，您可以直接用上面提到的命令来安装Node.js。打开它的方法很简单，在任意位置单击右键，选择“Git Bash Here”即可。由于Hexo的很多操作都涉及到命令行，您可以考虑始终使用Git Bash来进行操作。

2.1.4 安装 Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

2.1.5 建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后，指定文件夹的目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

2.2 Hexo的自定义配置及博客主题

2.2.1 _config.yml

网站的配置信息，您可以在此配置大部分的参数。文件内各个配置参数均有详细备注，按规则填入所需即可。

2.2.2 package.json

应用程序的信息，EJS、 Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.8.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-server": "^0.3.3"
  }
}

2.2.3 scaffolds

模版文件夹，当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

2.2.4 source

资源文件夹是存放用户资源的地方，除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

2.2.5 themes

主题文件夹，Hexo 会根据主题来生成静态页面。GitHub上存在许多第三方主题，根据主题的文档介绍引入Hexo项目中，会在主题文件夹下生成一个相应的文件夹，再修改_config.xml文件夹的theme属性即可。

本文将要介绍的是Indigo主题。

3. Indigo主题——Material Design 风格的Hexo主题

Indigo in GitHub

仅支持 IE10+ 等现代浏览器。

去 jQuery，更轻。相信现代浏览器的原生兼容性。

使用 Less 作为 css 预处理器，需要安装 hexo-renderer-less。

添加了英文字体支持 Roboto。

添加了一些波纹效果。

无前端依赖的分享实现。

基于静态数据的站内搜索，无第三方侵入。

支持文章打赏。

现有两个主题分支，我的博客中使用的是card分支卡片风格主题，master分支是旧版平铺式风格主题。

3.1 安装

安装需确认你的 Hexo 版本在 3.0 以上，以及 Node 版本为 6.x 以上，在 Hexo 根目录，执行以下命令。

git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo

3.1.1 切换主题

执行git branch显示所有本地分支，如果只存在一个分支，可以执行下面的命令获取另一分支的主题。

# 获取远程 card 分支，并切换
$ git checkout -b card origin/card

# 获取远程 master 分支，并切换
$ git checkout -b master origin/master

此命令只需执行一次，之后使用git checkout [branch]命令在两个主题之间切换。

3.1.2 依赖安装

还是在 Hexo 根目录，如果以下插件已安装过，无需再次安装。

Less

主题默认使用 less 作为 css 预处理工具。

$ npm install hexo-renderer-less --save

Feed

用于生成 rss。

$ npm install hexo-generator-feed --save

Json-content

用于生成静态站点数据，用作站内搜索的数据源。

$ npm install hexo-generator-json-content --save

QRCode

用于生成微信分享二维码。

可选，不安装时会请求jiathis Api生成二维码。

$ npm install hexo-helper-qrcode --save

3.1.3 开启标签页

hexo new page tags

修改 hexo/source/tags/index.md 的元数据

layout: tags
comments: false
---

3.1.4 开启分类页

仅 card theme 支持。

hexo new page categories

修改 hexo/source/categories/index.md 的元数据

layout: categories
comments: false
---

3.2 常见问题

3.2.1 如何设置文章摘要

在 Markdown 中加 <!-- more -->

3.2.2 文章如何添加多个标签

有两种多标签格式

tags: [a, b, c]

或

tags:
  - a
  - b
  - c

3.2.3 修改 brand 图片（菜单上方背景图）

替换 themes\indigo\source\img\brand.jpg，保持原文件名不变。

3.2.4 如何在文章中使用图标

先到 fontawesome 找到你需要的图标名，比如：book，按以下格式使用：

<i class="icon icon-book"></i>

图标样式前缀均为 icon，此外还有 5 个图标大小调节类和 1 个间距类。

<!-- 1.3倍大小 -->
<i class="icon icon-book icon-lg"></i>
<!-- 2倍大小 -->
<i class="icon icon-book icon-2x"></i>
<!-- 3倍大小 -->
<i class="icon icon-book icon-3x"></i>
<!-- 4倍大小 -->
<i class="icon icon-book icon-4x"></i>
<!-- 5倍大小 -->
<i class="icon icon-book icon-5x"></i>
<!-- 5px右边距 -->
<i class="icon icon-book icon-pr"></i>
<!-- 5px左边距 -->
<i class="icon icon-book icon-pl"></i>

3.2.5 个别图标无法显示

如果你的浏览器安装了 ADBlock，它会屏蔽 SNS 相关的内容，比如：Github。

解决办法：可配置 ADBlock 不在你的站点运行。

3.2.6 生成站点后没有样式

安装less

3.2.7 自行修改样式线上不生效

因为主题默认引用 cdn 样式，只有主题更新时，cdn 中的样式才会变化。 如果想使用自己修改的样式，需要把修改配置中的 cdn: false。这样就不在引用cdn资源，使用本地资源了。

3.2.8 更改样式后网站没有生效

确认非缓存问题后，执行 hexo clean 再进行生成上传。

建议每次提交时都执行一次hexo clean，可以在项目目录下创建一个shell脚本，执行命令hexo clean && hexo generate --deploy，运行后即可保证每次修改都能生效。

3.2.9 更改站点配色

编辑 themes\indigo\source\css_partial\variable.less，更改对应的颜色变量。

配色参考：Material Design Color Palette Generator

注意：使用自定义配色时需把主题配置中的 cdn 关闭，cdn: false。

3.2.10 添加404页面

在 hexo/source 目录内新建 404.html。

设置元数据信息，如果不想套用主题布局可设置 layout 为 false。

layout: false
title: "My Blog Name | 404"
---

3.2.11 在博客中使用 Emoji

参考 Can i use emoji in mypage?

3.3 自定义页面

主题 Card 分支为自定义页面提供了定制化模块支持，特此简单介绍。

3.3.1 创建自定义页面

hexo new page pageName

执行命令后会在你的 Hexo 根目录 source/ 目录下生成一个与你刚才输入的 pageName 一样的文件夹，里面只有一个 index.md。

3.3.2 页面配置

layout: page      # 必须
title: pageTitle  # 必须，页面名称
description: 用户自定义页面功能演示       # 页面二级标题，描述性文字
comments: false     # 禁用评论，可选，默认开启
reward: false       # 禁用打赏，可选，默认开启
----

3.3.3 模块和内容输入

自定义页面中，image、blockquote、pre 等将被赋予特殊的样式。此外，提供了@moduleName{ ... }格式的标记用于包裹内容，赋予样式。