人生若只如初见，都恨太晚

据说有博客的人比没博客人的薪水要高很多，相传写博客也是一个高手的标配，虽然之前一直有在写（在这里），但是孤既不是高手，薪水还比别人少。之前一直在CSDN上面写博客，那是一个不错的社区，里面有些牛人，博客也有不错的流量，也没少参与CSDN举办的活动，获得了几本过时的技术书，但是仍感觉不爽，最痛苦的就是编辑，CSDN的在线编辑器做的不咋地，不太好用，而且经常写着写着就不动了，再刷新就啥都没了，试想下写了一下午的代码，突然死机，再打开什么都没了会是什么心情。后来就在本地写，然后粘到编辑器中，但是格式化又是一个很头疼的事情，经常是写完后要花个把小时来搞格式。再后来就用HTML写，然后把源码粘到编辑框里，也还是有格式的问题。再后来，去年一年都没怎么写，主要的原因还是一直感觉写出来的东西没有太多的干货，一心想憋出个高质量的东西来，但是肺都憋炸了，也没憋出来。

直到，后来发现了Github Pages，大有，人生若只如初见，都恨太晚的感觉。正如有些牛人推荐的那样，像写代码一样写博客，这感觉错不了。再有Markdown虽不如在线编辑器那样直观，但却可以手不离键盘，不动鼠标，正如命令行与GUI的对比那样，这真的是用心为码农准备的良心工具啊（此处省略感慨10000字）。

手把手搭建Github Pages博客

说了这么多废话，来点实际的吧，下面说说如何一步步的用Github Pages搭建博客。其实这里的东西没有原创，部分是实践中的血和泪，本人不材，用了三四天才发出第一个博客，大部分都是源自网络，如有雷同，纯属拷贝。

Note：这里的默认平台是指Linux/Unix或者Mac

必备的技术

别害怕，听起来挺高大上啊，你妹啊，写个博客还需要技术，老子写代码也不过是Google+Copy+Paste。是的，用现成的博客托管，是没有门槛，但是用Github Pages就不一样了。

1. git
2. markdown
3. 平台命令行的使用，其实就是安装和配置软件包

这些都听起来很熟悉吧，是不是天天都用。所以对于码农，玩Github Pages完全不在话下。

安装基本设施

git

git我就不想说了，我想对于一个码农，如果没有安装git的，请自行Google吧，Linux默认都带有的，对于Mac，安装了XCode后，也会带有。

Ruby

我们即将用到的工具都是用Ruby实现的，如果你跟我一样只会些Python，不会Ruby，那么了没有关系，我们只需要安装Ruby，不用写代码。

• Mac

Mac本身带有Ruby，但是版本过低，需要重新安装一个新版本

1

brew install ruby

这会安装最版本的Ruby，但还需要手动配置，把新版本的Ruby加入到PATH当中去，用

1

ruby --version

来验证，如果输出的是1.9.3以上的版本就Okay了。之后就可以用gem来安装Ruby的包了，gem是跟Python的pip很类似的一个包管理器。安装bundle和bundler:

1
2

gem install bundle
gem install bundler

Note: 安装配置完新版本的Ruby后，一定要重新安装bundle和bundler，否则bundle仍会bundler指向旧版本的Ruby，后面安装会因Ruby的版本不够而失败。 另外，当用gem安装包的时候有时候会出现这个错误：

