美柑の部屋

涙は見せないと誓った。

Loading…

如何搭建基于Octopress的博客

本文介绍了我在Windows操作系统下，从零开始搭建基于Octopress的博客，并且为自己的博客添加一些个性化内容的简要流程。

一、准备工作

  • 安装Git for Windows：可以到Git官网下载安装。
  • 安装Ruby：可以到Ruby官网下载安装，我所下载的Ruby版本是2.2.4。
  • 安装Python2.7：可以到Python官网下载安装，安装后运行easy_install pygments安装代码高亮脚本。
  • 需要注意的是，安装上述工具的过程中，最好都勾选上“添加到系统环境变量”一项，否则需要稍后自己手动设置。

二、安装Octopress

我们可以直接从Github上将Octopress的对应源代码clone下来并进行安装：

1
2

cd <the_directory_of_your_blog>
git clone git://github.com/imathis/octopress.git

此时在the_directory_of_your_blog/目录下应该有一个名为octopress的文件夹了。

1
2
3
4

cd octopress
gem install bundle
bundle install
rake install

这样就算完成了Octopress的安装流程。我们可以在命令行中执行rake preview，然后在浏览器中输入localhost:4000，来测试是否安装成功。如果安装顺利，我们便可以看到自己博客的“雏形”了。

三、部署到Github

当然刚才我们只是可以在本地访问自己的博客，为了让它可以被互联网中的用户访问到，我们可以将其部署到Github上。
首先我们在Github上新建一个Repository，命名为username.github.io。
然后我们就可以进行部署工作了，以本博客为例（我的Github账号为smwlover，新建的Repository名称为smwlover.github.io）：

1
2
3

rake setup_github_pages
https://github.com/smwlover/smwlover.github.io
rake deploy

注意：在执行rake deploy之前，请确认自己有访问对应Repository的权限。

四、常用操作：

  • rake new_post['article title']可以用来新建一篇博文，该命令会在source/_posts/文件夹下生成一个对应的markdown文件，我们可以打开该文件，编辑博文的内容。
  • rake install['theme name']可以用来安装一个新的Octopress主题。
  • rake preview可以用来对博客进行预览，通过浏览器访问localhost:4000即可。
  • rake generate可以用来生成博客对应的静态网页，生成到public/目录下。
  • rake deploy则将博客对应的静态网页部署到Github上。

五、个性化之_config.yml

在Octopress的根目录下，我们可以看到一个名为_config.yml的文件，该文件包含了自己博客的一些最基本的配置。
1. title:对应博客的标题，subtitle:对应博客的副标题，author:则会显示在博客的页脚处。我们可以尝试着修改它们对应的值，然后观察产生的效果。注意：在修改的时候，一定要注意冒号后面有一个半角的空格，否则会出错。以下同理。
2. default_asides:中的内容会在侧边栏按照顺序依次显示。
3. github_user:对应我们的Github用户名，如果我们设置在侧边栏中显示Github条目，Octopress会自动获取该用户创建的Repository的信息。
4. disqus_short_name:对应我们的Disqus用户名，Octopress默认支持Disqus评论系统，它会在每篇博文的最底部显示该用户所对应的评论信息。

六、个性化之自定义侧边栏

上面已经提到，在default_asides:中可以添加侧边栏中要显示的内容。侧边栏中的每条内容都对应着一个html文件，其中Octopress默认支持的内容位于source/_includes/asides/目录下，自定义的内容则最好放在source/_includes/custom/asides/目录下。下面我会简单介绍一下我的博客中“博客简介”、“歌曲列表”和“友情链接”的添加流程。

博客简介：

在source/_includes/custom/asides/目录下创建about.html，然后在default_asides:对应的数组中添加custom/asides/about.html。本博客的about.html内容如下：

about.html 
1
2
3
4
5

<section>
    <h1>博客简介</h1>
    <p>欢迎来到美柑的房间！</p>
    <p>……</p>
</section>

歌曲列表：

