Octopress博客搭建和个性化配置

Attention:oschina的博客系统貌似不支持markdown写做,本博文原版请访问这里


使用octopress搭建博客的人,大概都会喜欢写关于如何搭建配置octopress的文章。由于它的高定制性,为极客们带来不少乐趣。从首页的配置,到分类,评论,我的信息,社会化分享等的配置,内容繁多。并且这是我第二次搭建octopress环境了,发现上一次的配置有一部分不能clone到本机上。所以,把配置的过程记录下来是十分有必要的。
个人意愿是记录配置的过程,顺便整理大牛们关于这方面的一些说明。网络上相关资料有不少,没有实践过的没有摘录在这里。全部的代码实现都是直接引用前辈们的。另外,本博的配置环境是linux fedora 18. html

octopress官方网站

octopress的配置均可以在官网上找到。事实上,遇到问题查询官网文档是最有效率的方法。 linux

github的设置

建立仓库

登录github网站,注册一个用户,假设为grunmin。
建立一个仓库,命名为username.github.com,例如grunmin.github.com git

使用密钥登录github

[[ -f ~/.ssh/id_rsa.pub ]] || ssh-keygen -t rsa     #生成密钥对

按默认一直确认便可。
在github账号设置里找到ssh的设置,添加一个ssh key。
进入~/.ssh/找到id_rsa.pub文件,把里面的内容填到key里,title不填。
这样作的好处是以后push到仓库上时能够不用输入密码。 github

安装ruby

查看ruby版本 vim

ruby --version  # 必须显示1.9.3

安装方法: 浏览器

curl -L https://get.rvm.io | bash -s stable --ruby
rvm install 1.9.3
rvm use 1.9.3
rvm rubygems latest

如有显示命名未找到,直接下载安装便可。 ruby

安装octopress

在安装octopress以前,确保已安装git。 bash

git clone git://github.com/imathis/octopress.git octopress
cd octopress
gem install bundler
bundle install
rake install

这里容易出现三个问题:
一、已安装rvm和bundler,但显示找不到命令。 markdown

用绝对路径:/home/username/.rvm/bin/rvm /home/username/.rvm/bin/bundler
二、执行bundler install时显示:GemfileNotFound error? 网络

可能在安装的过程当中退出了octopress目录,进入后执行便可。
三、执行rake install时显示

rake aborted!
No Rakefile found (looking for: rakefile, Rakefile, rakefile.rb, Rakefile.rb)

同理,进入安装目录便可。

将博客部署到github上

rake setup_github_pages

此时会要求输入仓库的url,能够在github仓库内容业的右下角找到。
例如个人是git@github.com:grunmin/grunmin.github.com.git
成功后便可用

rake new_post["title"]

生成新文章,文章在source/_post/目录下,文件名构成为时间和标题的拼音。以后执行

rake generate
rake preview

此时能够预览(浏览器打开localhost:4000可看到效果。)若是没有问题,则执行

rake deploy 
git add .
git comment -m "comment"
git push origin source

保存到仓库。
须要注意的是执行git命令时应处于octopress目录,而且checkout到source分支,

cd octopress
git checkout source
git add .
git commit -m "comment"
git push origin souce

重新电脑上恢复博客内容:

找到博客仓库的url,执行

git clone -b source (url) octopress   #把source 克隆到本地octopress目录上
cd octopress
git clone (url) _deploy   #克隆master分支,它存放着博客内容。
gem install bundler
bundle install
rake install
rake setup_github_pages

以后操做同上,有问题照葫芦画瓢。

octopress博客的个性化配置

添加文章分类(category)

一、增长category_list插件
将下面的代码写到plugins/category_list_tag.rb

module Jekyll
  class CategoryListTag < Liquid::Tag
    def render(context)
      html = ""
      categories = context.registers[:site].categories.keys
      categories.sort.each do |category|
        posts_in_category = context.registers[:site].categories[category].size
        category_dir = context.registers[:site].config['category_dir']
        category_url = File.join(category_dir, category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase)
        html << "<li class='category'><a href='/#{category_url}/'>#{category} (#{posts_in_category})</a></li>\n"
      end
      html
    end
  end
end

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

二、增长侧边栏
将下面的代码写到source/_includes/asides/category_list.html

<section>
  <h1>Categories</h1>
  <ul id="categories">
    {%raw%}{% category_list %}{%endraw%} 
  </ul>
</section>

修改config.yml文件,找到default_asides:
在中括号内添加 `asides/category
list.html`

添加的位置决定在页面显示的位置,注意用逗号隔开。
用vim编辑器粘贴的话可能会自动缩进,启用粘贴模式或用其余编辑器便可。

添加社会化评论

octopress 产生静态网页,不支持评论功能,因此咱们用第三方评论系统。好消息是octopress已为咱们配置好了Disqus,咱们只须要稍微填写如下信息便可。
一、首先在Disqus 注册一个账号,点击添加到个人网页,添加站点信息,好比个人grunmin.github.io
二、修改_config.yml文件,找到这一段:

# Disqus Comments 
disqus_short_name: 
disqus_show_comment_count: false

添加你的disqus用户名,并把false修改为true便可。注意冒号后面有空格。
此外,能够用国内的多说系统,速度较快,且比较符合景德镇村民的须要。以前我用的就是这个,可是没有记录配置过程,此次克隆时多说系统没有成功启动,所以不折腾了,有须要的话能够自行谷歌。

导航栏设置

导航栏的设置在source\_includes\custom\navigation.html
咱们能够将Blog和Archives修改成首页和归档,也能够在此添加一个标签页,此时应使用命令rake new_page['about']建立一个页面,页面路径为source\about\index.markdown;
修改后的文件以下:

<ul class="main-navigation"> 
  <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>

持续更新…………

参考文章:

利用Octopress搭建一个Github博客

Ruby开源项目介绍(1):octopress——像黑客同样写博客

为octopress添加分类(category)列表

冯威的学习专栏---记录工做学习点滴

相关文章
相关标签/搜索