基于Hexo搭建博客-CSDN博客

最近想搭建自己的博客，在网上查了攻略之后决定使用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对应，这边很容易出问题，所以一定要注意，如下图所示：

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 这个库。这个库的使用也很简单，具体步骤如下：

我们上面介绍了hexo自带高亮，所以需要先关闭自带高亮，在全局配置文件_config.yml中将highlight的enable字段设置为false。
接着要引入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();
复制代码

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

添加代码行号

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

首先是引入库，这里有两种方式：第一种是，执行命令 $ 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保持一致，使用了第二种方式。
在highlight之后对行号插件进行初始化，代码为：

hljs.initLineNumbersOnLoad();
复制代码

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

如果行号的样式我们不喜欢，可以通过更改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; 。

以上，就是我们创建博客的一些基本功能的介绍，接下来我还会在博客中加入用户量统计、评论框、插入表情等功能，敬请期待。