安装git, 建立Octopress博客

本文参考了若干网络日志（谢过~）, 配置个人博客后整理而成

安装git 

1
2

yum -y install git
git --version

在本机使用git创建SSH Key

1
2

ssh-keygen -C "username" -t rsa  
ssh -v git@github.com

//if denied, use ssh-add ~/.ssh/id_rsa to fix this.
备注: useremail为你注册github用户时的邮箱地址 这时，在系统目录下就会生成一个.ssh文件夹，里面为对应的SSH Key，其中id_rsa.pub是Gighub需要的SSH公钥文件。 将id_ras.pub文件里内容拷贝到Github的Account Settings里的key中。 这样你就可以直接使用Git和Github了.

安装ruby 

1
2
3
4
5
6
7

wget ftp://ftp.ruby-lang.org/pub/ruby/2.1/ruby-2.1.0.tar.gz  
tar -zxvf ruby-2.1.0.tar.gz
cd ruby-2.1.0
./configure --prefix=/usr/local/ruby
make
make test
make install

安装OctoPress

通过Git从Github上克隆一份Octopress

1
2
3
4

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

安装Octopress默认的Theme

1

rake install

//if error: rake aborted!
//You have already activated rake 10.1.0, but your Gemfile requires rake 0.9.2.2. delete your Gemfile.lock and edit the version of rake specified in your Gemfile to 10.1. Job done

通过_config.yml来配置博客

创建一个博客

1

rake new_post["Hello World"]

创建一个博客页面

1

rake new_page["blog"]

预览效果：

1
2

rake generate  
rake preview

然后在浏览器中打开http://localhost:4000

发布Octopress到Github

1
2
3

cd octopress  
rake setup_github_pages  
Repository url: git@github.com:username/username.github.com.git

将博客发布到Github上，输入下面命令：

1

rake deploy

这样，生成的内容将会自动发布到master分支，并且可以使用 http://username.github.com 访问内容。

将source提交：

1
2
3

git add .  
git commit -m "blog init"  
git push origin source

删除之前的添加信息 (配置文件在 ~/octopress/.git/config)

1
2

git remote rm origin  
git remote add origin git@github.com:username/username.github.com.git

添加多说评论

在_config.yml尾部添加如下行：

1
2

# Duoshuo Comments  
duoshuo_show_comment_count: true

在source/_layouts/post.html尾部添加如下代码：

1
2
3
4
5
6

创建source/_includes/post/duoshuo.html文件，将从多说获得的代码放入其中。

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

<!-- Duoshuo Comment BEGIN -->
    <div class="ds-thread"></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"username"};
  (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.src = 'http://static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0] 
      || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- Duoshuo Comment END -->

将AddThis更换为JiaThis

打开source/_includes/post/sharing.html，注释掉<div class="share">...</div>中的AddThis相关语句,然后在</div>前加入从JiaThis获得的代码。

Octopress写作

1
2

cd octopress  
rake new_post["new blog"]

another pc

1
2
3

git clone -b source git@github.com:username/username.github.com.git octopress  
cd octopress  
git clone git@github.com:username/username.github.com.git _deploy

增加category_list插件

保存以下代码到plugins/category_list_tag.rb：

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

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)

将category加入到侧边导航栏，需要增加一个aside 复制以下代码到source/_includes/asides/category_list.html。

1
2
3
4
5
6

<section>
  <h1>文章分类</h1>
  <ul id="categories">
    
  • ftp (1)
    • 

  • hibernate (1)
    • 

  • java (6)
    • 

  • linux (2)
    • 

  • mongodb (2)
    • 

  • mysql (1)
    • 

  • tech (16)
    • 

  • tomcat (1)
    • 

  • web (2)
    • 

  • 代码 (3)
    • 

  • 其他 (1)
    • 

  • 架构 (1)
    • 

  • 生活 (7)
    • 

  • 算法 (1)
    • 

  • 职业 (2)
    • 

  • 设计模式 (1)
    • 

  • 读书 (3)
    • 

      </ul>
</section>

    配置侧边栏需要修改_config.yml文件，修改其default_asides项： default_asides: […, asides/category_list.html, …]

    中文分类支持

    侧边栏添加了文章分类后，英文分类没有问题，点击打开是分类下的文章列表；但中文分类，如云计算、设计模式之类就不行了，网上有各种解决办法，复杂了点；而且我发现新建日志的文件名如果是中文则会转成拼音，文章分类也是，你可以看下public/blog/categories下的文件名；所以如果能把边栏的链接地址改成拼音就行了，rakefile里有rake new_post代码；查看分析发现和plugins/category_list_tag.rb的处理类似，
    category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase是转换为单词‘-’分隔并且小写，rakefile里是 mkdir_p "#{source_dir}/#{posts_dir}" filename = "#{source_dir}/#{posts_dir}/#{Time.now.strftime('%Y-%m-%d')}-#{title.to_url}.#{new_post_ext}"
    注意:title多了.to_url，原来如此，将category_list_tag.rb里改成
    category.gsub(/_|\P{Word}/, '-').gsub(/-{2,}/, '-').downcase.to_url， 然后rake generate rake preview
    done！

    原文地址： http://wangchaoqun.cn/blog/2013/01/an-zhuang-git-create-octopress-blog.html/
     written by  wang chaoqun  posted at  http://wangchaoqun.cn