Hexo简明教程

tutorials

在这里，我将介绍如何使用Hexo在Github上搭建博客，也就是我们现在看到的博客。

搭建环境

这里，主要介绍如何在windows系统上操作。但其实无论windows或是mac，其原理都是一样的

前期准备

安装Node.JS, Github

Hexo安装与配置

安装Hexo

首先，我们要安装Hexo。双击Git Shell,输入如下npm指令

1
2
$ npm install hexo-cli -g
$ npm install hexo --save

初始化Hexo

安装完成后，找到一个目录用于存放博客，本文以E:\kuaipan\Github\Hexo为例。执行如下指令：

1
2
$ hexo init
$ npm install

安装常用插件

安装必要的插件可以简化今后博客的部署与生成。同样在E:\kuaipan\Github\Hexo目录下，执行如下指令：

1
2
3
4
5
6
7
8
9
10
11
12
13
$ npm install hexo-generator-index --save
$ npm install hexo-generator-archive --save
$ npm install hexo-generator-category --save
$ npm install hexo-generator-tag --save
$ npm install hexo-server --save
$ npm install hexo-deployer-git --save
$ npm install hexo-deployer-heroku --save
$ npm install hexo-deployer-rsync --save
$ npm install hexo-deployer-openshift --save
$ npm install hexo-renderer-marked@0.2 --save
$ npm install hexo-renderer-stylus@0.2 --save
$ npm install hexo-generator-feed@1 --save
$ npm install hexo-generator-sitemap@1 --save

查看效果

执行如下指令后，可以访问localhost:4000查看博客效果。

1
2
$ hexo g
$ hexo s

注意： 在我的机器中执行hexo s无法访问博客。因此我执行的是hexo s -p 3333，将端口号改为3333。随后在localhost:3333看到了博客。

将Hexo部署到Github

注册并设置Github

  1. 访问Github,注册一个用户。
  2. 点击New repository,设置Repository name为name.github.io，因为我的用户名为jackqdyulei，所以我的Repository name为jackqdyulei.github.io
  3. 点击Create repository

修改Hexo配置文件

在E:\kuaipan\Github\Hexo下，打开_config.yml文件。在后面添加deploy指令，具体如下：

1
2
3
4
deploy:
  type: git
  repository: https://github.com/name/name.github.io.git
  branch: master

我的name为jackqdyulei,因此我的配置文件如下：

1
2
3
4
deploy:
  type: git
  repository: https://github.com/jackqdyulei/jackqdyulei.github.io.git
  branch: master

注意yml文件的格式，冒号后面一定要有一个空格！

正式部署

每次写完博客后，执行下面指令将博客部署到Github上，随后就可以访问http://name.github.io/看效果。

1
2
$ hexo g
$ hexo d

Hexo指令学习

想玩转Hexo指令，可以访问官方网站

很多博客的基础设置都可以在_config.yml中修改，具体字段含义官方网站有讲过。

Hexo进阶

更换主题

原版的Hexo主题有些粗糙，我们可以在这里寻找自己喜欢的主题。我选择的主题是这个

我是按照这个教程设置的主题。所有的主题存储在hexo/themes目录下

设置完毕后记得执行hexo g去生成最终效果。

设置多说评论

注册多说
将评论系统改为多说，方便网友评论。

  1. 在多说注册用户，并点击我要安装
  2. 在创建网址输入基本信息。
  3. 站点网址设为你的Github地址，例如http://jackqdyulei.github.io
  4. 记录下多说域名，后面会用到。

修改主题配置文件
进入到你所选主题的目录下，例如hexo/themes/yilia。打开_config.yml文件。

找到里面duoshuo的配置，修改如下：

1
2
duoshuo: 多说域名
duoshuo_shortname: 多说域名

这里的多说域名为注册时设置的名称，例如我之前设置的为jackqdyulei-github.duoshuo.com,那么在上面填入jackqdyulei-github

修改评论代码
修改themes\landscape\layout\_partial\article.ejs 模板
将

1
2
3
4
5
6
7
<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
  <div id="disqus_thread">
    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  </div>
</section>
<% } %>

改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% if (!index && post.comments && config.duoshuo_shortname){ %>
<section id="comments">
  <!-- 多说评论框 start -->
  <div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
  <!-- 多说评论框 end -->
  <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
  <script type="text/javascript">
  var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0] 
       || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
  <!-- 多说公共JS代码 end -->
</section>
<% } %>