Octopress博客搭建(原创) - 陈斌彬的技术博客

小引

最近看到 Octopress 博客系统是一种号称是 hacker 风格的博客系统 (A blogging framework for hackers)，自己很感兴趣，想通过搭建独立博客，记录自己工作上的点点滴滴，分享自己的一些心得体会。第一次搭建个人独立博客，网上查了不少资料，自己走一遍还是免不了走弯路，在这里分享下我创建博客的一些经验。本博文配置环境是用 iMac。

搭建步骤

1.github 的注册和配置
2.安装 Octopress
3.将 Octopress 博客部署到 github 上
- 3.1 Rake 常用命令
4.Octopress DIY 定制
- 4.1添加侧边栏文章分类
- 4.2添加社会化评论
- 4.3修改导航栏,添加 about 页面
- 4.4添加个人二维码
- 4.5添加社会化分享
- 4.6文章只显示部分正文
- 4.7添加百度统计或CNZZ统计
- 4.8安装第三方主题
- 4.9添加地图名片
- 4.10添加有道翻译API
5.写博流程
6.Octopress 优化
- 6.1替换Google JS公共库
- 6.2去掉Twitter
- 6.3删除 Google font
- 6.4搜索优化
- 6.5使用InstantClick提升链接打开速度
7.细节注意
8.小结

1.github的注册和配置

创建仓库

登录github网站，注册一个用户，例如superman。

创建一个仓库，必须命名为username.github.io/username.github.com，

例如superman.github.io/superman.github.com

使用github密匙

配置用户名和密码

git config --user.name  "xxx用户名"
git config --user.email "xxx@mail.com"

终端输入

ssh-keygen -t rsa   #生成密匙对，id_rsa文件自己保存好

然后一直按 Enter 默认即可。将生成的 id_rsa.pub 打开后复制内容到 github 的 key 里面，title 不用填

终端输入

  ssh-add ~/id_rsa
  ssh -T git@github.com

如下结果

Hi xxx!You've successfully authenticated, but GitHub does not provide shell access.

则可以上传文件到 github 上了。

2.安装Octorpress

git clone git://github.com/imathis/octopress.git octopress

打开 Octopress 文件夹，找到 Gemfile 文件，修改第一行为 http://ruby.taobao.org ，用国内淘宝镜像，否则像我开始一样，安装依赖包没完没了的。

gem sources -l
gem sources -r https://rubygems.org    #删除 http://rubygems.org
gem sources -a http://ruby.taobao.org  #添加 http://ruby.taobao.org
cd octopress
gem install bundler
bundle install
rake install  #安装 octopress默认主题

上面步骤顺利完成后，终端输入

rake new_post["Welcome"]

生成新文章会放在/octopress/source/_post目录下面，然后执行

rake generate 
rake preview

浏览器打开 http://localhost:4000/或者 http://127.0.0.1:4000/ 可以看到预览效果。

3.将 Octopress 博客部署到 github 上

终端输入

rake setup_github_pages

会提示你输入 github项目的Url路径，这个通过在 github 的项目右下方找到。例如 git@github.com:superman/super.github.io.git

执行

git add .   #注意add后面不要漏了 "."号
git commit -m "first commit"
git push origin source   
rake deploy #rake deploy 会直接 push Octopress目录中 master 分支

3.1 Rake 常用命令

4.Octopress DIY 定制

4.1 添加侧边栏文章分类

1.在 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)

2.把下面内容添加到source/_includes/asides/category_list.html文件

<section> 
  <h1>文章分类</h1> 
  <ul id="categories"> 
    {% category_list %}  
    </ul> 
</section>

3.修改_config.yml文件，用 command+f 找到default_asides，然后添加asides/category_list.html，值之间以逗号隔开。

default_asides: [asides/category_list.html, asides/recent_posts.html]

4.2添加社会化评论

方法一：利用 Disqus，这种方法添加简单，但是由于 Disqus 是国外的，所以加载很慢，我实践后推荐还是使用多说，至于国内还有很多社交评论系统，比如友言，评论啦、贝米Baye.me。。。我就没去尝试了，但是步骤也是差不多的。

步骤：

1.登录 Disqus，创建一个账号，然后点击 Add Disqus to your site，输入 Site name ，例如 boy，然后点击 Finish registration。这里页面会自动生成shortname，记起来，待会有用。

2.打开_config.yml文件，找到

# Disqus Comments 
disqus_short_name:  
disqus_show_comment_count: false

设置 disqus_short_name 为刚刚创建的 Disqus 生成的 shortname，例如 boy，

把false改为true。特别注意，冒号后面要空出一个空格。

方法二：添加多说。用微博登陆多说，然后创建个人站点。

步骤：

1.在 _config.yml 中添加

# duoshuo comments
duoshuo_comments: true
duoshuo_short_name: yourshortname

