Octopress, Other

基于Github和Octopress搭建属于自己的博客

Blog Based on Github & Octopress

前言

从小我就相信“好记性不如烂笔头”这句谚语，所以搭Blog想法在我的脑海中已经酝酿了很久。刚工作那会就想利用Blog来记录工作中所积累的知识，对此我也进行了一些尝试，但最终因为国内的一些博客站点糟糕的排版、设计、代码高亮等等各种原因而放弃了。之后的一段时间由于工作忙碌、其他各种事情以及犯懒的缘故一直没有把这件事情落实下来。最近在项目进行的过程中发现自己对之前碰到过的一些技术问题的记忆逐渐变得模糊起来，于是才把搭建Blog这件事情重新提上了日程。经过一番Google之后我发现现在的程序猿们都偏向于Octopress这个开源的框架加上Github Pages服务来搭建Blog，看上非常的高大上，排版、代码高亮都做得非常棒，以Markdown写Blog的方式也非常符合我的日常工作习惯，于是决定立马付诸行动。

安装Octopress

这里是Octopress的官方指南，各位可以按照其中的步骤进行安装，下面的文字只是记录了我个人的安装过程，可以为大家提供一些参考。

由于Octopress的使用需要Ruby，于是搭环境就这条路上的第一只拦路虎。Ruby版本繁多并且版本之间向下兼容做的不好，所以基于Ruby所做的框架大多要求特定版本的Ruby才能正常运行。

Octopress要求的是Ruby1.9.3，MacOSX自带的Ruby版本是2.x的，所以需要利用一些工具来安装低版本的Ruby。Octopress的官方指南推荐使用的是RVM和rbenv，可以根据需要选择使用需要的工具。

安装rbenv

在第一次安装octopress（OSX 10.10时代）的过程中我首先使用了RVM，但碰到了一些莫名的问题无法解决，最后还是使用了rbenv。

这里我使用Homebrew来安装rbenv，如果你没有Homebrew，打开终端，使用以下命令安装吧。

1

$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

有了Homebrew就可以安装rbenv了

1
2
3

$ brew update
$ brew install rbenv
$ brew install ruby-build

用rbenv安装Ruby

使用rbenv安装1.9.3版本的ruby，一开始我安装的是1.9.3-p0的版本，但出现了一些错误，在搜素如何解决的过程中发现@Peter潘在blog中写到可以尝试用1.9.3-p125，经过尝试成功的安装上了Ruby1.9.3-p125

安装完成后可以用ruby —version进行验证

1
2
3
4

$ rbenv install 1.9.3-p125
$ rbenv local 1.9.3-p125
$ rbenv rehash
$ ruby --version #ruby 1.9.3p125 (2012-02-16 revision 34643)

安装RVM

在第二次安装octopress（OSX 10.11时代）的过程中依照之前的经验使用rbenv，但却怎么也安不上需要的ruby版本，最后换回了RVM。。

安装octopress官方提供的安装方法

1

$ curl -L https://get.rvm.io | bash -s stable --ruby

用RVM安装Ruby

使用rvm安装1.9.3版本的ruby，我依照之前的经验安装1.9.3-p125的版本，但在编译时出现了一些错误，继而尝试了评论中@lance_lan提到得1.9.3-p551版本才安装成功。

1
2
3
4

$ rvm install ruby-1.9.3-p551 --with-gcc=clang
$ rvm use 1.9.3-p551
$ rvm rubygems latest
$ ruby --version #ruby 1.9.3p551 (2014-11-13 revision 48407)

安装Octopress

安装Ruby完成后就按照官方指南安装Octpress

1
2
3
4
5
6
7
8
9
10
11

#clone octopress
$ git clone git://github.com/imathis/octopress.git octopress
$ cd octopress

#安装依赖
$ gem install bundler
$ rbenv rehash  # 如果你刚才用了rbenv
$ bundle install

#安装octopress默认主题
$ rake install

部署

