2.2.1 软件安装

1. 安装Git：安装过程一路默认即可，安装好后，单击右键就会多出两个Git的按钮；
2. 安装Node.js：可以一路默认，需要的话也可以更改一下安装的路径；

3. 安装 Hexo：中文文档、英文文档；Hexo 的安装需要借助 Node.js 的npm命令，可以理解为 Hexo 是 Node.js 的模块。操作的方式是在任意的位置单击鼠标右键，选择Git bash命令，在里面输入：

   npm install -g hexo-cli

卸载的话，将上面命令中的install替换成uninstall即可执行卸载。

2.2.2 博客平台搭建

1. 创建 Hexo 文件夹

Hexo文件夹就是博客的文件夹，用于存放全部相关文件（但只有静态生成的文件必需上传到远程 Repository）。

• 第一步先在某个盘符下新建一个文件夹，重命名（英文字母），假设是在D盘下建立了一个名叫Hexo的文件夹，那么路径就是D:\hexo （后续的操作大多在这个文件夹里进行）；
• 第二步进入Hexo文件夹单击右键，依旧选择Git bash这一命令，输入以下命令，博客所需要的文件都已经自动建立好了，这比jekyll操作简单多了：

hexo init

2. 安装依赖包

npm install

为保证下一环节远程部署成功，还需要执行如下命令：

npm install hexo-deployer-git --save

3. 预览本地博客

一系列的安装命令之后，本地博客就算搭建好了，输入如下的命令，然后在浏览器地址栏中输入http://localhost:4000或者http://127.0.0.1:4000就可以查看本地博客。

hexo g
hexo s

上面的命令中，hexo g用于生成静态文件，hexo s用于创建 Web 服务器，这两条命令可以合并写为一条：

hexo s -g

2.4.1 修改配置文件

1. 修改Site段相关内容，包括title, author, language等，其中language取值为zh-Hans；
2. 参考 2.3 修改theme取值为NexT；
3. 修改deploy段内容为：

deploy:
  type: git
  repository: https://github.com/peng-howard/lives.git
  branch: master

其中 repository 为lives，本人的主页面https://peng-howard.github.io/是用 Jekyll 生成的（直接在 GitHub 上修改index.html似乎不起作用），因此这里将lives相关内容作为主页面的一个分页面站点存在。如果是部署到 GitHub Pages 的主页面，则使用如下命令：

  repository: https://github.com/peng-howard/peng-howard.github.com.git

4. 设定本人的社交信息及友情链接等：

social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name

social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocialItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  Twitter: twitter
  Weibo: weibo
  微博: weibo

# 友情链接
# Blog rolls
links_title: 友情链接
#links_layout: block
#links_layout: inline
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/

5. 设定每页文章显示篇数

第一步：安装相关插件（不必安装：在安装完相关依赖包以后不再安装也是正常的，已经验证）

npm install --save hexo-generator-index
npm install --save hexo-generator-archive
npm install --save hexo-generator-tag

第二步：安装完插件后，在站点配置文件中，添加如下内容

# index 为首页的每页数量
# archive 是存档页每页数量
# tag 不知道在哪里起作用

index_generator:
  per_page: 10
archive_generator:
  per_page: 50
  yearly: true
  monthly: true
tag_generator:
  per_page: 15

# 下面的 Pagination 是分类中，每个分类的目录页面中单页的文章数量
# Pagination
## Set per_page to 0 to disable pagination
per_page: 50
pagination_dir: page

index, archive及tag开头分表代表主页，归档页面和标签页面。其中per_page字段是希望设定的显示篇数。

6. 修改new_post_name取值为:year-:month-:day-:title.md # File name of new posts，这样生成的文件名称不包含年月日部分。

2.4.2 添加一级页面

1. 生成 RSS 文件atom.xml，首先执行如下命令安装插件：

npm install hexo-generator-feed --save

然后在主配置文件中添加如下内容：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

2. 添加标签（tags）页面，首先执行如下命令：