2.在 source/_layouts/post.html 中的 disqus代码

 {% if site.disqus_short_name and page.comments == true %} 
      <section>
        <h1>Comments</h1>
        <div id="disqus_thread" aria-live="polite">{% include post/disqus_thread.html %}</div>
      </section>
    {% endif %}

下方添加多说评论模块

{% if site.duoshuo_short_name and site.duoshuo_comments == true and page.comments == true %}
  <section>
    <h1>Comments</h1>
    <div id="comments" aria-live="polite">{% include post/duoshuo.html %}</div>
  </section>
{% endif %}

3.在/source/_includes/post/目录下创建duoshuo.html，添加代码

<div class="ds-thread" data-title="{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}"></div>

    <script type="text/javascript">
      var duoshuoQuery = {short_name:"{{ site.duoshuo_short_name }}"};
      (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>

4.修改_includes/article.html 文件，在

 {% if site.disqus_short_name and page.comments != false and post.comments != false and site.disqus_show_comment_count == true %}
         | <a href="{% if index %}{{ root_url }}{{ post.url }}{% endif %}#disqus_thread">Comments</a>
        {% endif %}

下面添加如下代码

 {% if site.duoshuo_short_name and page.comments != false and post.comments != false and site.duoshuo_comments == true %}
          | <a href="{% if index %}{{ root_url }}{{ post.url }}{% endif %}#comments">Comments</a>
         {% endif %}

4.3修改导航栏,添加 about 页面

导航栏的setting在source\_includes\custom\navigation.html

我们可以将 Blog 和 Archives 修改为首页和归档，也可以在此添加一个标签页，此时应使用命令rake new_page['about']创建一个页面，页面路径为source\about\index.markdown;

修改后的文件如下：

<ul class="main-navigation"> 
  <li><a href="/">首页</a></li> 
  <li><a href="/blog/archives">归档</a></li> 
  <li><a href="/about">关于</a></li> 
</ul>

4.4添加个人二维码

在侧边栏显示二维码，下载插件，点击这里，将 qrcode.html 放入 source/_includes/custom/asides/ 中，在 _config.yml 中default_asides 添加 custom/asides/qrcode.html。然后打开qrcode.html，做image src的修改.或者将 qrcode.html 代码添加到你想展示的页面的HTML文件中亦可。

4.5添加社会化分享

在www.addthis.com上获取分享按钮代码，粘贴到 source/_includes/post/sharing.html 中，例如我的代码如下：

<div class="sharing">
  <!-- AddThis Button BEGIN -->
  <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
      <a class="addthis_button_sinaweibo"></a>
      <a class="addthis_button_facebook"></a>
      <a class="addthis_button_twitter"></a>
      <a class="addthis_button_google_plusone_share"></a>
      <a class="addthis_button_delicious"></a>
      <a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a>
  </div>
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=undefined" async="async"></script>
  <!-- AddThis Button END -->
</div>

4.6文章只显示部分正文

在文章的后面添加即可，首页就只会显示部分正分，而且会在文章尾部添加 Read On超链接，如果要更改超链接内容，可以在 _config.yml中找到 Read On，然后修改为“继续阅读”。

4.7添加百度统计或CNZZ统计

到百度统计或 CNZZ 统计上注册账号，然后添加脚本文件到 source/_includes/custom/footer.html 文件中。

这里我到 CNZZ 注册账号，登录进去后添加站点 http://cnbin.github.io，

复制任一一种形式的代码，粘贴到source/_includes/custom/footer.html中

如下图所示：

<p>
  Copyright &copy; 2017 - 陈斌彬 -
  <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>

    <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1255152795'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1255152795%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));</script>
</p>

此处我开启带“带数据显示”

效果显示：

4.8安装第三方主题

比较常见的有slash主题。Slash is a minimal theme for Octopress.

执行指令：

$ cd octopress
$ git clone git://github.com/tommy351/Octopress-Theme-Slash.git .themes/slash
$ rake install['slash']
$ rake generate

4.9添加地图名片

打开 http://api.map.baidu.com/mapCard/setInformation.html，填入相关信息，如图所示：

确定后，提交

在 source/_includes/asides 目录下添加 map.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <iframe width="224" height="621" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://j.map.baidu.com/jVhl4"></iframe>
</head>
<body>

</body>
</html>

保存后，修改_config.yml文件，用 command+f 找到default_asides，然后添加asides/category_list.html，值之间以逗号隔开。

default_asides: [asides/category_list.html, asides/recent_posts.html,asides/map.html]

4.10添加有道翻译API

打开网址http://fanyi.youdao.com/openapi?path=web-mode

打卡octopress/source/_layouts/目录下的post.html文件，

底部添加复制的代码：

实现效果

5.写博流程

Octopress 博文必须存储在source/_posts目录下，并且需要按照Jekyll的命名规范对文章进行命名：YYYY-MM-DD-post-title.markdown。文章的名字会被当做url的一部分，而其中的日期用于对博文的区分和排序。创建和部署博文的一个完整流程：

$ rake new_post["New Post"]
$ rake generate
$ git add .
$ git commit -am "add comment here." 
$ git push origin source
$ rake deploy

6.Octopress 优化

6.1替换Google JS公共库

Octopress 默认使用的是 Google 的 JS 公共库地址，加载的过程特别的慢。所以我们要把它改为百度的 JS 公共库，需要把/source/_includes/head.html 文件中的 Google 公共库地址改为：

把 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

改成

<script src="//libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

6.2去掉Twitter

把在根目录下的 _config.yml文件中 Twitter 内容给注释掉。

# Twitter
#twitter_user:
#twitter_tweet_button: true

把 \source\_includes\after_footer.html 文件中的 Twitter 内容给注释掉：

6.3删除 Google font

把在\source\_includes\custom\head.html 中的Google font样式给删除：

<link href="//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

6.4搜索优化

为了让自己搭建的博客更容易被搜索引擎搜到，最好将网站地址提交给各大搜索引擎，下面有两个连接搜集了各个搜索引擎的网站提交入口：

http://urlc.cn/tool/addurl.html
http://tool.lusongsong.com/addurl.html

我也刚刚搭建，加了百度和 google 的，过段时间看搜索关键字的时候自己的博客能排名到什么程度。

实际上我们还必须为自己写的文章添加关键字，才能更好地被引擎搜到，在创建一篇新文章的时候，生成的 makedown 文件包含以下内容，以本文举例：

---

layout: post
title: "Octopress博客搭建"
date: 2015-05-18 14:12:37 +0800
comments: true
categories: Octopress

---

实际上我们还可以为其添加以下几项，以本文举例：

tags: [octopress,seo]
keywords:  octopress, analytics
description: 如何搭建Octopress博客

6.5使用InstantClick提升链接打开速度

下载instantclick.js，放到 octopress的_source/javascripts/ 目录中

curl http://instantclick.io/instantclick.min.js -o octopress的_source/javascripts/instantclick.min.js

Step1: Download the .js package from : http://instantclick.io

Step2: Add the .js package to octopress/source/javascripts/instantclick.min.js

Step3: Add these two line of code in octopress/source/_includes/custom/after_footer.html

<script src="instantclick.min.js" data-no-instant></script>  
<script data-no-instant>InstantClick.init();</script>

参考：http://www.tuicool.com/articles/6F7NVb, https://github.com/dieulot/instantclick

7.细节注意

1.侧边栏的 DIY 定制一般都是新建一个 xxx.html 文件，放在source\_includes\custom\asides目录下，然后文件模板必须为：

    <section>
     <h1>xxx</h1>
     <!--添加代码-->
    </section>

然后在 _config.yml文件中，找到default_asides数组，添加custom/asides/xxx.html 。侧边栏的排序就根据数组的排序进行 DIY。

2.在使用 Mou 写文章时，由于 tab 键无法使用，可替换为 command+f。

3.上传图片时，可以把图片上传到微博，然后复制图片网址，这样就可以免费分享了。

4.当文章有多个标签时候，执行 rake generate会出现下面情况

AppledeiMac:octopress apple$ rake generate
##Generating Site with Jekyll
    write source/stylesheets/screen.css
Configuration file: /Users/apple/octopress/_config.yml
            Source: source
       Destination: public
      Generating...
  Liquid Exception: comparison of Array with Array failed in _layouts/page.html

解决办法是，在source/_includes/custom/asides/tags.html中把limit参数去掉。另外，如果执行 rake generate出现

Build Warning: Layout 'nil' requested in tags/octopress/atom.xml does not exist.
     Build Warning: Layout 'nil' requested in tags/ios/atom.xml does not exist.

直接忽略即可，这是因为2.0版本的 Octopress 调用 generate 操作会执行 plugings 中的所有插件。看来我很幸运，这两个坑都被我遇到了。

5.不能在 Zsh 中输入命令的问题

Octopress 提供了许多 Rake 任务，可以方便地完成一些操作。常用的命令是 rake new_post[“title”]。但是在 Zsh 下，输入这样的命令，会提示错误：

zsh: no matches found: new_post[...]

原因是诸如 [] 之类的不是正确的命令字符。当然，我们也可以使用转义符来解决这一问题。但每次都需要敲入转义符，实在是太麻烦了。解决方案是在 ~/.zshrc 文件下，加入这样一行内容：

alias rake="noglob rake"

这个问题是我后来在使用 Zsh 的时候碰到的，所以在这里补充一下。

8.小结

通过这次搭建独立博客，对 iMac 环境下如何使用 git 指令来创建仓库，修改和提交文件，用 Mou 来写 Markdown 文章，还有学到了如何用多说来添加评论，用 addthis 添加社会化分享，访客地图，使我对学到互联网上的知识有了一个实际的应用，加深我对互联网的一种热爱，同时也让我了解到互联网上还有很多让我好奇的东西。