从零基础一步一步搭建 github + hexo 博客的方法，博客中 disqus 评论、七牛云图床的使用，以及自定义主题的方法。
推荐基础知识
虽然不了解原理也能搭建好博客，但是要实现复杂的修改时，还是不可避免的觉得很棘手。
下面列出一些自己搭建博客时学习的东西。
git
Github 客户端 git 学习教程，挺好的
另一个类似的： git 学习教程
Nodejs
Nodejs 自己的理解：
安装模块分为全局模块和具体的项目模块
- windows全局模块存放于
C:\Users\xxx\AppData\Roaming\npm\node_modules
任意目录执行都可以，安装指令要带有 -g 参数:npm install -g packagename - 项目模块存放于具体项目目录的 node_modules 文件夹内
直接在项目目录执行npm install packagename
hexo 入门
markdown 入门
搭建 github + hexo 博客
参考网页 1 适用于搭建博客。
参考网页 2 适用于高级一点的功能，如主题的安装等，特别详细，且全面。
参考网页：
安装主题
主题挑选
这个链接中列出了很多主题 hexo 主题查找。
可以从其中挑一个自己喜欢的。
如果觉得挑选麻烦，可以百度 hexo 主题推荐 。
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
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 目录下内容。
添加目录
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 ，再调节位置就行了，没那么麻烦。
添加网页图标
看一下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 标签的字体和页面背景颜色。点击了解字体设置字体解读
4056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