在source/_includes/custom/asides/目录下创建music.html并且在default_asides:中添加对应路径。目前包括网易云音乐和虾米音乐在内的很多音乐平台都支持外链播放器的功能，我们只需要获取到html格式的外链，然后加入到music.html中即可。
因为本博客利用的是虾米音乐的歌曲外链，在Safari浏览器下好像无法正常工作，所以我在music.html首先判断是否是Safari浏览器，如果不是再加入html内容：

music.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- 判断浏览器是不是safari，如果不是再加入虾米音乐歌单。safari无法显示。 -->
<script type="text/javascript">
    var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    var s = ua.match(/version\/([\d.]+).*safari/);
    s ? Sys.safari = s[1] : 0;

    if(Sys.safari){
    }else{
        document.write('<section>');
        document.write('<h1>歌曲列表</h1>');
        document.write('<!-- 音乐平台的歌曲外链 -->');
        document.write('</section>');
    }
</script>

友情链接：

和上面的方法类似，先创建一个friend.html页面，然后向其中加入一些带有链接的条目，最后在_config.yml中的default_asides:中加入该文件的路径即可，不再赘述。

friend.html 
1
2
3
4
5
6
7
8
9
10
11

<section>
    <h1>友情链接</h1>
    <ul>
        <li>
            <a href="http://music.163.com/#/playlist?id=60530487">我的《命运石之门》歌单</a>
        </li>
        <li>
            <a href="http://wangshenghu.github.io">Wangsheng Hu的个人博客</a>
        </li>
    </ul>
</section>

七、个性化之自定义样式

有关样式的所有内容都在sass/目录下，我们可以通过修改sass/custom/_layout.scss来修改博客的布局，比如调节侧边栏的宽度，或者调节标题的字体大小等。
我们可以向sass/custom/_styles.scss文件中添加自定义背景图片的代码，对应的图片background.png则需要放置于source/images/目录下：

_styles.scssLink 
1
2
3
4
5
6
7
8
9
10
11

html {
    background: #555555 url("/images/background.png") fixed;
}

body > div {
    background-image: none;
}

body > div > div {
    background-image: none;
}

在添加完背景图片之后，我们可能会发现标题栏的背景色有些突兀，我们想要将标题栏的背景色修改为透明。经过百般寻找，我们发现标题栏的背景色在sass/base/_theme.scss中设置，直接将透明度修改为0即可：

1

