使用Github Pages建独立博客

原文连接 http://beiyuu.com/github-pages/

 

Github很好的将代码和社区联系在了一块儿，因而发生了不少有趣的事情，世界也由于他美好了一点点。Github做为如今最流行的代码仓库，已经获得不少大公司和项目的青睐，好比jQuery、Twitter等。为使项目更方便的被人理解，介绍页面少不了，甚至会须要完整的文档站，Github替你想到了这一点，他提供了Github Pages的服务，不只能够方便的为项目创建介绍站点，也能够用来创建我的博客。

Github Pages有如下几个优势：

• 轻量级的博客系统，没有麻烦的配置
• 使用标记语言，好比Markdown
• 无需本身搭建服务器
• 根据Github的限制，对应的每一个站有300MB空间
• 能够绑定本身的域名

固然他也有缺点：

• 使用Jekyll模板系统，至关于静态页发布，适合博客，文档介绍等。
• 动态程序的部分至关局限，好比没有评论，不过还好咱们有解决方案。
• 基于Git，不少东西须要动手，不像Wordpress有强大的后台

大体介绍到此，做为我的博客来讲，简洁清爽的表达本身的工做、心得，就已达目标，因此Github Pages是我认为此需求最完美的解决方案了。

购买、绑定独立域名

虽然说Godaddy曾支持过SOPA，而且首页放着极其不专业的大胸美女，可是做为域名服务商他作的还不赖，选择它最重要的缘由是他支持支付宝，没有信用卡有时真的很难过。

域名的购买不用多讲，注册、选域名、支付，有网购经验的都毫无压力，优惠码也遍地皆是。域名的配置须要提醒一下，由于伟大英明的GFW的存在，咱们必须多作些事情。

流传Godaddy的域名解析服务器被墙掉，致使域名没法访问，后来这个事情在BeiYuu也发生了，不得已须要把域名解析服务迁移到国内比较稳定的服务商处，这个迁移对于域名来讲没有什么风险，最终的控制权仍是在Godaddy那里，你随时均可以改回去。

咱们选择DNSPod的服务，他们的产品作得不错，易用、免费，收费版有更高端的功能，暂不须要。注册登陆以后，按照DNSPod的说法，只需三步（咱们插入一步）：

• 首先添加域名记录，可参考DNSPod的帮助文档：https://www.dnspod.cn/Support
• 在DNSPod本身的域名下添加一条A记录，地址就是Github Pages的服务IP地址：207.97.227.245
• 在域名注册商处修改DNS服务:去Godaddy修改Nameservers为这两个地址：f1g1ns1.dnspod.net、f1g1ns2.dnspod.net。若是你不明白在哪里修改，能够参考这里：Godaddy注册的域名如何使用DNSPod
• 等待域名解析生效

域名的配置部分完成，跪谢方校长。

配置和使用Github

Git是版本管理的将来，他的优势我再也不赘述，相关资料不少。推荐这本Git中文教程。

要使用Git，须要安装它的客户端，推荐在Linux下使用Git，会比较方便。Windows版的下载地址在这里：http://code.google.com/p/msysgit/downloads/list。其余系统的安装也能够参考官方的安装教程。

下载安装客户端以后，各个系统的配置就相似了，咱们使用windows做为例子，Linux和Mac与此相似。

在Windows下，打开Git Bash，其余系统下面则打开终端（Terminal）：

一、检查SSH keys的设置

首先咱们须要检查你电脑上现有的ssh key：

1. $ cd ~/.ssh

若是显示“No such file or directory”，跳到第三步，不然继续。

二、备份和移除原来的ssh key设置：

由于已经存在key文件，因此须要备份旧的数据并删除：

1. $ ls
2. config id_rsa id_rsa.pub known_hosts
3. $ mkdir key_backup
4. $ cp id_rsa* key_backup
5. $ rm id_rsa*

三、生成新的SSH Key：

输入下面的代码，就能够生成新的key文件，咱们只须要默认设置就好，因此当须要输入文件名的时候，回车就好。

1. $ ssh-keygen -t rsa -C "邮件地址@youremail.com"
2. Generatingpublic/private rsa key pair.
3. Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>

而后系统会要你输入加密串（Passphrase）：

1. Enter passphrase (empty forno passphrase):<输入加密串>
2. Enter same passphrase again:<再次输入加密串>

最后看到这样的界面，就成功设置ssh key了：

四、添加SSH Key到GitHub：

在本机设置SSH Key以后，须要添加到GitHub上，以完成SSH连接的设置。

