作为一个iOS开发的新人，学习过程中看了许多大牛的技术博客，也聆听过多次每一个程序员都应该维护一个个人技术博客之类的教导，按耐不住终于决定开始搭建自己的个人学习博客。

关于动态网站的搭建，需要学习网站前端、服务器端和后台数据库等技术，配合一些大公司提供的云服务，完全可以实现免费搭建自己的网站，当然如果数据或者访问量过大就需要付费来提升服务质量了。

本文想讨论的是另一种看上去反(geng)潮(zhuang)流(bi)的做法，使用静态网页生成工具配合GitHub Pages来搭建个人博客。Jekyll应该是一个比较好的选择，Octopress则是在Jekyll的基础上帮你省去了许多麻烦的配置过程。所以我最终的选择是使用Octopress和GitHub Pages来搭建我个人的学习博客。

Octopress和GitHub Pages的使用都可以去查看官方文档来学习，地址如下：

• Octopress
• GitHub Pages

准备工作

GitHub Pages的创建其实很简单，只需要申请一个GitHub账号，然后创建一个名称为github_username.github.io的代码仓库即可，github_username指的是你GitHub账号的名称，这样你就可以拥有一个域名为github_username.github.io的个人页面了。

Octopress的安装需要以下前提条件：

1. 安装Git
2. 安装Ruby 1.9.3及以上版本

由于使用OS X最新的10.10系统，这两样系统都已经自带安装过了，省去了些许麻烦。

安装Octopress

Octopress的安装过程总结如下：

1
2
3
4
5

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

过程中需要注意的是，可能需要将gem源修改为国内淘宝源。

Ruby和RubyGem相关知识推荐到Ruby China社区的wiki页面进行学习

配置Octopress

安装完成后需要做的就是各种自定义配置工作，此部分工作可能略为繁琐。

首先需要修改的是_config.yml文件，它是Octopress的主配置文件。其中，你可以设置博客网站的标题、副标题、作者姓名等，各项参数具体意义详见官方文档。

需要注意的是，其中3rd Party Settings这部分使用的第三方插件大多为国外服务，可能会造成网站访问延迟过高，比较好的解决办法就是将国外第三方插件服务全部关闭，选用国内同类替代服务产品。本文最后会有详细介绍。

除了主配置文件的修改之外，其他配置工作主要是修改一些自定义模板文件，此部分文件主要存放在source/_includes路径下。

其中需要注意的是source/_includes/head.html和source/_includes/custom/head.html这两个文件，将其中使用的googleapi替换为useso，原因同样是国内访问googleapi会严重影响网站的响应速度。此处感谢360提供的公共库服务，详情请进这里。

其他自定义配置可以根据Octopress的官方文档自行摸索。

部署Octopress

将Octopress部署到GitHub Pages上非常简单，在octopress目录下执行rake setup_github_pages命令，然后输入之前创建的GitHub Pages的项目地址，地址可以使用SSH或HTTPS URL中的任意一种方式。其中，SSH的本机配置详见这里。

之后就可以使用rake deploy命令，将每次写好的博客部署到GitHub Pages上了。

发表博客

在octopress目录下执行rake new_post["文章标题"]命令，会自动在source/_posts目录下产生对应名称的markdown文件（文章标题支持中文，但支持的不是很完美），然后使用任意Markdown编辑软件打开并编写文章即可。我选择的是Mou，如需了解请点这里。

文章写好后，使用rake generate命令可以将markdown文件自动解析成静态网页，使用rake preview命令可以本地预览页面，使用rake deploy命令即可将新文章发表到GitHub Pages的博客上。

高级配置

配置侧边栏

在Octopress中配置侧边栏主要有两步操作，首先在source/_includes/custom/asides目录下新建一个html文件，然后将此文件路径添加到_config.yml文件的default_asides里面，注意文件的添加顺序。

1

default_asides: [custom/asides/about.html, custom/asides/category.html, asides/recent_posts.html]

Octopress要求添加的html文件必须写在<section>之间，并且使用<h1>作为标题。具体格式如下：

1
2
3
4
5

<section>
  <h1>关于我的一些事</h1>
  <p>85后，石油行业工作者，编程爱好者，目前自学iOS开发中。</p>
  <p>新浪微博：<a href="http://weibo.com/u/3194218471/" target="_blank">我是乔</a></p>
</section>

在侧边栏中显示文章分类

新版本的Octopress默认已经支持文章分类的生成，只要在每篇文章头部的categories声明里填写分类名称即可。

如果想将文章分类显示到侧边栏中，做法参见上面的侧边栏配置。只不过在新建的category.html文件中，应填写如下代码：

1
2
3
4
5
6
7
8
9
10
11

// 下面代码中大括号是全角的，如果复制，请自行改为半角
<section>
  <h1>文章分类</h1>
  <ul id="categories">
    ｛% for category in site.categories %｝
      <li class="category">
        <a>｛｛ category | first | category_link ｝｝ (｛｛ category | last | size ｝｝)</a>
      </li>
    ｛% endfor %｝
  </ul>
</section>

网上能搜索到的为Octopress添加分类功能的文章大多已经过时，还是推荐使用此段代码。

分享、评论功能

作为个人博客，分享和评论功能还是非常需要的，Octopress默认提供的全部都是国外服务，比如Facebook、Twitter、Google Plus、Disqus Comments等，不是很适合国内使用，接下来我们使用国内的分享、评论插件来替换。这里我选择的是JiaThis和友言。

具体的添加过程也比较简单，我是参考了唐巧大神的这篇博客： 像写程序一样写博客：搭建基于github的博客。

• 首先，在_config.yml文件中增加一项：weibo_share: true
• 修改source/_includes/post/sharing.html文件，增加如下代码：

1
2
3
4

// 下面代码中大括号是全角的，如果复制，请自行改为半角
｛% if site.weibo_share %｝
  ｛% include post/weibo.html %｝
｛% endif %｝

• 访问JiaThis，获取分享功能代码
• 访问友言，获取评论功能代码
• 将以上两步的代码都加入到weibo.html中即可

写在最后

终于完成了个人学习博客的搭建，整个过程自己研究了三天之久，当然收获也是不少，基本全写在这篇文章里了。

接下来的时间会将自己iOS开发的学习过程记录下来，作为自己复习总结的一个过程，也作为一份分享留给大家，希望写博客真像那些大牛们说的一样，能给自己带来一份快乐和满意。

最后的最后，推荐另外一篇唐巧大神的博客： 将博客从GitHub迁移到GitCafe。