hexo安装教程

由于习惯了StackEdit的markdown，而Jekyll的markdown不知道为什么开了GFM却不是全部插件都能用的感觉，然后又考虑到Jekyll渲染很花时间。正好又看到了Hexo，于是就把github pages转Hexo了（说到底就是任性=。= 

安装Node.js

Node.js官网（https://nodejs.org/ ）下载安装即可。

安装Hexo

安装Node.js时自动添加了PATH，所以直接在命令行里运行以下命令即可：

$ npm install -g hexo
1

初始化Hexo

新建一个文件夹，进里面，执行命令：

$ hexo init
1

下载模块

执行如下命令，下载生成网站所需要的插件模块。

$ npm install
1

生成静态页面

执行如下命令，生成静态页面至./public/目录。

$ hexo generate
1

本地调试

执行如下命令，启动本地服务，进行博客预览调试。

$ hexo server
1

打开http://localhost:4000/ 即可看到网站效果。

生成文章

执行如下命令，生成文章。

$ hexo new [layout] "名称"
1

其中layout是可选参数，默认值为post。Hexo默认提供三种layout选择，具体可到./scaffolds/目录下查看文件，分别是draft、page与post。可以自定义其内容或者新建一种layout。

• 参数post的作用为新建一篇文章。指定名称的md文件存在于./source/_post/目录下，当我们使用命令hexo generate来生成静态页面的时候，该目录下的文章会生成到./public/文件夹里面，当我们更新数据到网站上时，该文章就会显示在网页上。

• 参数draft的作用为新建一篇文章草稿。指定名称的md文件存在于./source/_drafts/目录里面，当我们生成静态页面的时候，该目录下的文章不会生成到./public/文件夹里面，即不会同步到我们网站上。当你认为可以发布该文章的时候，应把该文章的md文件移到./source/_post/目录下。

• 参数page的作用为新建一个网站页面。该命令会在./source目录下新建一个指定名称的文件夹，该文件夹下有一个index.md文件。

编辑文章

生成文章后，打开相应的md文件，就可以开始编辑了。

• 文章开头格式如下：

title: 文章名称
date: YYYY-MM-DD HH:mm:ss #文章的时间，会自动生成
categories: #文章的分类，可以为空
tags: #文章的标签，多标签请用格式[tag1,tag2,tag3]，可以为空
description: #文章的描述，可以为空
---

......
1
2
3
4
5
6
7
8

需要注意的是，上面所有:后面必须要有一个空格，不然会报错的。

• 如果需要文章摘要功能，只需在正文中添加如下代码：

以上是摘要

以下是余下全文
1
2
3

以上的正文内容即是文章摘要，在网站首页显示。以下内容需要点击Read More链接打开全文才能显示。

部署到Github

1. 首先，需要配置./_config.yml文件：

   
   # Deployment
   
   
   ## Docs: http://hexo.io/docs/deployment.html
   
   deploy:
       type: git
       repository: git@github.com:username/username.github.io.git
       branch: master
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

   记得把其中的username替换成你Github的账号名。

2. 接着，执行如下指令，即可完成部署。

   $ hexo clean
   $ hexo generate
   $ hexo deploy
   1
   2
   3

   需要注意的是每一次部署都会覆盖掉之前在Github版本库中存放的文件，如果想提交一些额外的文件保存在仓库里，譬如说404页面，可以把它直接放在source目录下，那每一次生成页面时也会自动把你想要额外提交的文件生成到public目录下。

3. 如果出现如下问题：

   1. 问题1

      ERROR Deployer not found: git
      1

      不要紧张，原因是没有hexo-deployer-git这个插件模块，我们只需要输入如下命令：

      $ npm install hexo-deployer-git --save
      1

      稍等片刻，安装完重新执行上面第二步，如无意外，便能部署成功。

   2. 问题2

      Error: spawn git ENOENT
          at exports._errnoException (util.js:746:11)
          at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
          at child_process.js:1144:20
          at process._tickCallback (node.js:355:11)
      1
      2
      3
      4
      5

      添加环境变量C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\libexec\git-core

   3. 问题3

      fatal: Not a git repository (or any of the parent directories): .git
      1

      提示说没有.git目录，到./.deploy_git下运行：

      git init
      1

