Octopress 建站笔记

更新

已弃用 Octopress，本文内容不再适用，部分内容无法显示。

放暑假了闲来无事，想起一直以来惦记着却被搁置的搭建博客一事儿，恰巧在 Google 上看到 Octopress 的网站和应用文档，于是就结合 Google 和自己的理解慢慢摸索最终建成本博客。

这篇博文记录了我从开始建站到最后成型的全过程，细节略去，只保留重点，搭建平台为 Mac。

首先在 Github 新创建一个repo，起名为

username.github.com

将 repo 的 ssh 地址复制下来以备用

git@github.com:username/username.github.com.git

在 Mac 上升级 ruby 以及配置 Octopress 环境，在 Terminal 输入：

rvm install 1.9.3
rvm use 1.9.3
git clone git://github.com/imathis/octopress.git octopress
cd octopress #选择信任rvm
gem install bundler
bundle install
rake install

接下来就是链接 Github 和配置博客了

rake setup_github_pages

输入上文所说的 ssh 地址

git@github.com:username/username.github.com.git
rake generate
rake deploy

等待几分钟后，博客页面生成，输入

username.github.com

查看博客页面，至此博客搭建完毕

然后我们备份一下博客:

git add .
git commit -m 'your message' #your message可随意输入
git push origin source

配置博客相关参数可在 Octopress 文件夹中的 _config.yml 中进行

写博文：

rake new_post['title']

在 octopress/source/_posts/ 中可看到 markdown 文件，在 markdown 中编辑博文。也可以直接在 octopress/source/_posts/ 中创建 markdown 文件，两者并无区别。之后：

rake generate
rake preview # 在浏览器中输入 127.0.0.1:4000 可预览
rake deploy

等待几分钟即可看到发表的新博文，之后备份一下：

git add .
git commit -m 'your message'
git push origin source

之后安装主题：

git clone theme_URL .themes/theme_foldername # theme_URL 为主题地址，theme_foldername为主题文件夹名
rake install['theme_foldername'] # 询问是否覆盖，输 入 yes
rake generate
rake deploy

修改导航栏，在 octopress/source/_includes/custom/ 中找到 navigation.html，按格式增加或减少导航栏。若要增加导航栏页面，在 navigation.html 中增加相关代码：

<ul>
    <li><a href="{{ root_url }}/page_folder_name">page_name</a></li>
</ul>

在 octopress/source/ 中新建名为 page_folder_name 的文件夹，并在文件夹中添加 index.markdown 或 index.html 的页面文件

添加 Tags 和 Categories 页面，从

https://github.com/tokkonopapa/octopress-tagcloud

下载相关文件并放到 octopress 文件夹中的相应位置，在 navigation.html 中添加相关页面代码，并在相应的 index.markdown 或 index.html 中添加相应代码，详见 github 的 readme。

添加 gallery 页面，在 navigation.html 中添加相应代码并添加相应文件夹，从

http://fancyapps.com/fancybox/

下载相关文件并拷贝到 gallery 文件夹，在 index.html 的开头处添加

---
layout: page
title: Gallery
footer: false
---

剩下的代码内容参照 demo 文件夹中的 index.html，有详细的注解，可自选样式，例如我的是：

{% gist 919d9b2335f6031c8d55 %}

其中，使用最新版本的 jquery 会导致查看下一张照片的动作打开新页面，而使用 jquery 1.8.0 则不会。从网上下载 jquery 1.8.0 并拷贝到 lib 文件夹中，在 index.html 相关代码中将 jquery 的版本改为 1.8.0 即可。

至此整个博客布局基本完成，由于我不喜欢 sidebar，便没有启用 sidebar，相关的设置便不再写出。

最后

rake generate
rake deploy

2013.7.17 12:09 更新：

在创建标签页的时候，找到的几个 github 文件被我搞混了，最终折腾了一晚上搞定了。

原先的标签是由 category 目录产生的，也就是 Tags 的本质是 Categories，因此要让有序分类和无序分类区别开，必须寻找真正的 tag。

从

https://github.com/robbyedwards/octopress-tag-cloud

下载相关文件，将 tab_cloud.rb 放入 plugins/ 文件夹，此时在 index.markdown 中键入相关语句，出来的效果是以 list 列呈现的，效果如下

但我希望能以横排形式呈现 tab_cloud 而以竖排形式呈现 categories，于是寻求解决方案，最终通过对比 .rb 文件，找到解决方法：

打开 tab_cloud.rb，找到如下代码：