用文本编辑工具打开id_rsa.pub文件，若是看不到这个文件，你须要设置显示隐藏文件。准确的复制这个文件的内容，才能保证设置的成功。

在GitHub的主页上点击设置按钮：

选择SSH Keys项，把复制的内容粘贴进去，而后点击Add Key按钮便可：

PS：若是须要配置多个GitHub帐号，能够参看这个多个github账号的SSH key切换，不过须要提醒一下的是，若是你只是经过这篇文章中所述配置了Host，那么你多个帐号下面的提交用户会是一我的，因此须要经过命令git config --global --unset user.email删除用户帐户设置，在每个repo下面使用git config --local user.email '你的github邮箱@mail.com' 命令单独设置用户帐户信息

五、测试一下

能够输入下面的命令，看看设置是否成功，git@github.com的部分不要修改：

1. $ ssh -T git@github.com

若是是下面的反应：

1. The authenticity of host 'github.com (207.97.227.239)' can't be established.
2. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
3. Are you sure you want to continue connecting (yes/no)?

没关系张，输入yes就好，而后会看到：

1. Hi<em>username</em>!You've successfully authenticated, but GitHub does not provide shell access.

六、设置你的帐号信息

如今你已经能够经过SSH连接到GitHub了，还有一些我的信息须要完善的。

Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来作权限的处理，输入下面的代码进行我的信息的设置，把名称和邮箱替换成你本身的，名字必须是你的真名，而不是GitHub的昵称。

1. $ git config --global user.name "你的名字"
2. $ git config --global user.email "your_email@youremail.com"

设置GitHub的token

2012-4-28补充：新版的接口已经不须要配置token了，因此下面这段能够跳过了

有些工具没有经过SSH来连接GitHub。若是要使用这类工具，你须要找到而后设置你的API Token。

在GitHub上，你能够点击Account Setting > Account Admin：

而后在你的命令行中，输入下面的命令，把token添加进去：

1. $ git config --global user.name "你的名字"
2. $ git config --global user.token 0123456789your123456789token

若是你改了GitHub的密码，须要从新设置token。

成功了

好了，你已经能够成功链接GitHub了。

使用GitHub Pages创建博客

与GitHub创建好连接以后，就能够方便的使用它提供的Pages服务，GitHub Pages分两种，一种是你的GitHub用户名创建的username.github.io这样的用户&组织页（站），另外一种是依附项目的pages。

User & Organization Pages

想创建我的博客是用的第一种，形如beiyuu.github.io这样的可访问的站，每一个用户名下面只能创建一个，建立以后点击Admin进入项目管理，能够看到是这样的：而普通的项目是这样的，即便你也是用的othername.github.io：

建立好username.github.io项目以后，提交一个index.html文件，而后push到GitHub的master分支（也就是普通意义上的主干）。第一次页面生效须要一些时间，大概10分钟左右。

生效以后，访问username.github.io就能够看到你上传的页面了，beiyuu.github.com就是一个例子。

关于第二种项目pages，简单提一下，他和用户pages使用的后台程序是同一套，只不过它的目的是项目的帮助文档等跟项目绑定的内容，因此须要在项目的gh-pages分支上去提交相应的文件，GitHub会自动帮你生成项目pages。具体的使用帮助能够参考Github Pages的官方文档：

绑定域名

咱们在第一部分就提到了在DNS部分的设置，再来看在GitHub的配置，要想让username.github.io能经过你本身的域名来访问，须要在项目的根目录下新建一个名为CNAME的文件，文件内容形如：

1. beiyuu.com

你也能够绑定在二级域名上：

1. blog.beiyuu.com

须要提醒的一点是，若是你使用形如beiyuu.com这样的一级域名的话，须要在DNS处设置A记录到207.97.227.245（这个地址会有变更，这里查看），而不是在DNS处设置为CNAME的形式，不然可能会对其余服务（好比email）形成影响。

设置成功后，根据DNS的状况，最长可能须要一天才能生效，耐心等待吧。

Jekyll模板系统

GitHub Pages为了提供对HTML内容的支持，选择了Jekyll做为模板系统，Jekyll是一个强大的静态模板系统，做为我的博客使用，基本上能够知足要求，也能保持管理的方便，你能够查看Jekyll官方文档。

你能够直接fork个人项目，而后更名，就有了你本身的知足Jekyll要求的文档了，固然你也能够按照下面的介绍本身建立。

Jekyll基本结构

