Octopress on 冯威的博客

Windows中搭建已存在的Octopress环境

Thu, 15 Aug 2013 00:00:00 +0800

当我们需要在不同的电脑上来对同一个Octopress博客进行维护的时候就需要针对已存在的Octopress来设置环境了，

安装相应的软件

关于软件的安装在《Windows下搭建Octopress博客》中有详细的介绍。

拉Octopress代码到本地

使用下面命令将已存在的Octopress代码拉到本地

git clone -b source git@github.com:oec2003/oec2003.github.com.git
git clone git@github.com:oec2003/oec2003.github.com.git _deploy

编写文章

cd Octopress
rake new_post['new post title']
rake generate
rake preview
rake deploy

推送到github

cd Octopress
git add .
git commit -m 'message'
git push origin source

从github上获取最新

比如在公司发布了一篇博文，回到家里想继续发博文，就需要先将github上的最新代码拉到本地：

cd Octopress
cd _deploy
git pull origin master
cd ..
git pull origin source

今天在家里的另一台电脑上进行生成文章时，发现当执行了命令rake generate 后，生成到public目录中相应的页面为空，没有任何内容，但在命令行中命令还是正常执行了，没有出现异常。最后查出原因是因为Python的安装目录没有添加到环境变量中。所以建议在准备环境时就就将git、ruby、python的安装目录都添加到环境变量中。

Octopress博客设置

Fri, 31 May 2013 00:00:00 +0800

在上一篇《Windows下搭建Octopress博客》中介绍了怎样在Windows环境中搭建Octopress博客，以及如何部署到Github中，本文主要讲解怎样对Octopress进行一些设置，比如修改博客标题、添加侧边栏等等。

Octopress文件目录

首先来看下Octopress的文件目录吧，因为很多的设置就是从这里开始的。

刚clone下来的Octopress源码没有最后的三个文件，当执行了rake install后会产生最后的三个目录。

source：该目录是执行rake install后从.themes\classic目录中的source拷贝而来，并且添加了一个_posts目录了，当执行了rake new_post[‘title’]后会在_post生成博文的markdown文件。包括后面的很多设置页是在该目录中进行
sass：也是在执行rake install后从.themes\classic目录中的source拷贝而来。Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护
public：刚clone源码时public是个空目录，当执行了rake generate后会编译source的内容然后将编译后的内容复制到public目录中，在执行rake deploy后也是讲public的内容推送到服务器上，我们最终访问到的也是public的内容。这个目录中的内容一般不用我们手动修改，执行rake generate来生成。

基本设置

在Octopress目录中有一个名为_config.yml的文件：