$ cd your-hexo-site
$ hexo new page tags

注意：(1) 其中第一条命令可以不执行，改为先进入 blog 文件所在文件夹，再右键调出Git命令行，然后直接执行第二条命令；(2) hexo new page是建立一个新的文件夹，并在其中加入一个index.md文件，相当于新建一个分站点，而hexo new "..."是建立一篇新的文章。

生成相关文件后，到source/tags目录下修改index.md文件为如下内容：

---
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

3. 添加分类页面：

$ hexo new page categories

然后修改相关文件为如下内容：

---
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---

2.4.3 重要功能插件

1. 站内搜索

在主目录中执行如下命令：

$ npm install hexo-generator-searchdb --save

在主配置文件中添加如下内容：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在主题配置文件修改如下内容：

local_search:
  enable: true

在实际使用中，站内搜索要输入两个以上的字才会有搜索结果，并且可能会搜索不到内容。

2. 为各级标题添加编号

根据http://www.tuicool.com/articles/7BnIVnI，Hexo 的 NexT 主题在右侧的导航栏中可以自动给各级标题添加编号，这利用了 Hexo 3 的一个最新功能，但是正文中却无法使用，因此这里用命令

cnpm install hexo-heading-index --save

安装hexo-heading-index命令，之后在主站点的_config.yml中添加如下内容：

heading_index:
  enable: true
  index_styles: "{1} {1} {1} {1} {1} {1}"
  connector: "."
  global_prefix: ""
  global_suffix: " "

之后设定 NexT 主题配置文件_config.yml中的

toc:
  enable: true

  # Automatically add list number to toc.
  number: false

number取值为false，这样在启动正文各级标题编号的同时，关闭右侧导航栏中的重复编号。

需要注意的是，Hexo 的正文标题虽然用了h1标记，但来自于头文件中的title项。

正文中建议仍然以#开始第一级标题，否则标题的编号可能会出现意想不到的错误，比如{1}对应的一级标题实际上会是0，如果改成{0}，又会在一级编号前出现一个-。

另外这个包的index_styles中，一级的编号设定是必需的，其它级是可选的，希望将来一级可以选择为空。

3. hexo-renderer-pandoc的 Markdown 渲染

Hexo 首先用配置文件config.yml和安装的 Markdown 渲染插件对应的 Markdown 解释器对.md文件进行处理，之后 Mathjax 或者其它在线 LaTeX 解释器再根据 Markdown 生成的结果解释其中的公式内容。考虑到 Hexo 自带的hexo-renderer-marked，基于该插件的 LaTeX 修正版hexo-renderer-kramed功能较弱，另一个解释器hexo-renderer-marked-it虽然功能很强，但是和 LaTeX 的兼容不太好，在参考http://shomy.top/2016/10/22/hexo-markdown-mathjax/之后，最终决定使用hexo-renderer-pandoc作为.md文件的解释器。

• 到 Pandoc 官方站点 下载并安装 Pandoc⁴；
• 卸载默认的 Markdown 解释器并安装hexo-renderer-pandoc：

cnpm uninstall hexo-renderer-marked --save
cnpm install hexo-renderer-pandoc --save

• 根据https://github.com/wzpan/hexo-renderer-pandoc的提示，在站点的配置文件中，将 Markdown 部分的内容替换为hexo-renderer-pandoc的默认配置：

pandoc:
  filters:
  extra:
  meta:
  mathEngine:

• 考虑到没有空格的多行在一起组成一个段落时，CJK 类文本处理与英文不一样（后者之间将换行转换成一个空格），需要开启 Pandoc 的east_asian_line_breaks扩展，具体方法是修改hexo-renderer-pandoc的index.js，将其中的

var args = [ '-f', 'markdown', '-t', 'html', math, '--smart']

替换成⁵

var args = [ '-f', 'markdown+east_asian_line_breaks', '-t', 'html', math, '--smart']

