程序员

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 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里

{% 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/         #图片目录
泡在网上的日子
每天进步一点点
0

粉丝

0

关注

0

获赞

0

访问

推荐文章