最近想搭建自己的博客，在网上查了攻略之后决定使用Hexo+github来搭建，搭建过程中也遇到了一些问题，所以本文一方面是让大家有一个参考，还有就是记录一下方便自己以后查看。废话不多说啦，下面就来详细介绍具体步骤。

PS：我博客的地址：https://summerrouxin.github.io/

1、什么是hexo

  Hexo是基于NodeJs的静态博客框架，具有快速、简洁、高效等特点。使用Markdown（或其他渲染引擎）解析文章，生成的静态网页可以托管在Github和Heroku上。

2、环境配置

2.1 安装git

  看到这篇博客的应该大部分都是程序员，所以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

  检验是否安装成功：
  $ git version

2.2 安装nodejs

  去 nodejs 官网下载所需系统的安装包，并根据提示安装即可。检验是否安装成功：
  $ node -v

2.3 安装hexo

  上述两个必备程序安装成功之后，只需要通过npm便可以完成Hexo的安装了。
  $ npm install -g hexo-cli
  至此，环境配置就完成了，可以开始搭建博客啦！

3、新建博客 rouxin

3.1 创建github仓库

  进入GitHub新建repo，注意 这里的仓库名称要和你的username对应，这边很容易出问题，所以一定要注意，如下图所示：

图新建repo

3.2 hexo操作

$ hexo init rouxin
$ cd rouxin
$ npm install

  上面三步主要完成初始化hexo的文件夹，安装依赖。新建完成后，可以看到文件夹的结构如下：

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

  其中，_config.yml是配置文件，这个文件我们会经常用到，后面也会介绍具体可以配置哪些信息。
  source是资源文件夹，用来存放我们的markdown文件。
  themes文件夹是用来放置主题的，后面主题部分我们将详细介绍。

  下面我们修改配置文件_config.yml中以下几个字段，完成部署的相关配置：

图部署
其中，

  • type字段对应的是部署的服务器类型，我们在这边填写git即可
  • repo是我们在3.1中创建的github仓库的地址
  • branch是文件的分支，默认是master

  完成上述配置后，在终端执行npm install hexo-deployer-git --save，这个操作主要是为了把我们写好的文章部署到github服务器上并可以被别人浏览。

4、发文章

  当然啦，我们新建博客的目的肯定是为了自己写文章，通过命令
  $ hexo new test_md
就可以新建文章，此时会在source/_posts目录下生成test_md.md文件，在test_md.md中输入内容后，保存一下。

  运行以下命令（以下我们称为三步走），访问localhost:4000就可以看到效果啦。

$ hexo clean
$ hexo g
$ hexo s

  其中hexo clean是为了清除缓存，和已经生成的静态文件(publish文件夹)；hexo g是命令hexo generate的简写，生成静态文件；hexo s是命令hexo server的简写。默认情况下，访问网址为：http://localhost:4000/

  在本地看到效果后，可以通过命令$ hexo d(即hexo deploy)将网站进行部署。

  完成以上步骤之后，我们访问链接https://summerrouxin.github.io/就可以看到博客啦~~~手机也可以查看哦

5、个性化定制

  完成以上步骤，其实我们的基础功能已经完成啦，可是为了博客能更好看一些我还想做一些个性化的定制，首先肯定是想换下主题

5.1 更换主题

  默认的主题实在有些不能忍啊啊，所以在博客跑起来之后我第一件事就是去更换主题，关于主题网上有很多介绍，有一些来自于 hexo官方的主题 ，也有一些是自己开发的，这边我们为了能够快速搞定，就在官方主题上进行选择

  首先我们在官网上找到自己喜欢的主题，可是我不得不吐槽一下，官方的主题真的有些太man了，我们这些女码农真的很难找到自己喜欢的主题。。。我把列表来回看了三遍，勉强选择了Anodyne，所以下面我们都以Anodyne为例。把主题的地址克隆到博客目录的themes下，执行
$ git clone https://github.com/klugjo/hexo-theme-anodyne
然后我们还是要到配置文件_config.yml中，修改theme字段，如下图所示

图主题

  接着执行三步走的代码，就可以在本地看到更换主题的效果。

5.2 修改导航栏

  修改导航栏，这次我们要修改的仍然是配置文件_config.yml，不过不是之前修改的全局的配置文件，而是主题下的配置文件themes/anodyne/_config.yml，在主题中找到menu字段，因为这边我们主要有两个页面，一个是首页还有是一个是归档页面，About和Contact没有对应页面，所以将About和Contact的路由都改为了首页，即/。如下图所示：

