搭建自己的 github + hexo 博客

从零基础一步一步搭建 github + hexo 博客的方法，博客中 disqus 评论、七牛云图床的使用，以及自定义主题的方法。

搭建 github + hexo 博客

参考网页 1 适用于搭建博客。
参考网页 2 适用于高级一点的功能，如主题的安装等，特别详细，且全面。

参考网页：

安装主题

主题挑选

这个链接中列出了很多主题 hexo 主题查找。
可以从其中挑一个自己喜欢的。
如果觉得挑选麻烦，可以百度 hexo 主题推荐 。

freemind 主题

这一节由 2017.6.7 添加。

下面的主题改完发现还是不太满意，决定换个主题了，换为freemind。改用别人改过的主题总觉得乱糟糟的。还不如在原始主题上修改。
修改过程就不细说了。

大致启用了目录，网页图标，Google Analytics， swiftype 站内搜索，disqus评论等功能，修改了 markdown 生成表格的效果。修改了文章详情页右边的挂件，加了点文字描述。在页脚和文章分享前面添加了统计访问量文字。

maupassant 主题

由于自己喜欢简洁的东西，所以最先挑选的主题是 maupassant 。
maupassant 主题安装遇到了一些小问题，可以参考下面网址：
参考网址 1
参考网址 2
参考网址 3

maupassant 主题都弄好了之后,又在别的地方看中了一个主题，遂换之。

修改自freemind 的 material 主题

新主题(material)链接：github 下载

可惜这个主题有点毛病，需要自己修改。
自己不满意的地方在于：

disqus评价加载不了。
首页和文章详情页添加文章的分类、标签信息。
文章详情页添加目录。
添加网页图标。
字体不好看。
首页 MORE 修改。
关于 信息需要自己添加。
RSS 信息也要添加。

七牛云作为博客图床

使用很简单，按照下面网址做就可以了。
七牛云作为博客图床

自定义主题

制作 Hexo 主题，除了需要了解 HTML / CSS / JavaScript 之外，还需要了解两个主要的技术，首先一个是模板引擎，Hexo支持主流的模板引擎，像 EJS / Jade / Swig 等，另外一个是 CSS 预处理，如 SASS / LESS / Stylus ，当然，这两个不用，直接使用 HTML / CSS 也是可以的，只不过可能效率会低一点。

基础知识

html 入门
w3school 入门教程
 html 标签大全
 html 中实体符号的表示

css 入门
w3school 入门教程
 MDN 入门教程
 同学博客总结
 如何插入 css 样式表
 css在线测试工具
 css定位，讲的很好
 @ media (min-width: 768px) 语句解读

html DOM 入门
w3school 入门教程

jQuery 入门
w3school 入门教程
 网上看到的博客，自己没仔细看
 jQuery 中文API

jQuery 中的 function 定义和引用：

(function($){})(jQuery)  
$(function(){}) 、 jQuery(function($) {…}) 、 $(document).ready(function(){})  
$.fn.myFunctionName = function(){}

注解：因为匿名函数没有名字，所以定义和引用必然是在一起的。除非定义的函数赋值给 function 变量，再引用这个变量。
第一行相当于匿名函数，后面的 jQuery 为实参，前面的美元符号是形参，表示参数为 jQuery 对象。
第二行的都是一个意思只是写法不同。根据最后一项很好理解意思。
第三行定义了一个匿名函数，赋值给函数变量。

jQuery 中定义和引用 function
讲的比较全面
 和上面的差不多
 举了两个例子
 jQuery 中 function 的书写习惯 1
jQuery 中 function 的书写习惯 2

ejs 模板引擎入门
英文的，官网教程
 英文的，官网教程
 网上博客，写的不怎么样
 网页中例子有助于理解 ejs

为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus

如何系统地学习Node.js？

常用html、CSS、javascript前端命名规范

maupassant 主题中用的是 Jade 模板引擎， sass 预处理器。
自己的 material 主题中用的是 ejs 模板引擎，没有采用预处理器。

别人博客主题制作经验

初步了解Hexo站点的布局
 Hexo 优化与定制(一),写的特别好
 Hexo 优化与定制(二) ,写的特别好
 Hexo添加Toc支持，生成文章目录，我不是用这种方法做的
 在Hexo主题中新添加resume布局

