1. 安装Node.js
  2. 安装Hexo
  3. 初始化Hexo
  4. 下载模块
  5. 生成静态页面
  6. 本地调试
  7. 生成文章
  8. 编辑文章
  9. 部署到Github
  10. 安装主题
  11. 打开RSS
  12. hexo-math插件
    1. 安装
    2. 初始化
  13. 修改Markdown
    1. 修改heading里# 后的空格
    2. 增加footnotes
  14. 添加gotop
  15. 添加all-tags并修改排序方式、tag大小
  16. 添加Swiftype站内搜索
  17. 参考

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

安装Node.js

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

安装Hexo

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

1
$ npm install -g hexo

初始化Hexo

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

1
$ hexo init

下载模块

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

1
$ npm install

生成静态页面

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

1
$ hexo generate

本地调试

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

1
$ hexo server

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

生成文章

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

1
$ hexo new [layout] "名称"

其中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文件，就可以开始编辑了。

  • 文章开头格式如下：

    1
    2
    3
    4
    5
    6
    7
    8
    title: 文章名称
    date: YYYY-MM-DD HH:mm:ss # 文章的时间，会自动生成
    categories: # 文章的分类，可以为空
    tags: # 文章的标签，多标签请用格式[tag1,tag2,tag3]，可以为空
    description: # 文章的描述，可以为空
    ---
    <!--这里开始使用markdown格式输入你的正文。-->
    ......

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

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

    1
    2
    3
    以上是摘要
    <!--more-->
    以下是余下全文

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

部署到Github

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

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

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

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

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

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

  3. 如果出现如下问题：

    1. 出现以下信息

      1
      ERROR Deployer not found: git

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

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

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

    2. 出现以下信息

      1
      2
      3
      4
      5
      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)

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

    3. 出现以下信息

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

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

      1
      git init

    4. 出现以下信息

      1
      warning: LF will be replaced by CRLF

      LF被CRLF代替，可以关掉这个提醒。

      1
      git config --global core.autocrlf false

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

安装主题

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

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

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

    1
    npm install hexo-cli -g

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

    1
    2
    3
    4
    #  Extensions
    ##  Plugins: http://hexo.io/plugins/
    ##  Themes: http://hexo.io/themes/
    theme: tranquilpeak

打开RSS

  1. 执行如下命令。

    1
    $ npm install hexo-generator-feed --save

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

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

hexo-math插件

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

安装

1
$ npm install hexo-math --save

初始化

在blog文件夹中执行：

1
$ hexo math install

在_config.yml文件中添加：

1
2
plugins:
  - hexo-math

修改Markdown

装了MathJax之后依然效果不出来，该冲突主要是由于对  和 _ 的转义造成的3。有以下两种方法解决，但方法2会出现有时星号解析成下划线（因为本来星号解析成斜体，而斜体替换成下划线）。

  1. 使用Pandoc。

    先到官网下载并安装Pandoc，然后卸载原来的hexo-renderer-marked，安装hexo-renderer-pandoc。

    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-pandoc --save

    如果要加入各种extension，则修改node_modules\hexo-renderer-pandoc\index.js中var args =部分，如

    1
    var args = [ '-f', 'markdown+autolink_bare_uris+shortcut_reference_links+hard_line_breaks', '-t', 'html', math, '--smart']

  2. 修改Markdown。

    找到 marked 脚本文件, 通常在

    1
    node_modules\marked\lib\marked.js

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

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

    为

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

    第847行

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

    修改为：

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

修改heading里# 后的空格

如果习惯StackEdit在##后不用加空格，直接写标题，所以要把相关的js中的空格去掉。

把.\node_modules\marked\lib\marked.js（注：要开启GFM）的

第80行

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

改为

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

增加footnotes

有不少人做了footnotes然后pull上去了，如

pull request 351: https://github.com/chjj/marked/pull/351

pull request 431：https://github.com/chjj/marked/pull/431

也有两个branch：

https://github.com/chjj/marked/tree/footnotes

https://github.com/chjj/marked/tree/feature-footnotes

