原文地址：blog.bibitiger.cn/blog/2016/05/13/makeupoctopress/
引言
Octopress是什么？这在2.0的版本的说明上说的很清楚
Octopress is a framework designed by Brandon Mathis for Jekyll, the blog aware static site generator powering Github Pages.
这就是一个基于Jekyll，用于布置在Github上的静态博客系统，号称(A blogging framework for hackers)
ok，闲话就先扯到这里，由于我的环境是mac，OS X Yosemite 10.10.5，所以windows和Ubuntu的童鞋们可以仅做参考，但是相关ruby和设置，html，css等相关修改都是一样的。
几点基本概念
Octopress和Jekyll还不清楚的，请自行google补脑
- Git 版本管理控制系统，相关操作百度一大堆，之后会在本文使用中给出具体用到的命令，mac自带
- Ruby Octopress实现用的语言，mac本身自带
- Liquid ruby模板语言，主要用于自定义渲染，Jeckyll就是基于这个模板的，如果要修改相关的渲染排版，了解下还是有必要的，Liquid语法可以查看Liquid语法文档
- Github 版本管理系统，公开仓库免费，Github pages用于搭建个人技术博客
- RVM ruby版本管理工具
- RubyGems ruby程序包(Gem)管理器，简单的想象的话就类似于apt-get
- Bundler 管理Gem相依性工具，根据项目中的Gemfile和Gemfile.lock下载安装响应的依赖包
- Rake 构建语言，根据项目中的Rakefile构建项目
开始
安装ruby
octopress要求ruby版本在1.9.3以上，首先我们要查看我们的ruby版本是多少
$ ruby --version
ruby 2.3.0p0 (2015-12-25 revision 53290) [x86_64-darwin14]
如果小于1.9.3的话，那我们就需要更新ruby，rbven和RVM都可以更新下载ruby，这里我们使用RVM。
那首先安装RVM：
$ curl -L https://get.rvm.io | bash -s stable --ruby
安装可能需要一点时间，主要看网络，接下来查看RVM上的ruby版本都有哪些
$ rvm list known
# MRI Rubies
[ruby-]1.8.6[-p420]
[ruby-]1.8.7[-head] # security released on head
[ruby-]1.9.1[-p431]
[ruby-]1.9.2[-p330]
[ruby-]1.9.3[-p551]
[ruby-]2.0.0[-p648]
[ruby-]2.1[.8]
[ruby-]2.2[.4]
[ruby-]2.3[.0]
最新版本已经到了2.3.0了，我是一个喜欢跟新的人，当然了大家可以根据自己的喜好选择1.9.3及以上版本都可以，如果以前就有ruby项目，需要配置gem环境，默认你们都是老鸟了，再此不多阐述。我装的2.3.0，直接上代码吧。
$ rvm install 2.3
$ rvm list
rvm rubies
=* ruby-2.3.0 [ x86_64 ]
# => - current
# =* - current && default
# * - default
$ rvm use 2.3.0
将我们的rubygems也更新到最新
$ rvm rubygems latest
Installed rubygems 2.5.1 is newer than 2.4.8 provided with installed ruby, skipping installation, use --force to force installation.
如果第一次使用gems的话，注意要将gems的源设成淘宝的镜像，墙的原因你懂得
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
安装bundler
$ gem install bundler
ok,ruby相关的安装就这些，下来我们开始安装octopress
安装octopress
mac自带git，所以如果没有git的话，自己先把git装好，这里就不说了
$ git clone git://github.com/imathis/octopress.git octopress //octopress为你想要将octopress部署的本地位置
$ cd octopress/
下载安装octopress的依赖程序包，用到了bundler，可以打开octopress/Gemfile这个文件查看依赖包都是哪些，octopress/Gemfile.lock是bundler记录已经安装了版本的地方，只要两个工程的Gemfile.lock的版本一样就能保证两个工程的依赖包的相关版本都是一致的，用以保证我们工程环境的一致性，多人开发或者工程转移时比较关键。
$ bundle install
使用rake来build我们的octopress
$ rake install
通过查看Rakefile可以看到，rake都干了些什么。这里建议大家最好还是给octopress建立一个project，我用的编辑器是Sublime Text2。我们一起看下上一步具体都在做什么
desc "Initial setup for Octopress: copies the default theme into the path of Jekyll's generator. Rake install defaults to rake install[classic] to install a different theme run rake install[some_theme_name]"
task :install, :theme do |t, args|
if File.directory?(source_dir) || File.directory?("sass")
abort("rake aborted!") if ask("A theme is already installed, proceeding will overwrite existing files. Are you sure?", ['y', 'n']) == 'n'
end
# copy theme into working Jekyll directories
theme = args.theme || 'classic'
puts "## Copying "+theme+" theme into ./#{source_dir} and ./sass"
mkdir_p source_dir
cp_r "#{themes_dir}/#{theme}/source/.", source_dir
mkdir_p "sass"
cp_r "#{themes_dir}/#{theme}/sass/.", "sass"
mkdir_p "#{source_dir}/#{posts_dir}"
mkdir_p public_dir
end
这里其实是可以带一个参数的，这个参数指定一个我们希望用的主题[1]
模板，如果没有指定的话系统自动使用classic主题，我们没有指定主题，所以这里直接使用默认的。
接着拷贝该主题文件夹下的source和sass文件夹内容到octopress的source和sass文件夹，并且创建_posts和public文件夹。
修改_config.yml文件
title: bibitiger的博客 //博客名称，修改成你自己的,下同
subtitle: 把酒言欢. //博客副标题
author: bibitiger //作者
生成博客
$ rake generate
本地预览
$ rake preview
现在可以打开浏览器，在"localhost:4000"预览我们的博客了
安装主题
我使用的是Greyshade,按照下面的操作就可以简单的安装和部署了
$ git clone git@github.com:allenhsu/greyshade.git .themes/greyshade
$ echo "\$greyshade: color;" >> sass/custom/_colors.scss //Substitue 'color' with your highlight color
$ rake install["greyshade"]
$ rake generate
同样我们可以使用“rake preview”来预览
设置头像，头像设置是在octopress/source/_includes/header.html里
<script src="{{ root_url }}/javascripts/md5.js"></script>
<script type="text/javascript">
document.write("![Profile Picture](http://www.gravatar.com/avatar/" + MD5("{{ site.email | downcase }}") + "?s=160)");
</script>
说两种方法
- 一种就是将图片放置到图床上,替换上面代码中的src的内容[2]
�* 还有一种就是本地存放，将头像放到octopress/source/images/中，将src的内容替换成“/images/yours.png”
如果想更好的话就是把这段代码全部替换成一个img的代码，因为我们不需要脚本帮我们组合图片地址，更不需要计算md5码
设置微博的话，我们只需要把下面的代码加入到_config.yml最下方就好了
weibo_user: baronny # 微博数字 ID 或域名 ID
weibo_share: true # 是否开启微博分享按钮
微博域名一般就在这里：微博->个人->设置->个性域名，例如：http://weibo.com.yours，"yours"就是你的域名ID
现在我们就能预览到带有我们头像和信息、微博的微博了，下来我们写第一篇博文吧。
$ rake new_post["your_post"] //your_post是你的博文名
自动生成的博文在octopress/source/_posts里，文件名以当前时间和你输入的博文名组成，例如：“2016-05-13-your-post.markdown”。
现在就可以开始写第一篇博文了
但是我们发现预览的速度很慢，这是由于模板和主题有使用google，Twitter等相关内容，墙的原因。。。
首先将_config.yml里有关google和Twitter的东西都注释掉。然后将所有文件里引用到google公共库的地方都换成国内镜像[3]
,“ajax.googleapis.com/ajax/libs/”和“fonts.useso.com/css?”
将“octopress/source/_includes/custom/navigation.html”里面的内容修改成你想要的，类似于这样
<ul class="main-navigation">
<li><a href="{{ root_url }}/">首页</a></li>
<li><a href="{{ root_url }}/blog/archives">全部文章</a></li>
</ul>
侧边栏显示最新文章在“octopress/source/_includes/asides/”添加“recent_post.html”文件，在里面加入如下代码
<section>
<h2>最新文章</h2>
<ul id="recent_posts">
{% for post in site.posts limit: site.recent_posts %}
<li class="post">
<a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a>
</li>
{% endfor %}
</ul>
</section>
在octopress/source/_includes/header.html最下方加入代码
{% include asides/recent_posts.html %}
并且把octopress/source/_includes/custom/header.html里面的代码都删除
在_config.yml修改“ecent_posts: 2”可以更改最新文章显示的最多条数
侧边栏显示分类，创建“octopress/plugins/category_list.rb”文件，在里面加入如下代码
# encoding: utf-8
module Jekyll
class Site
def create_category_list
write_to_tag_cloud if @config['category_tag_cloud']
# write_to_sidebar if @config['category_sidebar']
end
private
# generate category tag list and write to 'source/_includes/asides/categories_tag.html'
def write_to_tag_cloud
puts ' => Creating Categories Tag Cloud'
lists = {}
max, min = 1, 1
self.categories.keys.sort_by{ |str| str.downcase }.each do |category|
count = self.categories[category].count
lists[category] = count
max = count if count > max
end
html = ''
lists.each do | category, counter |
url = get_category_url category
if counter < 20
setfontsize = 20
else
setfontsize = 80 * (Float(counter)/max)
end
setfontsize = 20 if setfontsize < 20
style = "font-size: #{80 + setfontsize}%"
if @config['category_counter']
html << " <a href='#{url}' style='#{style}'>#{category.capitalize}(#{self.categories[category].count})</a> "
else
html << " <a href='#{url}' style='#{style}'>#{category.capitalize}</a> "
end
end
File.open(File.join(@source, '_includes/asides/categories_tag.html'), 'w') do |file|
file << """{% if site.category_tag_cloud %}
<section>
<h2>#{@config['category_title'] || 'Categories'}</h2>
<span class='categories_tag'>#{html}</span>
</section>
{% endif %}
"""
end
end
# generate category lists and write to 'source/_includes/asides/categories_sidebar.html'
def write_to_sidebar
puts ' => Creating Categories Sidebar'
html = "<ul>\n"
# case insensitive sorting
@categories.keys.sort_by{ |str| str.downcase }.each do |category|
url = get_category_url category
if @config['category_counter']
html << " <li><a href='#{url}'>#{category.capitalize} (#{@categories[category].count})</a></li>\n"
else
html << " <li><a href='#{url}'>#{category.capitalize}</a></li>\n"
end
end
html << "</ul>"
File.open(File.join(@source, '_includes/asides/categories_sidebar.html'), 'w') do |file|
file << """{% if site.category_sidebar %}
<section>
<h1>#{@config['category_title'] || 'Categories'}</h1>
#{html}
</section>
{% endif %}
"""
end
end
def get_category_url(category)
dir = @config['category_dir'] || 'categories'
File.join @config['root'], dir, category.to_url
end
end
class CategoryList < Generator
safe true
priority :low
def generate(site)
puts "CategoryList begin genrate"
if site.config['category_list']
puts "## Generating Categories.."
site.create_category_list
end
end
end
end
创建octopress/source/_includes/asides/categories_tag.html文件，并写入如下代码
{% if site.category_tag_cloud %}
<section>
<h2>分類</h2>
</section>
{% endif %}
在_config.tml里面加入下方代码
# ----------------------- #
# Categories #
# ----------------------- #
# create categories page
category_list: true
# use counter after categories
category_counter: true
# category title
category_title: 分類
# create an include categories list in @source/_includes/asides/categories_sidebar.html
# and don't forget to add 'asides/categories_sidebar.html' into @default_asides if you want to enable it.
category_sidebar: true
# create an include categories tag cloud page in @source/_includes/asides/categories_tag.html
# and don't forget to add 'asides/categories_tag.html' to @default_asides if you want to enable it.
category_tag_cloud: true
在octopress/source/_includes/header.html最下方加入代码
{% include asides/categories_tag.html %}
如果想首页文章不全部显示的话，在想要截止显示的位置加入
<!--more-->
布置到github
首先你需要将你本机的ssh绑定到github上，GithubHelp有详细说明，参照这个就好了。
创建一个自己的仓库，名称为yours.github.com
输入下面命令：
rake setup_github_pages
用来绑定你刚才创建的仓库，要求输入的时候输入你的仓库地址就好了，例如：~~https://github.com/yours/yours.github.com.git~~
输入以下命令部署：
rake generate //生成
reke deploy //提交部署
不要忘了前面说的命令：rake preview可以先本地预览下
source文件夹要单独提交，以防以后迁移使用，使用下方代码就好，放到source分支
git add .
git commit -m "commit source"
git push origin source
大功告成，在浏览器里查看yours.github.com就可以看到我们刚刚创建的博客了
绑定自己的域名
如果没有域名的话，想要一个玩玩的话，推荐去万网,很快就可以申请好，并且几分钟就可以解析完成。不过要是中国区的域名需要实名审核，一般两天内。
域名有了的话，创建一个CNAME的二级域名，并解析，对应到你的github仓库地址，延续上面的话应该是：yours.github.io
创建“octopress/source/CNAME”文件，并向里面写入你刚刚创建的CNAME二级域名，例如：blog.yours.com，不要带http://或者https://之类的。
rake generate
rake deploy
提交成功后，等待十分钟左右，打开网页要是能看见我们自己的博客就大工搞成！！！
octopress结构
├─ config.rb #指定额外的compass插件
├─ config.ru
├─ Rakefile #rake的配置文件,类似于makefile
├─ Gemfile #bundle要下载需要的gem依赖关系的指定文件
├─ Gemfile.lock #这些gem依赖的对应关系,比如A的x本依赖于B的y版本
├─ _config.yml #站点的配置文件
├─ public/ #在静态编译完成后的目录,网站只需要这个目录下的文件树
├─ _deploy/ #deploy时候生成的缓存文件夹,和public目录一样
├─ sass/ #css文件的源文件,过程中会compass成css
├─ plugins/ #放置自带以及第三方插件的目录,ruby程序
│ └── xxx.rb
└─ source/ #站点的源文件目录,public目录就是根据这个目录下数据生成的
└─ _includes/
└─ custom/ #自定义的模板目录,被相应上级html include
└─ asides/ #边栏模板自定义模板目录
└─ asides/ #边栏模板目录
└─ post/ #文章页面相应模板目录
└─ _layouts/ #默认网站html相关文件,最底层
└─ _posts/ #新增以及从其它程序迁移过来的数据都存在这里
└─ stylesheets/ #css文件目录
└─ javascripts/ #js文件目录
└─ images/ #图片目录