github Pages上部署octopress个人博客

原文地址: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补脑

  1. Git 版本管理控制系统,相关操作百度一大堆,之后会在本文使用中给出具体用到的命令,mac自带
  2. Ruby Octopress实现用的语言,mac本身自带
  3. Liquid ruby模板语言,主要用于自定义渲染,Jeckyll就是基于这个模板的,如果要修改相关的渲染排版,了解下还是有必要的,Liquid语法可以查看Liquid语法文档
  4. Github 版本管理系统,公开仓库免费,Github pages用于搭建个人技术博客
  5. RVM ruby版本管理工具
  6. RubyGems ruby程序包(Gem)管理器,简单的想象的话就类似于apt-get
  7. Bundler 管理Gem相依性工具,根据项目中的Gemfile和Gemfile.lock下载安装响应的依赖包
  8. 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 [email protected]: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里

{% raw %}
<script src="{{ root_url }}/javascripts/md5.js"></script>
    <script type="text/javascript">
        document.write("<img src='http://www.gravatar.com/avatar/" + MD5("{{ site.email | downcase }}") + "?s=160' alt='Profile Picture' style='width: 160px;' />");
    </script>
{% endraw %}

说两种方法

  • 一种就是将图片放置到图床^2上,替换上面代码中的src的内容 * 还有一种就是本地存放,将头像放到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”里面的内容修改成你想要的,类似于这样

{% raw %}
<ul class="main-navigation">
  <li><a href="{{ root_url }}/">首页</a></li>
  <li><a href="{{ root_url }}/blog/archives">全部文章</a></li>
{% endraw %}
</ul>

侧边栏显示最新文章_“octopress/source/includes/asides/”添加“recent_post.html”文件,在里面加入如下代码

    {% raw %}
    <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>
    {% endraw %}

_octopress/source/includes/header.html最下方加入代码

{% raw %}{% include asides/recent_posts.html %}{% endraw %}

并且把_octopress/source/includes/custom/header.html里面的代码都删除

_config.yml修改“ecent_posts: 2”可以更改最新文章显示的最多条数

侧边栏显示分类,创建“octopress/plugins/category_list.rb”文件,在里面加入如下代码

{% raw %}
# 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
{% endraw %}

创建_octopress/source/includes/asides/categories_tag.html文件,并写入如下代码

_config.tml里面加入下方代码

_octopress/source/includes/header.html最下方加入代码

    {% raw %}{% include asides/categories_tag.html %}{% endraw %}

如果想首页文章不全部显示的话,在想要截止显示的位置加入

<!--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/         #图片目录