图导航栏

5.3 设置标签与分类

给文章贴标签
  首先需要确认全局的配置文件_config.yml中有tag_dir: tags，确认过之后就可以新建tags页面啦。命令为：
$ hexo new page tags

  此时会在全局的source文件下新建文件夹tags文件夹，修改tags/index.md文件

title: tags
date: 2018-05-23 19:52:31
type: "tags"

  全局设置好标签之后就可以给文章贴标签了，在文章的.md文件中添加：

tags:
      - tag1
      - tag2

添加过之后，头部如下：

title: test_md
date: 2018-05-23 20:10:12
tags: tag1

设置文章分类
  给文章设置分类与上面介绍的设置标签类似，也需要首先确认一下全局的配置文件_config.yml中有category_dir: categories，接着新建categories文件
$ hexo new page categories
此时会在全局的source文件下新建文件夹categories文件夹，修改categories/index.md文件

title: 文章分类
date: 2018-05-23 20:19:38
type: "categories"

设置好全局的分类之后，就可以设置文章的分类了，在文章的.md文件中添加：

categories:
      - category1
      - category2

添加过之后，头部如下：

title: test_md
date: 2018-05-23 20:10:12
categories: cate1

5.4 设置代码高亮、行号

代码高亮
  完成了基本中能之后，可以正式开始写博客了，可是在写的过程中又发现了新问题：博客内的代码没有高亮。为了解决这个问题，在网上查了一些资料，hexo默认已经实现了代码高亮，但是它存在一些局限性，某些情况下无法高亮，而且界面也比较丑，所以最后还是选择了 highlight.js 这个库。这个库的使用也很简单，具体步骤如下：

  1. 我们上面介绍了hexo自带高亮，所以需要先关闭自带高亮，在全局配置文件_config.yml中将highlight的enable字段设置为false。
  2. 接着要引入highlight.js的css和js，具体的引入位置在主题模版中的<head></head>之间，我使用的Anodyne风格写在了主题的layout文件夹中的layout.ejs文件内，具体代码如下：
    <link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/9.2.0/styles/github.min.css">
<script src="//cdn.bootcss.com/highlight.js/9.2.0/highlight.min.js"></script>
    在highlight.js官方文档可以看到，它有很多代码风格，我们可以根据自己的喜好来选择，因为平时经常看github的代码，所以我这边选择的是github风格。
  3. 最后，还要对highlight进行初始化，位置在</body>之前的<script></script>中引入，代码如下：
    hljs.initHighlightingOnLoad();

  上述步骤的具体代码截图如下图所示：

图hightlight

添加代码行号
  处理完代码高亮之后，很自然的想让插入的代码带有行号，所以我们接下来就介绍一下怎样添加代码行号。这边我们使用库 highlightjs-line-numbers.js ，具体步骤如下：

  1. 首先是引入库，这里有两种方式：
    第一种是，执行命令 $ npm install highlightjs-line-numbers.js
    第二种是，通过script的方式引入，<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.3.0/highlightjs-line-numbers.min.js"></script>。
    其实比较规范的操作应该是通过npm install的方式来引入，这样作者有更新，我们可以拉到最新代码，但是这里我为了跟highlight保持一致，使用了第二种方式。
  2. 在highlight之后对行号插件进行初始化，代码为：
    hljs.initLineNumbersOnLoad();

  上述步骤以及highlight的具体代码截图如下图所示：

图hightlight

如果行号的样式我们不喜欢，可以通过更改CSS的方式来改变，这边仍然以Anodyne风格为例，我在anodyne/source/css/partial/_highlight文件中加入了如下代码：

td.hljs-ln-numbers
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  text-align: center
  color: #ccc
  border-right: 1px solid #CCC
  vertical-align: top
  padding-right: 5px
  width: 20px
td.hljs-ln-code
  padding-left: 10px
.content table tr:not(:last-child) td
  border-bottom: 0px solid #eee

  注意这边要是styl的格式来编写代码，可是.styl貌似不支持高亮，好尴尬啊，这个有待进一步学习。
  另外，还有一个小功能，就是如何将文字缩进，这边我常用的方法就是输入两个 &emsp; 或者 &ensp; 。
  以上，就是我们创建博客的一些基本功能的介绍，接下来我还会在博客中加入用户量统计、评论框、插入表情等功能，敬请期待。