在极客学院学习Git相关的课程时，无意间看到了Octopress搭建静态博客的课程，就开启了Octopress之旅。本文主要分享一些自己的学习心得和遇到的问题。

学习资料

视频资料

当然是极客学院的Octopress搭建静态博客.但是该课程需要VIP会员，不过小编给大家我在百度云上的分享，有所有的课程资料哟：百度云分享

文字资料

首先推荐郝海龙的博客,该博客就是用Octopress搭建的。其次是极客学院的一篇Wiki.以上资料可以让你掌握Octopress 90% 的知识。

学习心得

通过上面的学习，我们只是一个操作工。因为我们只能按照别人的思路实现别人的想法，那么我们如何按照自己的思路实现自己的想法了？第一，了解Octopress下的所有文件夹和文件,其实这说起来容易做起来很难。目前小编也只了解 40% 就不卖弄了，大家可以自行Google。第二，了解CSS，SCSS，甚至Ruby，很多小问题都涉及到网站前端的知识，如果要写插件，Ruby是绝对绕不开的。

问题

安装问题

极客学院提供的是windows的安装教程，小编使用的是Ubuntu14.04.要命的是Ubuntu仓库中提供的是Ruby1.9.3，其实安装该版本还是可以用的，但是出现了Waring：说SASS不提供Ruby1.9.3的支持，建议使用Ruby2.0+ 。无奈，像小编这种最求完美的人，必然要安装最新版的Ruby，那么就只能源码安装了。我想会用Linux的人源码安装不是问题，也就是configure、make、install那几步，最后配置一下环境变量。满心欢喜的以为可以使用了，结果竟然出现Error，前面可只是Warning，这下糗大了。经过分析，由于Ruby1.9.3卸载不干净，因此使用的是Ruby1.9.3的命令，但是它又被卸载了，因此报错，那么我们只需把Ruby1.9.3残余的程序删掉即可

自动生成文章目录

我个人很喜欢郝海龙的文章目录的模板，绞尽脑汁想了各种办法（也就是Google啦），走了很多弯路，还是没有实现它的效果，我觉得还是因为缺乏前端的知识。最后我用了取巧的办法:使用chrome打开他的博客，接着使用chrome审查元素的功能，找到想要的代码，直接复制。下面我直接贴出生成的TOC的code 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#markdown-toc:before {
  content: "本页目录";
  font-size: 1.2em;
  font-weight: bold;
  /** 定义成 block 元素 **/
  display: block;
  height: 40px;
}
ul#markdown-toc {
 	list-style: none;
    border: none;
    padding: 0.6em 1.25em 1.2em;
    margin-top: 0.25em;
    margin-bottom: 1.25em;
    margin-left: 0;
    font-style: normal;
    font-size: 1em;
    line-height: 1.75em;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 4px 4px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 4px 4px rgba(0,0,0,0.3);
    box-shadow: 0 4px 4px rgba(0,0,0,0.3);
    background-color: #D3D3D3;
}
.blog-index #markdown-toc {
  display: none;
}