Hexo静态博客搭建（2）部分优化

2015-08-06

文章目录

1. 优化工作
1.1. 给静态博客加速

优化工作

绑定域名

托管在GitHubPages上的博客都会自动绑定一个二级域名：uersname.github.io，访问该二级域名即可访问自己的博客主页，同时也可以在Github中新建repository来做博客的自定义关于界面，注意非uersname.github.io的repo要使用gh-pages分支，而pages默认的即可直接用master分支
如果你对GigHub不够了解，可自行查询分支和GitHub Pages的用法。
如果对github给出的二级域名不满意的话，那么可以自行申请一个域名，可以在狗爹（godaddy）或者万网注册自己的域名，因为现在国内的域名已经开始要求备案，可能个人域名使用要先进行备案操作，备案操作直接按照阿里云给出的提示操作即可。

添加RSS插件

使用插件 hexo-generator-feed 能生成 Atom 1.0 或者 RSS 2.0 feed.
安装：

$ npm install hexo-generator-feed --save

配置：

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

type 表示类型, 是 atom 还是 rss2.
path 表示 Feed 路径
limit 最多多少篇最近文章

添加文章目录

在 Hexo 的 2.4.1 版本之后, tommy351 给 Hexo 增加了 Table of contents 功能, 并提供了相关的使用方法 TOC (Table of contents) helper #408.

使用方法很简单，也可以自定义样式，给大家分享个人比较简单的设定，可以自行修改代码进行优化。

在主题目录下\layout_partial\article.ejs中对应位置添加如下的代码：

<div class="article-entry" itemprop="articleBody">
     <!--文章目录-->

     <% if (post.excerpt && index){ %>
        <%- post.excerpt %>
        <% } else { %>
      <% if(post.toc !== false){ %>
        <div id="toc" class="toc-article">
          <strong class="toc-title">文章目录</strong>
        <%- toc(post.content) %>
        </div>
      <% } %>
    <% } %>
    <!--End-->
 <%- post.content %>
  </div>

上述代码加入了自己控制目录的展开与否，如果你在当前文章中部需要文章目录，那么：

title: Hexo
category: [Android,Hexo]  
tags: [hexo,blog] 
toc： false #设置这里值为false
---

## 博客正文 ##

在style样式文件中可以自定义样式，可以自己创建toc.styl文件通过import来关联，也可以直接在对应CSS文件中修改，附上简单的样式代码：

/**
文章目录CSS代码
*/
.toc-article {
  background: #eee;
  margin: 0 0 0 .5em;
  padding: 1em
}

.toc-article strong {
  padding: .3em 0
}

#toc {
  line-height: 1em;
  font-size: .8em;
  float: right
}

#toc .toc {
  padding: 0
}
#toc .toc li {
  list-style-type: none
}

#toc ol {
  margin-left: 0
}

#toc .toc-child {
  padding-left: 1.5em
}

给静态博客加速

优化Html/CSS/JS/Image

为了优化HTML,CSS,JS, 我们需要安装插件 Hexo Optimize, 安装非常简单 Git Bash 进到你的hexo博客根目录安装该插件
npm install hexo-console-optimize
利用命令 hexo optimize 或者 hexo o 即可优化资源：HTML、CSS、JS、Image.

CDN

（如果对访问速度相对满意可以忽略类似操作）
接下来需要把 CSS, JS, Image 等静态文件利用七牛等 CDN 服务加速, 也就是 hexo o 以后生成的这类文件(优化过的). 一般来说只添加网页结构基本不变的东西, 例如 CSS 和 JS, 对于内容里面的图片文件另议. 将其上传到七牛的服务器上，同时将本地对应的代码链接改为七牛的地址。

需要注意一点 jquery.fancybox.css 将会用到 fancybox 文件下的图片, 所以我们还需要把对应的图片上传到七牛, 并且保持文件夹目录

添加 InstantClick

加上 InstantClick.js 后, 通过预加载可以达到网页秒开的效果 (并没有实际提速), 具体介绍可以看这里博客启用InstantClick.

让多说的评论框转起来

这个个人还没有进行实现，等待域名备案结束后一并修改，可以移步博文进行学习和设置~
V说的文章：多说自定义CSS 让你的多说评论动感起来http://www.vsay.cn/one-more-custom-css-lets-you-say-comments-city.html

示例图片

简单亦是最美

技术学习Hexo