接下来需要把Blog部署到github上去，第一步要做的是去github创建一个username.github.io的repo，比如我的就叫msching.github.io。

然后运行以下命令，并依照提示完成github和Octopress的关联

1

$ rake setup_github_pages

创建博客

生成博客

1
2

$ rake generate
$ rake deploy

把生成后的代码上传到github

1
2
3

$ git add .
$ git commit -m 'create blog'
$ git push origin source

完成后等待一段时间后就能访问http://username.github.io看到自己的博客了

修改配置

配置文件路径为~/octopress/_config.yml

1
2
3
4
5
6
7
8
9
10
11

url:                # For rewriting urls for RSS, etc
title:              # Used in the header and title tags
subtitle:           # A description used in the header
author:             # Your name, for RSS, Copyright, Metadata
simple_search:      # Search engine for simple site search
description:        # A default meta description for your site
date_format:        # Format dates using Ruby's date strftime syntax
subscribe_rss:      # Url for your blog's feed, defauts to /atom.xml
subscribe_email:    # Url to subscribe by email (service required)
category_feeds:     # Enable per category RSS feeds (defaults to false in 2.1)
email:              # Email address for the RSS feed if you want it.

编辑完成后

1
2
3
4
5
6
7

$ rake generate

$ git add .
$ git commit -m "settings" 
$ git push origin source

$ rake deploy

安装第三方主题

Octopress有许多第三方主题可以选择，首先在这里上寻找喜欢的主题，点击进入对应主题的git，一般在readme上都会有安装流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#这里以安装allenhsu定制的greyshade主题为例，原作者是shashankmehta
$ git clone git@github.com:allenhsu/greyshade.git .themes/greyshade

#Substitue 'color' with your highlight color
$ echo "\$greyshade: color;" >> sass/custom/_colors.scss 

$ rake "install[greyshade]"
$ rake generate

$ git add .
$ git commit -m "theme" 
$ git push origin source

$ rake deploy

定制第三方主题

使用第三方主题也并非是一个“拎包入住”的过程，其中必然会有一些需要定制的地方。定制的过程中会涉及一些web相关的知识，但对于各位来说应该都并非难事。

例如刚安装完greyshade之后我们会发现左边navigation上的About me是指向作者的个人主页，我们需要把这个文字连接定向到自己的个人主页上。

这个aboutme对应的html为/source/_includes/custom/navigation.html

1
2
3

<li><a href="/">Blog</a></li>
<li><a href="http://about.me/shashankmehta">About</a></li>
<li><a href="/blog/archives">Archives</a></li>

把其中的http://about.me/shashankmehta替换成需要的url，替换完之后

1
2
3
4
5
6
7

$ rake generate

$ git add .
$ git commit -m "theme" 
$ git push origin source

$ rake deploy

支持中文标签

目前版本的Octopress会在/source/blog/categories下创建一个index.markdown来作为分类的首页，但这个首页在标签有中文时会出现无法跳转的情况，原因是因为在出现中文标签时Octopress会把文件的路径中的中文转换成拼音，而在Category跳转时是直接写了中文路径，结果自然是404。解决方法是自己实现一个分类首页并处理中文。

首先按照这里的方法实现index.html

将plugins/category_list_tag.rb中的

1

category_url = File.join(category_dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase)

替换成

1

category_url = File.join(category_dir, category.to_url.downcase)

这样你的博客就可以支持中文标签的跳转了。

写博客

经过上面几部后，博客已经成功搭建，现在就可以开始写博文了。

创建博文

1
2
3
4
5
6
7

#如果用的是终端
$ rake new_post['title']

#如果用的是ZSH
$ rake "new_post[title]"
#或者
$ rake new_post\['title'\]

生成的文件在~/source/_posts目录下

编辑博文

1
2
3
4
5
6
7
8
9
10
11

#...markdown写博文

$ rake preview #localhost:4000

$ rake generate

$ git add .
$ git commit -m "comment" 
$ git push origin source

$ rake deploy

参考资料



原创文章，版权声明：自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0

Comments