url: [http://oec2003.github.io](http://oec2003.github.io/) #网站地址

title: 冯威的个人博客 
#网站标题

subtitle: 临渊羡鱼 不如退而结网. 
#网站副标题

author: 冯威 #网站作者，通常显示在页尾和每篇文章的尾部

simple_search: [http://google.com/search](http://google.com/search) # 搜索引擎

description: #网站的描述，出现在HTML页面中的 meta 中的 description

在使用rake new_post[’title’]生成的markdown文件中，可以对每篇博文进行一些设置：

layout: post

title: "我的第一篇Octopress博客" #文章标题

date: 2013-05-26 18:49 #文章发布时间

comments: true #是否允许评论

categories: Octopress #文章分类

设置网站的description和keywords

在网页的head部分设置name为description和keywords的meta元素可以让网页更容易被搜索引擎搜索到，下面说说怎样在Octopress中设置首页和每篇博文的description和keywords。

设置首页

打开source/index.html文件，在文件的头部添加相应内容：

layout: default

#下面为添加的内容

description: "冯威的个人博客"

keywords: Asp.Net,C#

设置文章

文章的设置直接在每篇文章对应的markdown文件的头部添加相应内容即可：

layout: post

title: "我的第一篇Octopress博客"

date: 2013-05-26T18:49:00+08:00
comments: true

categories: Octopress

#下面为新增内容

description: "我的第一篇Octopress博客"

keywords: Octopress

导航栏设置

打开文件source\_includes\custom\navigation.html，默认情况下如下所示：

<ul>
<li><a href=”{{ root_url }}/”>Blog</a></li>
<li><a href=”{{ root_url }}/blog/archives”>Archives</a></li>
</ul>

可以将Blog和Archives修改为首页和归档，不过记得将包含有中文的文件保存为无BOM的UTF-8编码格式。也可以在此添加一个标签页，比如加上一个关于，我们可以按下面步骤实现：

使用命令rake new_page[‘about’]创建一个页面，页面路径为source\about\index.markdown;

修改上面的navigation.html为：

<ul>
<li><a href=”{{ root_url }}/”>首页</a></li>
<li><a href=”{{ root_url }}/blog/archives”>归档</a></li>
<li><a href=”{{ root_url }}/about”>关于</a></li>
</ul>

显示效果如下：

Windows下搭建Octopress博客

Mon, 27 May 2013 00:00:00 +0800

您需要掌握的

使用Octopress来搭建博客，还是有一定门槛的，看完本文后，希望您不会觉得很难。

Octopress 是一款基于 Jekyll 的静态站点生成系统，使用Ruby实现，所以您需要懂点Ruby的知识，其实会几个命令就行；

Octopress的博客内容是通过Markdown来书写，所以您需要了解Markdown的编写规则，Markdown 语法说明可以让你在几分钟之内熟悉Markdown的语法，在Windows下可以使用MarkDown Pad或是使用在线的编辑器http://mahua.jser.me/进行编辑；

Octopress通常会部署在GitHub上，所以您需要会一些简单的Git命令以及Gtihub的使用。

准备

系统：Windows 2003 Server、Windows 7、Windows 2008R2 Server，这三个系统用下面的版本都安装成功过；

Git：http://msysgit.googlecode.com/files/Git-1.8.1.2-preview20130201.exe

Ruby：http://files.rubyforge.vm.bytemark.co.uk/rubyinstaller/rubyinstaller-1.9.3-p429.exe

DevKit：http://cloud.github.com/downloads/oneclick/rubyinstaller/DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe

Python：http://www.python.org/ftp/python/2.7.5/python-2.7.5.msi

Octopress：git://github.com/imathis/octopress.git

安装

安装Git

Windows下安装Git很简单，一路next就可以了。

安装Ruby

Ruby的安装也是一路next就可以，不过记得勾选“Add Ruby executables to your PATH”，将Ruby的执行路径加入到环境变量中，如果忘记勾选，也可以手动设置。安装完后可以在命令提示符中输入ruby –version 来确认是否安装成功。

安装DevKit

DevKit下载下来的是一个自压缩文件，我们将其解压到D:/DevKit，有两点需要注意：

解压目录中没有有中文和空格；
必须先安装Ruby，而且Ruby需要是RubyInstallser安装。

解压DevKit后，在命令行输入以下命令来进行安装：

d: 
cd DevKit
ruby dk.rb init 
ruby dk.rb install

安装Python

安装Python,也是一路next就可以，博客的代码高亮用到了Python的Pygments模块，在Python中安装第三方库需要使用easy_install，在下面地址下载跟Python相对应的安装程序安装后就可以使用easy_install了。

https://pypi.python.org/pypi/setuptools

easy_install会安装在Python安装目录的Scripts目录中，例如我的Python目录是C:\Python27，所以需要将C:\Python27\Scripts目录加入到环境变量中才能在命令提示符中使用easy_install命令。

在命令提示符中输入如下命令就可以安装Pygments了。

easy_install pygments

安装Octopress

首先在GitBash中输入如下命令将Octopress代码拉到本地，

cd d:/GitProject
git clone git://github.com/imathis/octopress.git octopress

然后需要安装Octopress的依赖项，安装依赖项需要用到Ruby的gem，使用下面的命令可以更换gem的更新源，使用国内的淘宝镜像速度相对快点。

gem sources -a http://ruby.taobao.org/
gem sources -r http://rubygems.org/
gem sources -l

修改Octopress目录下的Gemfile文件，将第一行的http://rubygems.org/ 修改为http://ruby.taobao.org/

在命令提示符中进入到Octopress目录，输入下面命令进行依赖项的安装

gem install bundler
bundle install

输入下面的命令来安装Octopress的默认主题

rake install

到此所有的安装工作已经结束，输入下面的命令可以在本地进行预览。

rake preview

预览效果如下：

解决中文问题

如果博客中包含中文，需要进行如下设置：

1.在环境变量中设置下面的键值对

LANG=zh_CN.UTF-8
LC_ALL=zh_CN.UTF-8

2.含有中文的文件需要保存为UTF-8无BOM格式编码。

3.在Ruby的安装路径找到文件convertible.rb

C:\Ruby193\lib\ruby\gems\1.9.1\gems\jekyll-0.12.0\lib\jekyll\convertible.rb

将27行修改为：self.content = File.read(File.join(base, name), :encoding => 'utf-8')

在Octopress中添加文章

使用下面命令可以在Octopress中添加文章

注意，rake new_post[‘my first octopress blog’]中的my first octopress blog 并不是博客标题，而是和生成的文件名以及url地址有关，该名称不支持中文。博客标题可以在生成的markdown文件中修改。生成的markdown文件在octopress/source/_posts目录中。

编辑markdown文件，将标题可以修改为中文标题，还可以设置分类等信息以及编写正文部分