使用方法：

如果对marked.js没改动的话，可以直接使用footnotes分支的marked.js，下载 https://raw.githubusercontent.com/chjj/marked/footnotes/lib/marked.js ，然后替换./node_modules/marked/lib/marked.js即可。

（也可以下载相应的patch文件：https://patch-diff.githubusercontent.com/raw/chjj/marked/pull/351.patch ，并将其应用到./lib/marked.js，只是patch不一定能apply：

1
git apply 351.patch

（还可以手动把commit修改的相关代码加进marked.js中：按照 https://github.com/chjj/marked/commit/abe526268ca5445c91234ea5b3b81b3627ed56e7 上把绿色部分的新增代码添加到./lib/marked.js相应位置中。）

这里提供我自己用的marked.js：https://gist.github.com/lijiancheng0614/9d3b429ee1f3b6d21fd4cdaead842aa4

添加gotop

参考 http://lukang.me/2015/hexo-gotop.html

  1. 首先确保您的主题开启了jQuery，然后把下面的代码加入到你的主题的js文件里。（如themes/tranquilpeak/layout/_partial/script.ejs）

    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
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    <script>
    var bigfa_scroll = {
        drawCircle: function(id, percentage, color) {
            var width = jQuery(id).width();
            var height = jQuery(id).height();
            var radius = parseInt(width / 2.20);
            var position = width;
            var positionBy2 = position / 2;
            var bg = jQuery(id)[0];
            id = id.split("# ");
            var ctx = bg.getContext("2d");
            var imd = null;
            var circ = Math.PI * 2;
            var quart = Math.PI / 2;
            ctx.clearRect(0, 0, width, height);
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineCap = "square";
            ctx.closePath();
            ctx.fill();
            ctx.lineWidth = 3;
            imd = ctx.getImageData(0, 0, position, position);
            var draw = function(current, ctxPass) {
                ctxPass.putImageData(imd, 0, 0);
                ctxPass.beginPath();
                ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
                ctxPass.stroke();
            }
            draw(percentage / 100, ctx);
        },
        backToTop: function($this) {
            $this.click(function() {
                jQuery("body,html").animate({
                    scrollTop: 0
                },
                800);
                return false;
            });
        },
        scrollHook: function($this, color) {
            color = color ? color: "# 000000";
            $this.scroll(function() {
                var docHeight = (jQuery(document).height() - jQuery(window).height()),
                $windowObj = $this,
                $per = jQuery(".per"),
                percentage = 0;
                defaultScroll = $windowObj.scrollTop();
                percentage = parseInt((defaultScroll / docHeight) * 100);
                var backToTop = jQuery("# backtoTop");
                if (backToTop.length > 0) {
                    if ($windowObj.scrollTop() > 200) {
                        backToTop.addClass("button--show");
                    } else {
                        backToTop.removeClass("button--show");
                    }
                    $per.attr("data-percent", percentage);
                    bigfa_scroll.drawCircle("# backtoTopCanvas", percentage, color);
                }
            });
        }
    }
    jQuery(document).ready(function() {
        jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>');
        var T = bigfa_scroll;
        T.backToTop(jQuery("# backtoTop"));
        T.scrollHook(jQuery(window), "# 99ccff");
    });
    </script>

  2. 在themes/tranquilpeak/layout/_partial/head.ejs中加入以下代码：

    1
    2
    3
    4
    5
    6
    7
    <style id='inline-css' type='text/css'>
    # backtoTop{background-color:# eee;border-radius:100%;bottom:10%;height:48px;position:fixed;right:-100px;width:48px;transition:0.5s;-webkit-transition:0.5s}
    # backtoTop.button--show{right:10px}
    .per{font-size:16px;height:48px;line-height:48px;position:absolute;text-align:center;top:0;width:48px;color:# 555;cursor:pointer}
    .per:before{content:attr(data-percent)}
    .per:hover:before{content:"↑";font-size:20px}
    </style>

添加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根据出现次数有不同大小。

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
<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>

添加Swiftype站内搜索

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

参考

  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↩︎