$header-bg: rgba(#333, 0) !default;

在标题栏透明之后，我们可能更喜欢导航栏的左上角和右上角更加圆滑一些，这时我们可以在sass/custom/_styles.scss添加如下代码：

_styles.scssLink 
1
2
3
4
5
6
7
8
9

@media only screen and (min-width: 1040px) {
    body > nav {
        @include border-top-radius(.4em);
    }

    body > footer {
        @include border-bottom-radius(.4em);
    }
}

八、在侧边栏中增加分类列表

如同本博客所示，侧边栏的分类列表会按照博文的类别对博文进行整理与归纳，十分方便。为了达到这样的效果，首先我们需要定义一个插件。Octopress的插件是以plugins/*.rb文件的形式存在的。我们要写的分类列表插件，需要归纳出所有博文的类型，然后显示出一系列形如category_name(post_number)的标签，并且还要定义每个标签指向的超链接位置。
我们在plugins/目录下添加category_list_tag.rb文件，代码如下：

category_list_tag.rb 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

module Jekyll
    class CategoryListTag < Liquid::Tag
        def render(context)
            html = "" #这是最终要生成的html。
            categories = context.registers[:site].categories.keys
            categories.sort.each do |category| #对于博文的每种类型catagory：
                posts_in_category = context.registers[:site].categories[category].size #获取该类型下有多少博文。
                category_dir = context.registers[:site].config['category_dir'] #获取_config.yml文件中category_dir对应的路径，该路径默认是/blog/categories。

                #这一步最为关键，category.to_url.downcase是当前类型catagory所对应的拼音（汉字无法识别）。
                #假设当前类型catagory为“笔记”，那么'/#{category_dir}/#{category.to_url.downcase}/'的值就是'/blog/categories/bi-ji'，这就是该标签的超链接指向的位置。
                #“#{category} (#{posts_in_category})”是该标签显示的内容，如“笔记 (2)”。
                html << "<li class='category'><a href='/#{category_dir}/#{category.to_url.downcase}/'>#{category} (#{posts_in_category})</a></li>\n"
            end
            html
        end
    end
end

Liquid::Template.register_tag('category_list', Jekyll::CategoryListTag)

然后，像之前往侧边栏添加内容时一样，我们在source/_includes/custom/asides目录下添加category_list.html文件，并且在_config.yml中的default_asides:中加入该文件的路径：

category_list.html 
1
2
3
4
5
6

<section>
    <h1>文章分类</h1>
    <ul id="categories">
        {% category_list %}
    </ul>
</section>

九、在首页添加“个人简介”（关于）选项卡：

我们可以在source/_includes/custom/navigation.html文件中自定义导航栏中选项卡的内容。为了加入“个人简介”选项卡，首先我们需要通过命令rake new_page['about']，在source/目录下创建一个about/目录，里面包含一个index.markdown文件。然后我们只需要在导航栏中添加一个指向该页面的标签即可：

navigation.html 
1
2
3
4
5

<ul class="main-navigation">
  <li><a href="/">博客主页</a></li>
  <li><a href="/blog/archives">文档列表</a></li>
  <li><a href="/about">个人简介</a></li>
</ul>

十、添加返回顶部按钮：

当自己的博文长度很长时，每次手动返回顶部就显得很不方便。我们可以在页面的右下角加入一个返回顶部按钮。首先，我们在source/javascripts/文件夹中加入top.js，这是实现返回顶部功能的代码：

top.js 
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
32
33
34
35
36

function goTop(acceleration, time){
    acceleration = acceleration || 0.1;
    time = time || 4;

    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 0;
    var x3 = 0;
    var y3 = 0;

    if (document.documentElement)
    {
        x1 = document.documentElement.scrollLeft || 0;
        y1 = document.documentElement.scrollTop || 0;
    }
    if (document.body)
    {
        x2 = document.body.scrollLeft || 0;
        y2 = document.body.scrollTop || 0;
    }
    var x3 = window.scrollX || 0;
    var y3 = window.scrollY || 0;

    var x = Math.max(x1, Math.max(x2, x3));
    var y = Math.max(y1, Math.max(y2, y3));

    var speed = 1 + acceleration;
    window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

    if(x > 0 || y > 0)
    {
        var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
        window.setTimeout(invokeFunction, time);
    }
}

然后我们需要写一个按钮，该按钮可以调用这段代码。我们在source/_includes/custom文件夹下创建totop.html，代码如下：

totop.html 
1
2
3
4

<div id="full" style="position:fixed; right:10px; bottom:10px; z-index:100; text-align:center; cursor:pointer; border:0px">
    <a class="totop" href="#" onclick="goTop(); return false;"></a>
</div>
<script src="/javascripts/top.js" type="text/javascript"></script>

我们需要修改source/_layouts/default.html，使其包含进我们刚才写的totop.html：

default.html 
1
2
3
4
5
6

<!-- 上面部分省略 -->
<footer role="contentinfo">{% include footer.html %}</footer>
    {% include after_footer.html %}
    {% include custom/totop.html %}
</body>
</html>

最后，我们可以在sass/custom/_styles.scss中利用分类器自己定义该按钮的样式，包括鼠标悬浮时的效果等等。我定义的样式如下：

_styles.scss 
1
2
3
4
5
6
7
8
9
10
11

//To Top:
.totop{
    display: block;
    width: 50px;
    height: 50px;
    background-image: url("/images/top.png");
}

.totop:hover{
    background-position: 0px -50px
}

当然，我们需要将按钮对应的图片top.png放入source/images/路径下。

十一、优化加载速度：

到此为止，我们已经有了一个比较个性化的博客了，但是我们发现每次打开页面的速度相当慢，这是由于打开博客的时候有些条目需要访问Google的资源所致。我们可以将这些条目删除，使打开博客的速度快如闪电。
1. 将source/_includes/head.html文件中的Google的jquery脚本地址改成百度的。
2. 将source/_includes/custom/head.html文件中的Google Font请求注释掉。
3. 将_config.yml文件中的twitter内容注释掉。

参考资料：

Octopress的个性化设置
Markdown编辑器语法指南
Octopress官方文档

评论