稀有猿诉

十年磨一剑,历炼出锋芒,说话千百句,不如码二行。

码农的救赎:使用Github Pages搭建博客

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

据说有博客的人比没博客人的薪水要高很多,相传写博客也是一个高手的标配,虽然之前一直有在写(在这里),但是孤既不是高手,薪水还比别人少。之前一直在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,同时也会被当作模板被处理,因为要添加和扩展一些其他的模块,比如代码,分享评论等,所以,如果你的文章中有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已经提供支持,我们只需要填入一些内容就可以了。主要就是keywordsdescription。在生成代码时,这二个字段的内容会被写在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中去,就可以了。

参考文章:

Comments