---

=========以下是DIY部分=========

安装主题

1. 切换到./themes/文件夹，然后把相关主题（如tranquilpeak1）clone下来，或复制到这里：

   $ cd themes
   $ git clone https://github.com/LouisBarranqueiro/tranquilpeak-hexo-theme.git
   $ rename tranquilpeak-hexo-theme tranquilpeak
   1
   2
   3

   • 注意这个主题要安装Hexo CLI 
     

     npm install hexo-cli -g
     1

2. 打开./_config.yml文件，修改主题为tranquilpeak

   
   # Extensions
   
   
   ## Plugins: http://hexo.io/plugins/
   
   
   ## Themes: http://hexo.io/themes/
   
   theme: tranquilpeak
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

打开RSS

1. 执行如下命令。

   $ hexo-generator-feed --save
   1

2. 在./_config.yml中添加:

   feed:
       type: atom
       path: atom.xml
       limit: 20
   1
   2
   3
   4

hexo-math插件

有个hexo-math插件2，说是支持MathJax，但不知道为什么我这里有问题。。

安装

$ npm install hexo-math --save
1

初始化

在blog文件夹中执行：

$ hexo math install
1

在_config.yml文件中添加：

plugins:
  - hexo-math
1
2

修改Markdown

不知道为什么我装了MathJax之后依然效果不出来，于是只能修改Markdown了。

该冲突主要是由于对 \ 和 _ 的转义造成的3。找到 marked 脚本文件, 通常在

hexo\node_modules\marked\lib\marked.js
1

先备份一下，然后修改第449行

escape: /^\\([\\`*{}\[\]()#+\-.!_>])/,
1

为

escape: /^\\([`*\[\]()#+\-.!_>])/,
1

第847行

return '<em>' + text + 'em>';
1

修改为：

return '_' + text + '_';
1

修改heading里#后的空格

由于个人习惯StackEdit在##后不用加空格，直接写标题，所以要把相关的js中的空格去掉。 
把.\node_modules\marked\lib\marked.js（注：要开启GFM）的 
第80行

heading: /^ *(#{1,6}) +([^\n]+?) *#* *(?:\n+|$)/
1

改为

heading: /^ *(#{1,6})+([^\n]+?) *#* *(?:\n+|$)/
1

增加footnotes

有不少人做了footnotes然后pull上去了，见4。

添加gotop

参考5

添加all-tags并修改排序方式、tag大小

把.\themes\tranquilpeak\layout\all-tags.ejs中的<% site.tags.sort('name')修改为<% site.tags.sort('-length')，即可按tag出现次数而不是字典序排序。

把.\themes\tranquilpeak\layout\all-tags.ejs中第一个section内容修改如下即可使tag根据出现次数有不同大小。

    <section>
        <% max = site.tags.first.length;
            min = max;
            site.tags.each(function(item) {
                max = Math.max(max, item.length)
                min = Math.min(min, item.length)
            });
            diff = max - min;
        site.tags.sort('-length').each(function(item) {
            temp = (item.length - min) * 36 / diff;
            base = parseInt(temp / 4);
            remain = temp % 4;
            if (remain == 0) {
                size = base + 9;
            }
            else if (remain == 1 || remain == 2) {
                size = base + 9.5;
            }
            else {
                size = base + 10;
            } %>
            <a class="tag tag--primary tag--small" href="<%= '#' + item.name + '-list' %>" data-tag="<%= item.name.replace('.','__').toLowerCase() %>" style="font-size: <%= size %>pt">
                <%= item.name %>
            </a>
        <% }); %>
    </section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

添加Swiftype站内搜索

在.\themes\tranquilpeak\_config.yml中添加swiftype_install_key即可。

参考

http://eleveneat.com/2015/04/24/Hexo-a-blog/

---

1. https://github.com/LouisBarranqueiro/tranquilpeak-hexo-theme ↩
2. http://catx.me/2014/03/09/hexo-mathjax-plugin/ ↩
3. http://lukang.me/2014/mathjax-for-hexo.html ↩
4. https://github.com/chjj/marked/pull/431 ↩
5. http://lukang.me/2015/hexo-gotop.html ↩