下面开始改造自己主题

我是在 material 主题的基础上进行修改的。

代码中可能的疑问：
代码 <i class="fa fa-tags"></i> 表示这个标签有两个类名，也会同时匹配两个 css 中类选择器。参考网址：

有了以上基础之后，再看 material 的源码，轻而易举的就看懂了。

添加网页中的小图标

这个主题，作者在以前有图标，后面删除了。所以我在 github 上下载了以前的版本。然后与现在的对比。
修改了 articals.ejs 中部分内容，使得主页和文章详情页会显示此文章的分类和标签信息。
另外从源主题中复制了 font-awesome.css 文件和 fonts 目录下内容。

一般都用的 font awesome 图标，可以到 github 上下载。将源码中 awesome.css 放在 themes/主题名/source/css 文件夹内，源码中 fonts 文件夹放在 themes/主题名/source 文件夹下。可能根据不同主题需要其他不同的配置。

添加目录

bootstrap.css 部分内容如下：

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }

因为自己笔记本分辨率为 1366*768 ，所以会采用这种样式。
这种样式中是 float 排版，给自己的目录排版带来了一些麻烦。

弄了好久，最后发现好简单。
修改 style.css 文件，修改部分如下：

#toc {
  position: fixed;
  right: 30px;
  top: 150px;
  transition: all ease 0.3s;
  border: none;
  border-radius: 0;
}
#toc.sticky-scroll{
  top:40px;
}
.toc-title{
  font-weight:bold;
  font-size:125%
}

其实只要将目录设置为 fixed ，再调节位置就行了，没那么麻烦。

最后发现没那么麻烦，只要把 style.css 文件中 center-centent 中的 float: none 注销掉就好了。其他都不用改。

添加网页图标

看一下hexo\themes\modernist\layout_partial\head.ejs，找到这句：

<link rel="icon" type="image/x-icon" href="<%- config.root %>favicon.ico">

你懂的，将你的favicon.ico放到工程根目录下即可，也就是hexo\source目录。可以在Faviconer制作你的ico图标，国内有比特虫。

如果当时没有显示，那是因为浏览器缓存的缘故，可以换一个浏览器查看效果。

博客中 Disqus 评论

要看主题中 layout 文件夹中的 comment.ejs(一般位于 /layout/_partial目录下) 内容。
有的是在博客根目录的 _config.yml 中添加 disqus: xxx 或 disqus_shortname: xxx
有的是在主题目录的_config.yml 中添加 disqus: xxx 或 disqus_shortname: xxx

Example：
maupassant 是在主题目录的_config.yml 中添加 disqus: xxx
自己的 material 是在博客根目录的 _config.yml 中添加 disqus_shortname: xxx

很多时候回发现，添加之后disqus还是加载不了，这时候就要查看评论源码(comment.ejs文件)。很多主题都只有下面代码最后的 <noscript></noscript>> 这一段。或者是前面的 <script></script> 这一段。需要补全。

<div id="disqus_thread"></div>
<script>
    /**
     *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
     *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
     */
    /*
    var disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() {  // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        
        s.src = 'https://liliechao.disqus.com/embed.js';
        
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

点击查看这段代码的代码来源，可能需要注册 Disqus 账号

字体设置

根据心情调整了一下 style.css 中 body 标签的字体和页面背景颜色。点击了解字体设置字体解读

发现没什么效果，于是在网上找了下，看到这篇文章字体设置，然后再本地找到了 material.css 文件，修改即可。

markdown 显示的表格样式修改

表格显示效果如下，很明了。

在 style.css 中添加如下内容：

table {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}
table thead {
    border-bottom: 1px solid #777;
    background-color: #aaa;
    color: #fff;
}
table tbody tr:nth-of-type(2n) {
    background-color: #e5eaed;
}
table tbody tr:nth-of-type(2n+1) {
    background-color: #f8f8fd;
}
th {
  padding: 12px 10px 12px 10px;
}
td {
  padding: 7px 10px 7px 10px;
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

sitemap

参考网址，写的很详细

本文总阅读量次.