最后，重新启动 Git 命令行，再重新启动 Hexo 服务就可以正常工作。

4. Markdown 编译器的设定（不再使用）

本部分除fix-cjk外，marked 配置部分不再使用，改用 markdown-it 进行解释，详细参考下面第 5 点。最新进展：markdown-it 与 Mathjax 的兼容性也不太好，改为使用 pandoc 进行 md 的解释，并且 pandoc 中提供了 cjk space 问题的修正，因此 fix-cjk 也不再使用，具体配置见上面第 3 点。

问题⁶：下面的设置保证 Markdown 中连着的两行不会被解释成为<br/>，但是换行变成了空格？（来自https://wwssllabcd.github.io/blog/2014/12/22/how-to-install-hexo/）

由於新版的Hexo使用hexo-renderer-marked來控制Markdown，而所以还要再调整一下，在站点配置文件中，添加如下内容：

# fix_cjk_spacing: false  # false 时停用 cjk 换行 - 空格 修正
# https://github.com/hexojs/hexo-renderer-marked
# breaks 遇到 CJK 字符时，会将换行符转成一个空格
# https://github.com/lotabout/hexo-filter-fix-cjk-spacing/issues/1
#          提供的方案可以部分修正这个问题，但要更新 npm 包到最新
marked:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: false
  smartLists: true
  smartypants: false
  modifyAnchors: ''
  autolink: false

确保其中breaks是为false，此时fix_cjk_spacing才会处于工作状态；另外还可以设定fix_cjk_spacing: false以禁用这一修正功能（特别是纯英文的 blog）。

但需要注意的是，fix_cjk_spacing可能会出现如下的错误：

$ npm install hexo-filter-fix-cjk-spacing --save
hexo-site@0.0.0 D:\GitHub\stylus
-- hexo-filter-fix-cjk-spacing@0.0.3

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

根据 https://github.com/npm/npm/issues/14042 提供的信息，对npm降级或者将npm升级到最新版本可以解决这个问题，这里选择升级npm。由于国内升级npm可能无法成功，因此根据https://npm.taobao.org/的说明，安装命令cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

之后用淘宝的镜像更新npm（当然，还可以更新cnpm本身，这个命令与npm实质上是相同的，只是镜像在淘宝）：

cnpm install -g npm

安装fix_cjk_spacing也可以：

cnpm install hexo-filter-fix-cjk-spacing --save

之后运行hexo相关命令就不会再出错。

5. Markdonw-it、脚注、表情设置（不再使用）

Hexo 的文章内容默认是不支持 emoji 表情的，作为一个有逼格的码农，怎么少得了丰富的表情语言，下面的内容介绍怎么支持 emoji。

Hexo 默认的 markdown 编译插件是hexo-renderer-marked，看了一下相关文档，好像没办法支持 emoji，还好在 Hexo 的plugins页，我们找到了另外一个 markdown 插件hexo-renderer-markdown-it，而且号称速度比默认的还要快，最主要的是，在markdown-it的文档里面，我们发现它可以通过 plugins 的方式支持emoji。

下面我们就来替换 markdown 插件，首先进入博客的主目录（stylus）

cnpm un hexo-renderer-marked --save
cnpm i hexo-renderer-markdown-it --save

不过此时的 hexo-renderer-markdown-it 还是用不了 emoji 的，我们需要加上 emoji 的 plugin

$ cd node_modules/hexo-renderer-markdown-it/
$ cnpm install markdown-it-emoji --save

然后编辑 Hexo 的配置文件_config.yml

# fix_cjk_spacing: false  # false 时停用 cjk 换行 - 空格 修正
# https://github.com/hexojs/hexo-renderer-marked
# breaks 遇到 CJK 字符时，会将换行符转成一个空格
# https://github.com/lotabout/hexo-filter-fix-cjk-spacing/issues/1 提供的方案可以修正这个问题，但要更新 npm 到最新
# MD-it 对 html 中的内容不起作用，但是 cjk-fix 会起作用
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: false
    linkify: true
    typographer: false
    quotes: '“”‘’'
  plugins:
    - markdown-it-footnote
    - markdown-it-sup
    - markdown-it-sub
    - markdown-it-abbr
    - markdown-it-emoji
  anchors:
    level: 1
    collisionSuffix: 'v'
    permalink: false
    permalinkClass: header-anchor
    permalinkSymbol: ¶