@tag_before = @tag_after = "" if @style == "para"
@separator = "" if @style == "list"

将 para 去掉，改为

@tag_before = @tag_after = "" if @style == ""
@separator = "" if @style == "list"

并在 tags 文件夹中，将 index.markdown 改为 index.html:

{% gist 6478d156e3f173368237 %}

为 tags 分节，至此，tag 页面完成。

后来觉得可以把 categories 和 tags 页面合二为一，便在 index.html 中添加相应的 category 代码，并在 navigation.html 中修改导航栏。

2013.7.17 22:33 更新：

设置 gallery 相册，从 fancybox 网站下载完成后，新建 gallery 文件夹，将包括 demo 在内的文件夹全部放进去，并将 index.html 内容更换为：

---
layout: page
title: Gallery
footer: false
---
<div id="content" class="inner"><article class="page">
<div class="entry-content"><a href="http://../lib/jquery.mousewheel-3.0.6.pack.js">http://../lib/jquery.mousewheel-3.0.6.pack.js</a>
<a href="http://../source/jquery.fancybox.js?v=2.1.5">http://../source/jquery.fancybox.js?v=2.1.5</a><a class="fancybox" title="Sample title 1" href="1_b.jpg" rel="gallery"><img src="1_s.jpg" /></a>$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
```其中"1_b.jpg"和"1_s.jpg"为相片文件名，前者为普通图像，后者为缩略图，存放与 demo 文件夹中。

由于平日相册使用不多，顾先取消导航栏。

在博文中设置照片流

同样用到 fancybox：

从 [photo_tag.rb](https://gist.github.com/sukima/2631877) 下载插件并放入 plugins/ 文件夹。

在 source/_includes/custom/head.html 文件底部加入：

<!– Load jQuery –>
<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js</a&gt;

jQuery.noConflict(); // ender.js conflicts with jQuery

<!– Load FancyBox –>

<a href="/fancybox/jquery.fancybox.pack.js">/fancybox/jquery.fancybox.pack.js</a>

<!– Fix FancyBox style for OctoPress –>

.fancybox-wrap { position: fixed !important; }
.fancybox-opened {
-webkit-border-radius: 4px !important;
-moz-border-radius: 4px !important;
border-radius: 4px !important;
}
.fancybox-close, .fancybox-prev span, .fancybox-next span {
background-color: transparent !important;
border: 0 !important;
}

<!– Custom Scripts –>

// ender.js gobbles jQuery's ready event: Use ender.js $ instead
$(document).ready(function() {
jQuery(".fancybox").fancybox();
});

在 sass/custom/_styles.scss 加入：

/* FancyBox Galleries */
$rad: 6px;
ul.gallery {
border: thin solid gray;
-webkit-border-radius: $rad;
-moz-border-radius: $rad;
border-radius: $rad;
text-align: center;
padding: 5px;
li {
display: inline;
padding: 5px;
}
}

<br />由于我引用的是 flickr 的图片，因此在 _config.yml 中加入：

photos_prefix: https://farm

<br />以后输入图片地址只需输入类似 `4.staticflickr.com/3767/9278977480_3b0af4d13a.jpg` 的地址即可，完整照片流的语句为：

{% gist 594b9dc9a38ca2b3d122 %}

<br />在语句中间插入照片的地址即可。

在 `rake generate` 时出现解析错误，Google 后，将 Liquid 版本降到 2.2.2 即可解决，在 Gemfile.lock 中，将

liquid（~> 2.3.0）
liquid (2.3.0)

<br />修改为

liquid (= 2.2.2)
liquid (2.2.2)

<br />并在终端输入

gem install bundler
bundle install

<br />就会提示 liquid (2.2.2)安装成功。

至此，只需在 .markdown 中键入相关句法即可实现照片流。

## 2013.7.23 2:14更新：

将 `octopress/source/_layouts/tag_index.html` 的内容更改为：

{% gist 201dd314f4d8be5402d6 %}

<br />## Category 中文显示:

折腾了一晚上,就为了实现 Category 支持中文显示,具体过程曲折就不说了,说多了都是泪,直接说方法.

首先替换 category_generator.rb 的内容,内容如下:

{% gist a6876ad20348765b6ec8 %}

<br />然后替换 category_list.rb 的内容,如下:

{% gist bf245c7e32590d494074 %}
“`

没了…

2013.9.6 13:14

包含链接向 Flickr 的 Markdown 或 html 均无法正确 generate,大概是与 filckr 的连接出现问题.

后来

已不用 Octopress