ERROR: While executing gem … (Gem::RemoteFetcher::FetchError) Errno::ETIMEDOUT: Operation timed out - connect(2) for “s3.amazonaws.com” port 443 (https://api.rubygems.org/specs.4.8.gz)

不用多说，你懂得，这是只有在伟大的天朝才会发生的，错误就是连接不上软件库，解决之法就是使用国内的Ruby gem镜像，详细在这里

• Linux(Ubuntu) 同样Ubuntu也带有Ruby但是它的版本也很低，可以用rbenv来安装和配置版本的Ruby:

1
2
3
4
5
6

cd
git clone git://github.com/sstephenson/rbenv.git .rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
git clone git://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
source ~/.bash_profile

之后安装新版的Ruby：

1
2
3

rbenv install 2.1.3
rbenv local 2.1.3
rbenv rehash

同样，也需要安装新版本的bundle和bundler，如果在安装过程中又出现ruby版本不对（用ruby -v验证）就运行下rbenv local 2.1.3

到此为止，基础设施就已经有了，可以安装关键的东西了，

Octopress

这个就是我们要使用的框架，它是基于Jekyll的一个静态博客生成框架，Jekyll是一个静态网站生成框架，它有很多功能，也可以直接使用，但是就麻烦得多，很多东西要配置和从头写。Octopress就是基于Jekyll，帮我们把重复性的脏活累活全都干了，把创造性的事情（写博客）留给了我们。

1
2
3
4

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

创建Github帐号和Github Pages

我相信大多数人都已经有了Github帐号了，访问Github来注册帐号，然后访问Github Pages来创建博客空间，唯一需要注意的是Repo必须是Github帐号.github.io，否则不会起作用。 然后，运行：

1

rake setup_github_pages

过程中会要求你输入Github Pages的Repo地址，比如git@github.com:username/username.github.io.git 到此，你的博客就建立好了，运行下:

1
2

rake generate
rake preview

后用浏览器访问http://localhost:4000。就会看到你的博客了，只不过都是Octopress的默认配置。

配置你的博客

用vim或者任意一个文本编辑器打开octopress根目录下的_config.yml文件，把title,subtitle,author都改成你自己的配置，再次preview，看到你的博客了吧。

添加社交分享

博客必须要带有社交分享功能，否则会很令人沮丧，这会影响博客的传播。Octopress默认是带有社交分享功能的，比如Twitter, Facebook, Google Plus等，但这些全世界都通用的东西在我大天朝就是不好使。而且我相信多数小牛们还是用中文写，且面向国内猿，所以用国内的社交还是靠谱些，当然对于大牛来说，常写英文，或者面向老外的，可以考虑使用默认的。

网站页的分享有很多第三方的库，这里用jiathis

1. 在_config.yml中加入social_share: true
2. 修改sources/_includes/post/sharing.html，增加：

1
2
3

{% if site.social_share %}
    {% include post/social_media.html %}
{% endif %}

1. 访问http://www.jiathis.com获取分享的代码，放入新建的文件source/_includes/post/social_media.html

添加文章评论功能

同样，Octopress也默认集成有评论系统Disqus，这个是国外最大的第三方评论平台，世界都在用，除了我大天朝。这种评论平台的主要功能是帐号不再局限在某一个网站内，同样评论也局限在一个网站内，评论平台提供帐号的管理和评论内容的管理，换句话说，即使不是你的网站的注册用户，只要有评论平台的帐号就能评论你的文章，且评论的内容是保存在评论平台中的。评论平台都可以使用流行的社交账号进行评论，评论还可以转发，回复等。一句话就是评论也变成了一个以用户为中心的社区，而不再是孤立的存在于某个网站之中。

我天朝人民是聪明的，这么好的东西国内肯定有替代品，那就是多说。使用多说也很简单：

1. 先到多说注册，获取用户名，也就是在多说上添的youname.duoshuo.com中的yourname
2. 在_config.yml中添加

1
2

duoshuo_comments: true
duoshuo_short_name: yourname

1. 在source/_layouts/post.html中把评论模板加入到你的网页中去

1
2
3
4
5
6

｛% 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 %｝

1. 创建多说评论代码模板

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: "yourname"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';
        ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'utf-8';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
</script>
<!-- Duoshuo COMMENT END -->

写博客

• rake new_post[“Blog Title”] 生成一篇新的博客，用文本编辑器打开生成的文件就可以写博客了
• rake generate 生成静态的博客文件，生成的文件在_deploy中
• rake preview 在本地预览博客，这与发布到Github Pages后的效果是一样的
• rake deploy 这是最后一步，就是把Octopress生成的文件（在_deploy）发布到Github上面去。这里的实际是Octopress根据你的配置用sources中的模板，生成网页（HTML，JavaScript, CSS和资源），再把这些资源推送到yourname.github.io这个Repo中去，然后访问https://*yourname*.github.io 就能看到你的博客了。

配置独立的域名

如果你有自己的域名的话，没有话可以去godaddy.com或者万网（阿里云）去买一个，也就60多块钱，不到一顿酒钱，就能有一个属于你自己的独立的域名，多酷啊！ 配置方法也很简单，就是1.告诉Github你的域名是啥； 2. 在你的域名解析时指向Github，具体的：

• 在sources/下面新建一个叫CNAME的文件，里面只有一行，就是你的域名，如toughcoder.net
• 到你的域名管理，新建二个域名解析，A类型，分别指向192.30.252.153和192.30.252.154
• 再建一个ANAME解析，指向yourname.github.io

过个个把小时就会生效了。

保存你的代码

如前所述，rake deploy只是把生成的静态网页推送到了Github的Repo上去，但是你的博客的源码，就是这个octopress文件夹还需要地方保存，所以你可以新建一个Repo来保存源码：

1
2
3
4

git add .
git ci -s -m "Setup and config blogs for Github Pages"
git remote add myrepo *some public or private repo*
git push myrepo source

Markdown编辑器

因为博客都是用Markdown语法来写的，所以你需要一个良好的Markdown本地编辑器。

• Linux

retext，用sudo apt-get install retext来安装

• Mac

mou

为啥木Windows，孤认为用一堆开源软件搭建博客的你，不应该用Windows。

Markdown参考

• Markdown cheat sheet
• Markdown Tutorial
• MarkDown Land
• Markdown 官方教程

还有些事情需要注意，就是因为你所写的Markdown，同时也会被当作模板被处理，因为要添加和扩展一些其他的模块，比如代码，分享评论等，所以，如果你的文章中有HTML的Tag<>或者模板的符号%（现代的Web开发框架比如Django和Ruby on Rails，都使用此类型的模板用以生成HTML），最好使用HTML的Entity来替代，以免生成最终HTML时出错，比如上面分享和评论的代码块必须把其中的%用&#37;来代替，否则会出错。详细的HTML Entities表格可以参考这里

添加About页

作为一个标准的博客，还是应该有一个About页，来简单的介绍下作者。

1

rake new_page["about"]

这会生成一个新文件source/about/index.markdown，这个页面就是介绍页，编辑它，填入你想要的内容。 然后再把它加到导航栏上(navigation bar):

编辑source/_includes/custom/navigation.html，添加一行

1

  <li><a href="/about">About</a></li>

在侧边栏增加About me：

• 先是在_config.yml中，把custom/aside/about.html添加到post_asides中去。
• 然后再，编辑文件source/_includes/custom/asides/about.html即可，可以发现这是默认就支持的，注意这是HTML而非Markdown

从这里可以看出添加一个侧边栏荐并不难，只需要创建一个HTML文件，然后再配置到post_asides中去就可以了。

SEO

为了能让搜索引挚更容易的找到你的文章，就需要做一些SEO。其实并不难，Octopress已经提供支持，我们只需要填入一些内容就可以了。主要就是keywords和description。在生成代码时，这二个字段的内容会被写在HTML的head中的meta里，这里也是搜索引挚抓取的都方。

首先配置网站的keywords和description，编辑_config.yml文件，在最上面填入description和keywords，像这样

1
2

keywords: anroid, android development, ios
description: Insights about mobile development

在每个博客post的头，也填入keywords和description:

1
2
3
4
5
6
7
8
9

---
layout: post
title: "码农的救赎：使用Github Pages搭建博客"
date: 2014-10-16 22:18:36 +0800
comments: true
categories: miscellaneous
keywords: Github IO, octopress, jekyll, ruby, github
description: 使用Github来搭建博客，像写代码一样写博客，用版本控制来管理博客
---

把Category加到侧边栏

先创建Category列表的文件：

1
2
3
4
5
6
7
8
9
10
11

<section>
    <h1>Categories</h1>
    <ul id="categories">
        {% for category in site.categories %}
            <li class="category">
                {% capture category_url %}/blog/categories//index.html{% endcapture %}
                <a class="list-group-item {% if category_url == page.url %}active{% endif %}" href=""></a>
            </li>
        {% endfor %}
    </ul>
</section>

然后再在_config.yml中加到post_aside和page_aside中去，就可以了。

参考文章：

• http://blog.devtang.com/blog/2012/02/10/setup-blog-based-on-github/
• http://beyondvincent.com/blog/2013/07/27/107-hello-page-of-github/
• Octopress 的 SEO 优化
• Blogging With Octopress: Add About Page
• Category List Aside