• 与 Hexo 默认的 Markdown 引擎相比，这个引擎要严格一些：默认的引擎可以解释 html 中的 md 部分，但这个引擎在遇到 html 中的 md 时，会跳过去。
• 注意上面的xhtmlOut用于确保Markdown转换结果符合xhtml的规范；typographer为true用于确保”“以及’‘会自动被纠正为“”和‘’。
• MD-it 对 html 中的内容不起作用，但是 cjk-fix 会起作用，为了使用<pre class="center">及<pre class="white">，在lives中禁用了fix_cjk功能。
• 关键就是在 plugins 里加上- markdown-it-emoji，其他的配置说明可以参见wiki。
• 重启Hexo服务，即可生效，这里输入:smile: :smirk: :relieved:就可以显示表情符号，当然直接输入表情也是可以的，具体参考https://github.com/markdown-it/markdown-it-emoji。
• 表情的安装参考上面的命令，而脚注确定不需要再安装任何包，下面是脚注的例子：

Here is a footnote reference,[^1] and another.[^longnote]
 
[^1]: Here is the footnote.
 
[^longnote]: Here's one with multiple blocks.
 
    Subsequent paragraphs are indented to show that they
belong to the previous footnote.

这个例子中，“Subsequent…”也是脚注的一部分，因此脚注的结束符号将在“footnote.”之后。

下面是一个 inline 的例子：

Here is an inline note.^[Inlines notes are easier to write, since
you don't have to pick an identifier and move down to type the
note.]

2.6.1 模板调整记录

1. 修改theme/next/source/css/_variables/custom.styl文件，添加如下内容：

// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 960px

实际上本人在theme/next/surce/css中增加了一个haopeng.styl，并将其import到main.styl，用于添加自定义的具体样式内容，工作原理与custom.styl文件非常接近。

2. 在next/source/css/_variables/base.styl中，将$head-bg设定为transparent。

3. 修改了页脚模板文件中的文字内容（\themes\next\layout\_partials\footer.swig）；

4. themes\next\languages中有对应的语言，注意关键词的名称是英文，可以在语言文件中修改或添加关键字，在主题配置文件中修改关键字对应的图标，http://fontawesome.io/icons/列出了全部可用的图标，考虑到最近一次修改的模板中不再使用图标，这一条的作用就暂时不再重要。

5. 修改next/layout/_macro/post-collapse.swig 27 行的 date 的格式，添加年份，这样分类和归档页的标题中就包含年份，同时调整分类和标题页中的 css 的缩进。

6. 在next/layout/_macro/post.swig中，将post-footer中的tag处的#改成图标效果：

<i class="fa fa-fw fa-tag"></i>

2.6.2 自定义样式文件调整记录

其它要修改的内容都在haopeng.styl中，需要注意的是：(1) 一些CSS属性可能无法被覆盖，此时在指令后面加!important强制覆盖；(2) 一部分下划线是通过background-color实现的，另一些是通过border-bottom实现的，因此需要根据实际情况做修改；(3) 主页与正文中的文章标题样式名称不相同，要分别修改；(4) 文章标题的文字大小只能通过!important修改；(5) 存档目录页中的文章标题与时间在水平方向没对齐，这与修改了文章标题的文字大小有关，很难调整，最后是通过调整如下内容才做到的：

/* 存档页中文章标题与时间对齐 */
.post-title-link span {
    display: block;
}

2. 分类页中文章数量用了浮动体样式；

3. 将背景图片放置到themes/next/source/images中，然后在自定义文件中加入如下内容：

body { background: url(/images/bg.png) repeat; }