Jekyll的核心其实就是一个文本的转换引擎，用你最喜欢的标记语言写文档，能够是Markdown、Textile或者HTML等等，再经过layout将文档拼装起来，根据你设置的URL规则来展示，这些都是经过严格的配置文件来定义，最终的产出就是web页面。

基本的Jekyll结构以下：

1. |-- _config.yml
2. |-- _includes
3. |-- _layouts
4. ||--default.html
5. |`-- post.html
6. |-- _posts
7. | |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
8. | `--2009-04-26-barcamp-boston-4-roundup.textile
9. |-- _site
10. `-- index.html

简单介绍一下他们的做用：

_config.yml

配置文件，用来定义你想要的效果，设置以后就不用关心了。

_includes

能够用来存放一些小的可复用的模块，方便经过{ % include file.ext %}（去掉前两个{中或者{与%中的空格，下同）灵活的调用。这条命令会调用_includes/file.ext文件。

_layouts

这是模板文件存放的位置。模板须要经过YAML front matter来定义，后面会讲到，{ { content }}标记用来将数据插入到这些模板中来。

_posts

你的动态内容，通常来讲就是你的博客正文存放的文件夹。他的命名有严格的规定，必须是2012-02-22-artical-title.MARKUP这样的形式，MARKUP是你所使用标记语言的文件后缀名，根据_config.yml中设定的连接规则，能够根据你的文件名灵活调整，文章的日期和标记语言后缀与文章的标题的独立的。

_site

这个是Jekyll生成的最终的文档，不用去关心。最好把他放在你的.gitignore文件中忽略它。

其余文件夹

你能够建立任何的文件夹，在根目录下面也能够建立任何文件，假设你建立了project文件夹，下面有一个github-pages.md的文件，那么你就能够经过yoursite.com/project/github-pages访问的到，若是你是使用一级域名的话。文件后缀能够是.html或者markdown或者textile。这里还有不少的例子：https://github.com/mojombo/jekyll/wiki/Sites

Jekyll的配置

Jekyll的配置写在_config.yml文件中，可配置项有不少，咱们不去一一追究了，不少配置虽有用可是通常不须要去关心，官方配置文档有很详细的说明，确实须要了能够去这里查，咱们主要说两个比较重要的东西，一个是Permalink，还有就是自定义项。

Permalink项用来定义你最终的文章连接是什么形式，他有下面几个变量：

• year 文件名中的年份
• month 文件名中的月份
• day 文件名中的日期
• title 文件名中的文章标题
• categories 文章的分类，若是文章没有分类，会忽略
• i-month 文件名中的除去前缀0的月份
• i-day 文件名中的除去前缀0的日期

看看最终的配置效果：

• permalink: pretty /2009/04/29/slap-chop/index.html
• permalink: /:month-:day-:year/:title.html /04-29-2009/slap-chop.html
• permalink: /blog/:year/:month/:day/:title /blog/2009/04/29/slap-chop/index.html

我使用的是：

• permalink: /:title /github-pages

自定义项的内容，例如咱们定义了title:BeiYuu的博客这样一项，那么你就能够在文章中使用{ { site.title }}来引用这个变量了，很是方便定义些全局变量。

YAML Front Matter和模板变量

对于使用YAML定义格式的文章，Jekyll会特别对待，他的格式要求比较严格，必须是这样的形式：

1. ---
2. layout: post
3. title:BloggingLike a Hacker
4. ---

先后的---不能省略，在这之间，你能够定一些你须要的变量，layout就是调用_layouts下面的某一个模板，他还有一些其余的变量可使用：

• permalink 你能够对某一篇文章使用通用设置以外的永久连接
• published 能够单独设置某一篇文章是否须要发布
• category 设置文章的分类
• tags 设置文章的tag

上面的title就是自定义的内容，你也能够设置其余的内容，在文章中能够经过{ { page.title }}这样的形式调用。

模板变量，咱们以前也涉及了很多了，还有其余须要的变量，能够参考官方的文档：https://github.com/mojombo/jekyll/wiki/template-data

使用Disqus管理评论

模板部分到此就算是配置完毕了，可是Jekyll只是个静态页面的发布系统，想作到关爽场却是很容易，若是想要评论呢？也很简单。

如今专作评论模块的产品有不少，好比Disqus，还有国产的多说，Disqus对如今各类系统的支持都比较全面，到写博客为止，多说如今仅是WordPress的一个插件，因此我这里暂时也使用不了，多说与国内的社交网络紧密结合，仍是有不少亮点的，值得期待一下。我先选择了Disqus。

注册帐号什么的就不提了，Disqus支持不少的博客平台，参见下图：

咱们选择最下面的Universal Code就好，而后会看到一个介绍页面，把下面这段代码复制到你的模板里面，能够只复制到显示文章的模板中：

1. <divid="disqus_thread"></div>
2. <scripttype="text/javascript">
3. /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
4. var disqus_shortname ='example';// required: replace example with your forum shortname 这个地方须要改为你配置的网站名
6. /* * * DON'T EDIT BELOW THIS LINE * * */
7. (function(){
8. var dsq = document.createElement('script'); dsq.type ='text/javascript'; dsq.async =true;
9. dsq.src ='http://'+ disqus_shortname +'.disqus.com/embed.js';
10. (document.getElementsByTagName('head')[0]|| document.getElementsByTagName('body')[0]).appendChild(dsq);
11. })();
12. </script>
13. <noscript>Please enable JavaScript to view the <ahref="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
14. <ahref="http://disqus.com"class="dsq-brlink">blog comments powered by <spanclass="logo-disqus">Disqus</span></a>

配置完以后，你也能够作一些异步加载的处理，提升性能，好比我就在最开始页面打开的时候不显示评论，当你想看评论的时候，点击“显示评论”再加载Disqus的模块。代码很简单，你能够参考个人写法。

1. $('#disqus_container .comment').on('click',function(){
2. $(this).html('加载中...');
3. var disqus_shortname ='beiyuu';
4. var that =this;
5. BYB.includeScript('http://'+ disqus_shortname +'.disqus.com/embed.js',function(){$(that).remove()});//这是一个加载js的函数
6. });

若是你不喜欢Disqus的样式，你也能够根据他生成的HTML结构，本身改写样式覆盖它的，Disqus如今也提供每一个页面的评论数接口，帮助文档在这里能够看到。

代码高亮插件

若是写技术博客，代码高亮少不了，有两个可选插件DlHightLight代码高亮组件和Google Code Prettify。DLHightLight支持的语言相对较少一些，有js、css、xml和html，Google的高亮插件基本上任何语言都支持，也能够自定义语言，也支持自动识别，也有行号的特别支持。

Google的高亮插件使用也比较方便，只须要在<pre>的标签上加入prettyprint便可。因此我选择了Google Code Prettify。

搭建本地jekyll环境

这里主要介绍一下在Mac OS X下面的安装过程，其余操做系统能够参考官方的jekyll安装。

做为生活在水深火热的墙内人民，有必要进行下面一步修改gem的源，方便咱们更快的下载所需组建：

1. sudo gem sources --remove http://rubygems.org/
2. sudo gem sources -a http://ruby.taobao.org/

而后用Gem安装jekyll

1. $ gem install jekyll

不过通常若是有出错提示，你可能须要这样安装：

1. $ sudo gem install jekyll

我到了这一步的时候老是提示错误Failed to build gem native extension，极可能的一个缘由是没有安装rvm，rvm的安装能够参考这里，或者敲入下面的命令：

1. $ curl -L https://get.rvm.io | bash -s stable --ruby

而后还须要安装Markdown的解释器，这个须要在你的_config.yml里面设置markdown:rdiscount：

1. $ gem install jekyll rdiscount

好了，若是一切顺利的话，本地环境就基本搭建完成了，进入以前咱们创建的博客目录，运行下面的命令：

1. $ jekyll --server

这个时候，你就能够经过localhost:4000来访问了。还有关于jekyll bootstrap的资料，须要本身修改调试的，能够研究一下。

我在这个过程当中还遇到两个诡异的没有解决的问题，一个是我放在根目录下面的blog.md等文件，在GitHub的pages服务上一切正常，能够经过beiyuu.com/blog访问的到，可是在本地环境下，老是not found，非常让人郁闷，看生成的_site目录下面的文件，也是正常的blog.html，但就是找不到，只有当我把URL改成localhost:4000/blog.html的时候，才能访问的到，环境不一样真糟糕。

还有一个是关于category的问题，根据YAML的语法，咱们在文章头部能够定义文章所属的类别，也能够定义为category:[blog,rss]这样子的多类别，我在本地试一切正常，可是push到GitHub以后，就没法读取了，真让人着急，没有办法，只能采用别的办法知足个人需求了。这里还有一篇Jekyll 本地调试之若干问题，安装中若是有其余问题，也能够对照参考一下。

结语

若是你跟着这篇不那么详尽的教程，成功搭建了本身的博客，恭喜你！剩下的就是保持热情的去写本身的文章吧。