Use hexo

发表于   |  

使用Hexo

用了一段时间的wp，租的虚拟主机，感觉不是特别舒服，后来不知道怎么数据库就损坏了，遂放弃。想用 Github Pages 记点笔记，整合个博客，用了jekyll 本地配置了一次，第二天 jekyll 本地的配置各种 error，不知所措。最后发现了 Hexo，于是尝试了下，不是特别顺利，错误不断，但是相对建议易用，后面简单记录一下过程。
后续增添一些 Hexo 的配置和使用技巧。

本地配置

平台：linux (openSUSE)

安装git，添加默认username,email(略)

安装Node.js

推荐从官网下载，或者(国内)使用下面方法

1
2
3
4
5
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
(OR $ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh)
$ nvm install 0.10
($ nvm alias default v0.10.32)
$ (sudo) npm install -g hexo

初始化

1
2
3
4
5
$ (sudo) npm install -g hexo
$ hexo init <fold>          // 创建<fold>文件夹,如blog
$ cd <fold>
$ npm install               // 在相应目录下安装依赖包
$ hexo server

部署在 Github 上

在 Github 中新建一个 repository，名称为名字为 username.github.io

1
2
3
4
5
6
7
_congif.yml     // 修改此文件，添加以下内容
deploy:
	type: github
  	repo: git@github.com:username/username.github.io.git
  	(branch: master)

$ hexo d -g     // 生成静态页面并上传到 github

hexo命令

1
2
3
4
hexo n <article> == hexo new <article>    (新建文章)
hexo g == hexo generate                   (生成)
hexo s == hexo server                     (开启本地服务器)
hexo d == hexo deploy                     (部署到远程)

(更多内容及细节可以参考了官方文档 , 和这篇博客 )

使用记录

目录结构

1
2
3
4
5
6
7
8
9
10
blog: 目录名
    scaffolds: 工具模板
    scripts: js文件，扩展功能
    source: 存放博文内容(*.md)
        source/_post： 文件箱
        source/_draft: 草稿箱
    themes: 存放博客主题的目录
        themes/landscape: 默认主题
    _config.yml: 全局配置文件
    db.json: 静态常量

添加阅读全文按钮

在文章合适的位置插入下列内容作为分隔符

<!--more-->

添加友情链接

  • 适用于默认主题中手动添加，若使用其他主题(如 NexT)可能该功能己经集成。

  • 在 themes/landscape/layout/_widget 中新建一个 .ejs 的文件，比如 links.ejs。
    内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!--模板是安装时默认的，若是用其他模板，自行更改 class 类名-->
    <div class="widget-wrap">
        <h3 class="widget-title"><%= __('links') %></h3>
        <div class="widget">
            <ul> <!--下面是每次增加和修改友情链接的列表-->
                <li>
                    <a href="http://blog.hycwall.com/" title="Hycwall">Hycwall</a>
                </li>
            </ul>
        </div>
    </div>

  • 在 themes/landscape/_config.yml 中的 widgets 部分，添加如下：

    1
    2
    widgets:
    - links

域名映射
GitHub Pages 默认为每个用户分配了一个二级域名『your_user_name.github.com』或『your_user_name.github.io』

当然我们也可以注册自己的域名，然后与 GitHub Pages 绑定。只需要在根目录或 source 目录下建立一个CNAME文件，内容就是域名，只需一行。
然后在域名解析管理（如DNSPod）中 添加一条 CNAME 记录即可。

404页面

GitHub Pages 自定义404页面非常容易，直接在根目录下创建自己的 404.html 就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用，GitHub默认分配的二级域名是不起作用的，使用 hexo server 在本机调试也是不起作用的。
其实，404页面可以做更多有意义的事，来做个404公益项目吧。如下：

腾讯公益404
404公益_益云(公益互联网)社会创新中心

自定义页面

执行new page命令

1
hexo new page "about"

在 source\ 下会生成 about 目录，里面有个 index.md，直接编辑就可以了，然后在主题的 _config.yml 中将其配置显示出来。
上述步骤，也可以手工生成，在 source\ 目录下手工新建 about 和 index.md 也是完全等价的。
因为markdown对table的不友好，也可在 about 中直接建立 index.html ，hexo会自动加上头和尾。

百度统计

  1. 注册并登录百度统计
  2. 在代码获取里复制你的统计代码
  3. 打开 themes/landscape/layout/_partial/head.ejs 文件，把统计代码粘贴到 <head></head> 之间。当然你也可以粘贴到其他的文件里，只要保证这段代码能够出现在每一页的 head 标签里就可以。
  4. 在百度统计中能够看到上一天的流量等数据。

评论模块

国内用户使用多说就不错。
在_config.yml中添加多说的配置：

1
duoshuo_shortname: 你站点的short_name

修改 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>
<% } %>

文章中添加图片

使用 markdown 写文章，插入图片的格式为![图片名称](链接地址)，这里要说的是链接地址怎么写。注意：符号要用英文字符！

对于hexo，有两种方式：

  • 使用本地路径： 在hexo/source目录下新建一个img文件夹，将图片放入该文件夹下，插入图片时链接即为/img/图片名称。
  • 直接使用外链，或存到图床如七牛云等平台。

文章中使用公式

1
2
3
4
$ npm install hexo-math --save
$ vim _config.yml       # 添加以下内容
plugins:
- hexo-math

嵌入 Latex 公式时，行内使用一对$，整行使用一对$$。
注意，因为 markdown 与 Latex 的符号有冲突，所以当公式源代码中含有下划线时，需要在下划线前添加斜杠来转义。

参考文章
更换博客系统——从jekyll到hexo