4. 博客的页脚使用了 Galdeano 字体，原始的方法是通过 NexT 主题配置文件_config.yaml下的 global 字段修改字体，这种方法会在线调用 Google 的远程字体。但这种方法有两个问题，一是放两种字体需要通过语法实现：family: font1|font2，这种语法对应到fonts.googleapis.com的查询字符串时，通过|指定两种字体（如果字体名称有空格，用+），但这种做法会导致正文、标题加载时将这两个字体组成的名称当成一个字体名称，这不是我们正常情形需要的，如果我们只指定一种字体，我们也可能不希望 NexT 自动把相关字体做全局修改。第二个问题是这样需要在线加载字体，即使通过<fonts.useso.com>加载可以提高速度，也未必是我们想要的做法，谁知道将来 360 会不会停止这一服务。

这里推荐的做法是生成本地字体并加载：

• 从https://gist.github.com/dotJoel/7326331找到Galdeano字体 ttf 文件的下载地址并下载该文件；
• 到https://www.fontsquirrel.com/tools/webfont-generator，上传下载的字体并生成不同浏览器需要的字体文件；
• 将字体文件放到themes\next\source\lib\font-Galdeano之中，由于这里将lives。当成站点下的子目录，因此这些文件实际上是放在\lives\themes\next\source\lib\font-Galdeano里面（根据实际情况自己放置）。

需要说明的是，上面的 css 内容没有选择用https://segmentfault.com/q/1010000005679305中介绍的用https://fonts.googleapis.com/css?family=Galdeano里面的内容，这种方法只包含了woff2文件，IE 下无法看到字体效果。而是主要选择用http://smartgrid.ac.cn/63.html提供的方法，根据下面的代码结合https://www.fontsquirrel.com/tools/webfont-generator中提供的 css 文件：

@font-face {
font-family:'Tangerine-b';
    src: url('./font/Tangerine_Bold.eot');
    src: url('./font/Tangerine_Bold.eot?#iefix') format('embedded-opentype'),
         url('./font/Tangerine_Bold.woff') format('woff'),
         url('./font/Tangerine_Bold.ttf') format('truetype'),
         url('./font/Tangerine_Bold.svg#tangerinebold') format('svg');
}

修改后，在haopeng.styl中添加如下代码：

/* latin */
@font-face {
  font-family: 'Galdeano';
  font-style: normal;
  font-weight: 400;
  src: url('/lives/lib/font-Galdeano/galdeano-webfont.woff2') format('woff2'),
       url('/lives/lib/font-Galdeano/galdeano-webfont.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

原因是生成的文件中没有eot, svg类文件。

5. 在线的思源宋体加载

在 2017.5 时，参考谢益辉的博客，将博客的主字体换成思源宋体，这个过程除了在haopeng.styl中添加样式的支持外，还需要：

• 在next/layout/_partials/head.swig添加从谢站点上下载的load-typekit.js文件，

<script async src="/stylus/js/load-typekit.js"></script>

说明：不使用注册 Adobe 的 Typekit 服务时提供的代码的原因是上面的脚本不仅能够实时加载思源宋体，还可以在加载之前先判断客户端是否已经安装思源宋体。Adobe 使用的 ID 需要在 VPN 下到 Adobe Typekit 注册，邮箱是haopeng.yn@gmail.com|1A，用 Chrome 提供的翻墙功能注册后无法得到字体服务。

• 将load-typekit.js复制到合适的位置，将其中的kitid改成这里的oqz0fck，这个来自注册时候提供的信息。

6. Pandoc 生成的脚注编号中，sup在a之中，虽然修改a的display为inline-flex或inine-grid可以移动a的下划线，但会导致hover背景颜色失效，因此暂时不修改编号的链接效果，这与谢益辉的博客中sup和a的顺序刚好相反。（https://github.com/jgm/pandoc/issues/2583）

7. 其它 CSS 内容的修改非常多，所以这里不再一一解释。