PageSourceSearch

https://forthxu.github.io/blog/github-pages/

html forthxu.github.io collected 2026-10-03 09:12:25 UTC 29,153 bytes, 512 lines download raw bytes

1<!DOCTYPE html>
2<html>
3<head>
4    <!--
5    * Author:         forthxu
6    -->
7    <meta charset="utf-8" />
8    <title>使用Github Pages建独立博客 | Forthxu.com</title>
9    <meta name="author" content="forthxu" />
10    <meta name="renderer" content="webkit">
11    <meta name="description" content="forthxu's Blog" />
12    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
13    <link rel="stylesheet" href="/css/default.css" type="text/css" />
14    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
15    <link rel="alternate" type="application/atom+xml" title="Recent Entries" href="/atom.xml" />
16    
16<script src="/js/jquery-1.7.1.min.js" type="text/javascript"></script>
16
17</head>
18<body>
19
20    <div class="home-menu">
21        <div class="home-icon-con">
22            <a class="home-menu-icon" href="/">forthxu</a>
23            <a class="home-follow" href="#" title="Contact Me">+</a>
24        </div>
25        <div class="home-contact">
26            <a href="http://weibo.com/forthxu/" target="_blank" style="margin-left:-5px;"><img src="http://www.weibo.com/favicon.ico" alt="" width="25"/></a>
27        </div>
28    </div>
29
30    <link rel="stylesheet" href="/js/prettify/prettify.css" />
31<style type="text/css">
32    body { background:#e8e8e8; }
33    @media screen and (max-width: 750px){
34        body { background:#fff; }
35    }
36    @media screen and (max-width: 1020px){
37        body { background:#fff; }
38    }
39</style>
40
41<div id="content">
42    <div class="entry">
43        <h1 class="entry-title"><a href="/blog/github-pages" title="使用Github Pages建独立博客">使用Github Pages建独立博客</a></h1>
44        <p class="entry-date">2012-02-22</p>
45        <p><a href="http://github.com" title="Github">Github</a>很好的将代码和社区联系在了一起,于是发生了很多有趣的事情,世界也因为他美好了一点点。Github作为现在最流行的代码仓库,已经得到很多大公司和项目的青睐,比如<a href="https://github.com/jquery/jquery" title="jQuery@github">jQuery</a>、<a href="https://github.com/twitter/bootstrap" title="Twitter@github">Twitter</a>等。为使项目更方便的被人理解,介绍页面少不了,甚至会需要完整的文档站,Github替你想到了这一点,他提供了<a href="http://pages.github.com/" title="Github Pages">Github Pages</a>的服务,不仅可以方便的为项目建立介绍站点,也可以用来建立个人博客。</p>
46
47<p>Github Pages有以下几个优点:</p>
48
49<ul>
50    <li>轻量级的博客系统,没有麻烦的配置</li>
51    <li>使用标记语言,比如<a href="http://markdown.tw">Markdown</a></li>
52    <li>无需自己搭建服务器</li>
53    <li>根据Github的限制,对应的每个站有300MB空间</li>
54    <li>可以绑定自己的域名</li>
55</ul>
56
57
58<p>当然他也有缺点:</p>
59
60<ul>
61<li>使用<a href="https://github.com/mojombo/jekyll" title="Jekyll">Jekyll</a>模板系统,相当于静态页发布,适合博客,文档介绍等。</li>
62<li>动态程序的部分相当局限,比如没有评论,不过还好我们有解决方案。</li>
63<li>基于Git,很多东西需要动手,不像Wordpress有强大的后台</li>
64</ul>
65
66
67<p>大致介绍到此,作为个人博客来说,简洁清爽的表达自己的工作、心得,就已达目标,所以Github Pages是我认为此需求最完美的解决方案了。</p>
68
69<h2>购买、绑定独立域名</h2>
70
71<p>虽说<a href="http://www.godaddy.com/" title="Godaddy">Godaddy</a>曾支持过SOPA,并且首页放着极其不专业的大胸美女,但是作为域名服务商他做的还不赖,选择它最重要的原因是他支持支付宝,没有信用卡有时真的很难过。</p>
72
73<p>域名的购买不用多讲,注册、选域名、支付,有网购经验的都毫无压力,优惠码也遍地皆是。域名的配置需要提醒一下,因为伟大英明的GFW的存在,我们必须多做些事情。</p>
74
75<p>流传Godaddy的域名解析服务器被墙掉,导致域名无法访问,后来这个事情在<a href="http://beiyuu.com" title="BeiYuu">BeiYuu</a>也发生了,不得已需要把域名解析服务迁移到国内比较稳定的服务商处,这个迁移对于域名来说没有什么风险,最终的控制权还是在Godaddy那里,你随时都可以改回去。</p>
76
77<p>我们选择<a href="https://www.dnspod.cn/" title="DNSPod">DNSPod</a>的服务,他们的产品做得不错,易用、免费,收费版有更高端的功能,暂不需要。注册登录之后,按照DNSPod的说法,只需三步(我们插入一步):</p>
78
79<ul>
80    <li>首先添加域名记录,可参考DNSPod的帮助文档:<a href="https://www.dnspod.cn/Support">https://www.dnspod.cn/Support</a></li>
81    <li>在DNSPod自己的域名下添加一条<a href="http://baike.baidu.com/view/65575.htm">A记录</a>,地址就是Github Pages的服务IP地址:207.97.227.245</li>
82    <li>在域名注册商处修改DNS服务:去Godaddy修改Nameservers为这两个地址:f1g1ns1.dnspo
82d.net、f1g1ns2.dnspod.net。如果你不明白在哪里修改,可以参考这里:<a href="https://www.dnspod.cn/support/index/fid/119">Godaddy注册的域名如何使用DNSPod</a></li>
83    <li>等待域名解析生效</li>
84</ul>
85
86
87<p>域名的配置部分完成,跪谢方校长。</p>
88
89<h2>配置和使用Github</h2>
90
91<p>Git是版本管理的未来,他的优点我不再赘述,相关资料很多。推荐这本<a href="http://progit.org/book/zh/" title="Pro Git中文版">Git中文教程</a>。</p>
92
93<p>要使用Git,需要安装它的客户端,推荐在Linux下使用Git,会比较方便。Windows版的下载地址在这里:<a href="http://code.google.com/p/msysgit/downloads/list" title="Windows版Git客户端">http://code.google.com/p/msysgit/downloads/list</a>。其他系统的安装也可以参考官方的<a href="http://help.github.com/mac-set-up-git/" title="Mac下Git安装">安装教程</a>。</p>
94
95<p>下载安装客户端之后,各个系统的配置就类似了,我们使用windows作为例子,Linux和Mac与此类似。</p>
96
97<p>在Windows下,打开Git Bash,其他系统下面则打开终端(Terminal):
98<img src="/images/githubpages/bootcamp_1_win_gitbash.jpg" alt="Git Bash" /></p>
99
100<h3>1、检查SSH keys的设置</h3>
101
102<p>首先我们需要检查你电脑上现有的ssh key:</p>
103
104<pre><code>$ cd ~/.ssh
105</code></pre>
106
107<p>如果显示“No such file or directory”,跳到第三步,否则继续。</p>
108
109<h3>2、备份和移除原来的ssh key设置:</h3>
110
111<p>因为已经存在key文件,所以需要备份旧的数据并删除:</p>
112
113<pre><code>$ ls
114config  id_rsa  id_rsa.pub  known_hosts
115$ mkdir key_backup
116$ cp id_rsa* key_backup
117$ rm id_rsa*
118</code></pre>
119
120<h3>3、生成新的SSH Key:</h3>
121
122<p>输入下面的代码,就可以生成新的key文件,我们只需要默认设置就好,所以当需要输入文件名的时候,回车就好。</p>
123
124<pre><code>$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
125Generating public/private rsa key pair.
126Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):&lt;回车就好&gt;
127</code></pre>
128
129<p>然后系统会要你输入加密串(<a href="http://help.github.com/ssh-key-passphrases/">Passphrase</a>):</p>
130
131<pre><code>Enter passphrase (empty for no passphrase):&lt;输入加密串&gt;
132Enter same passphrase again:&lt;再次输入加密串&gt;
133</code></pre>
134
135<p>最后看到这样的界面,就成功设置ssh key了:
136<img src="/images/githubpages/ssh-key-set.png" alt="ssh key success" /></p>
137
138<h3>4、添加SSH Key到GitHub:</h3>
139
140<p>在本机设置SSH Key之后,需要添加到GitHub上,以完成SSH链接的设置。</p>
141
142<p>用文本编辑工具打开id_rsa.pub文件,如果看不到这个文件,你需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。</p>
143
144<p>在GitHub的主页上点击设置按钮:
145<img src="/images/githubpages/github-account-setting.png" alt="github account setting" /></p>
146
147<p>选择SSH Keys项,把复制的内容粘贴进去,然后点击Add Key按钮即可:
148<img src="/images/githubpages/bootcamp_1_ssh.jpg" alt="set ssh keys" /></p>
149
150<p>PS:如果需要配置多个GitHub账号,可以参看这个<a href="http://omiga.org/blog/archives/2269">多个github帐号的SSH key切换</a>,不过需要提醒一下的是,如果你只是通过这篇文章中所述配置了Host,那么你多个账号下面的提交用户会是一个人,所以需要通过命令<code>git config --global --unset user.email</code>删除用户账户设置,在每一个repo下面使用<code>git config --local user.email '你的github邮箱@mail.com'</code> 命令单独设置用户账户信息</p>
151
152<h3>5、测试一下</h3>
153
154<p>可以输入下面的命令,看看设置是否成功,<code>[email protected]</code>的部分不要修改:</p>
155
156<pre><code>$ ssh -T [email protected]
157</code></pre>
158
159<p>如果是下面的反应:</p>
160
161<pre><code>The authenticity of host 'github.com (207.97.227.239)' can't be established.
162RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
163Are you sure you want to continue connecting (yes/no)?
164</code></pre>
165
166<p>不要紧张,输入<code>yes</code>就好,然后会看到:</p>
167
168<pre><code>Hi &lt;em&gt;username&lt;/em&gt;! You've successfully authenticated, but GitHub does not provide shell access.
169</code></pre>
170
171<h3>6、设置你的账号信息</h3>
172
173<p>现在你已经可以通过SSH链接到GitHub了,还有一些个人信息需要完善的。</p>
174
175<p>
175Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理,输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的,名字必须是你的真名,而不是GitHub的昵称。</p>
176
177<pre><code>$ git config --global user.name "你的名字"
178$ git config --global user.email "[email protected]"
179</code></pre>
180
181<h4>设置GitHub的token</h4>
182
183<p>2012-4-28补充:新版的接口已经不需要配置token了,所以下面这段可以跳过了</p>
184
185<p>有些工具没有通过SSH来链接GitHub。如果要使用这类工具,你需要找到然后设置你的API Token。</p>
186
187<p>在GitHub上,你可以点击<em>Account Setting > Account Admin</em>:
188<img src="/images/githubpages/bootcamp_1_token.jpg" alt="set ssh keys" /></p>
189
190<p>然后在你的命令行中,输入下面的命令,把token添加进去:</p>
191
192<pre><code>$ git config --global user.name "你的名字"
193$ git config --global user.token 0123456789your123456789token
194</code></pre>
195
196<p>如果你改了GitHub的密码,需要重新设置token。</p>
197
198<h3>成功了</h3>
199
200<p>好了,你已经可以成功连接GitHub了。</p>
201
202<h2>使用GitHub Pages建立博客</h2>
203
204<p>与GitHub建立好链接之后,就可以方便的使用它提供的Pages服务,GitHub Pages分两种,一种是你的GitHub用户名建立的<code>username.github.io</code>这样的用户&amp;组织页(站),另一种是依附项目的pages。</p>
205
206<h3>User &amp; Organization Pages</h3>
207
208<p>想建立个人博客是用的第一种,形如<code>beiyuu.github.io</code>这样的可访问的站,每个用户名下面只能建立一个,创建之后点击<code>Admin</code>进入项目管理,可以看到是这样的:
209<img src="/images/githubpages/user-pages.png" alt="user pages" />
210而普通的项目是这样的,即使你也是用的<code>othername.github.io</code>:
211<img src="/images/githubpages/other-pages.png" alt="other pages" /></p>
212
213<p>创建好<code>username.github.io</code>项目之后,提交一个<code>index.html</code>文件,然后<code>push</code>到GitHub的<code>master</code>分支(也就是普通意义上的主干)。第一次页面生效需要一些时间,大概10分钟左右。</p>
214
215<p>生效之后,访问<code>username.github.io</code>就可以看到你上传的页面了,<a href="http://beiyuu.github.com">beiyuu.github.com</a>就是一个例子。</p>
216
217<p>关于第二种项目<code>pages</code>,简单提一下,他和用户pages使用的后台程序是同一套,只不过它的目的是项目的帮助文档等跟项目绑定的内容,所以需要在项目的<code>gh-pages</code>分支上去提交相应的文件,GitHub会自动帮你生成项目pages。具体的使用帮助可以参考<a href="http://pages.github.com/" title="Github Pages">Github Pages</a>的官方文档:</p>
218
219<h3>绑定域名</h3>
220
221<p>我们在第一部分就提到了在DNS部分的设置,再来看在GitHub的配置,要想让<code>username.github.io</code>能通过你自己的域名来访问,需要在项目的根目录下新建一个名为<code>CNAME</code>的文件,文件内容形如:</p>
222
223<pre><code>beiyuu.com
224</code></pre>
225
226<p>你也可以绑定在二级域名上:</p>
227
228<pre><code>blog.beiyuu.com
229</code></pre>
230
231<p>需要提醒的一点是,如果你使用形如<code>beiyuu.com</code>这样的一级域名的话,需要在DNS处设置A记录到<code>207.97.227.245</code>(<strong>这个地址会有变动,<a href="https://help.github.com/articles/my-custom-domain-isn-t-working">这里</a>查看</strong>),而不是在DNS处设置为CNAME的形式,否则可能会对其他服务(比如email)造成影响。</p>
232
233<p>设置成功后,根据DNS的情况,最长可能需要一天才能生效,耐心等待吧。</p>
234
235<h2>Jekyll模板系统</h2>
236
237<p>GitHub Pages为了提供对HTML内容的支持,选择了<a href="https://github.com/mojombo/jekyll" title="Jekyll">Jekyll</a>作为模板系统,Jekyll是一个强大的静态模板系统,作为个人博客使用,基本上可以满足要求,也能保持管理的方便,你可以查看<a href="https://github.com/mojombo/jekyll/blob/master/README.textile">Jekyll官方文档</a>。</p>
238
239<p>你可以直接fork<a href="https://github.com/beiyuu/beiyuu.github.com">我的项目</a>,然后改名,就有了你自己的满足Jekyll要求的文档了,当然你也可以按照下面的介绍自己创建。</p>
240
241<h3>Jekyll基本结构</h3>
242
243<p>Jekyll的核心其实就是一个文本的转换引擎,用你最喜欢的标记语言写文档,可以是Markdown、Textile或者HTML等等,再通过<code>layout</code>将文档拼装起来,根据你设置的URL规则来展现,这些都是通过严格的配置文件来定义,最终的产出就是web页面。</p>
244
245<p>基本的Jekyll结构如下:</p>
246
247<pre><code>|-- _config.yml
248|-- _includes
249|-- _layouts
250|   |-- default.html
251|   `-- post.html
252|-- _posts
253|   |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
254|   `-- 2009-04-26-barcamp-boston-4-roundup.textile
255|-- _site
256`-- index.html
257</code></pre>
258
259<p>简单介绍一下他们的作用:</p>
260
261<h4>_config.yml</h4>
262
263<p>配置文件,用来定义你想要的效果,设置之后就不用关心了。</p>
264
265<h4>_includes</h4>
266
267<p>可以用来存放一些小的可复用的模块,方便通过<code>{ % include file.ext %}</code>(去掉前两个{中或者{与%中的空格,下同)灵活的调用。这条命令会调用_includes/file.ext文件。</p>
268
269<h4>_layouts</h4>
270
271<p>这是模板文件存放的位置。模板需要通过<a href="https://github.com/mojombo/jekyll/wiki/YAML-Front-Matter">YAML front matter</a>来定义,后面会讲到,<code>{ { content }}</code>标记用来将数据插入到这些模板中来。</p>
272
273<h4>_posts</h4>
274
275<p>你的动态内容,一般来说就是你的博客正文存放的文件夹。他的命名有严格的规定,必须是<code>2012-02-22-artical-title.MARKUP</code>这样的形式,MARKUP是你所使用标记语言的文件后缀名,根据_config.yml中设定的链接规则,可以根据你的文件名灵活调整,文章的日期和标记语言后缀与文章的标题的独立的。</p>
276
277<h4>_site</h4>
278
279<p>这个是Jekyll生成的最终的文档,不用去关心。最好把他放在你的<code>.gitignore</code>文件中忽略它。</p>
280
281<h4>其他文件夹</h4>
282
283<p>你可以创建任何的文件夹,在根目录下面也可以创建任何文件,假设你创建了<code>project</code>文件夹,下面有一个<code>github-pages.md</code>的文件,那么你就可以通过<code>yoursite.com/project/github-pages</code>
283访问的到,如果你是使用一级域名的话。文件后缀可以是<code>.html</code>或者<code>markdown</code>或者<code>textile</code>。这里还有很多的例子:<a href="https://github.com/mojombo/jekyll/wiki/Sites">https://github.com/mojombo/jekyll/wiki/Sites</a></p>
284
285<h3>Jekyll的配置</h3>
286
287<p>Jekyll的配置写在_config.yml文件中,可配置项有很多,我们不去一一追究了,很多配置虽有用但是一般不需要去关心,<a href="https://github.com/mojombo/jekyll/wiki/configuration">官方配置文档</a>有很详细的说明,确实需要了可以去这里查,我们主要说两个比较重要的东西,一个是<code>Permalink</code>,还有就是自定义项。</p>
288
289<p><code>Permalink</code>项用来定义你最终的文章链接是什么形式,他有下面几个变量:</p>
290
291<ul>
292<li><code>year</code> 文件名中的年份</li>
293<li><code>month</code> 文件名中的月份</li>
294<li><code>day</code> 文件名中的日期</li>
295<li><code>title</code> 文件名中的文章标题</li>
296<li><code>categories</code> 文章的分类,如果文章没有分类,会忽略</li>
297<li><code>i-month</code> 文件名中的除去前缀0的月份</li>
298<li><code>i-day</code> 文件名中的除去前缀0的日期</li>
299</ul>
300
301
302<p>看看最终的配置效果:</p>
303
304<ul>
305<li><code>permalink: pretty</code> /2009/04/29/slap-chop/index.html</li>
306<li><code>permalink: /:month-:day-:year/:title.html</code> /04-29-2009/slap-chop.html</li>
307<li><code>permalink: /blog/:year/:month/:day/:title</code> /blog/2009/04/29/slap-chop/index.html</li>
308</ul>
309
310
311<p>我使用的是:</p>
312
313<ul>
314<li><code>permalink: /:title</code> /github-pages</li>
315</ul>
316
317
318<p>自定义项的内容,例如我们定义了<code>title:BeiYuu的博客</code>这样一项,那么你就可以在文章中使用<code>{ { site.title }}</code>来引用这个变量了,非常方便定义些全局变量。</p>
319
320<h3>YAML Front Matter和模板变量</h3>
321
322<p>对于使用YAML定义格式的文章,Jekyll会特别对待,他的格式要求比较严格,必须是这样的形式:</p>
323
324<pre><code>---
325layout: post
326title: Blogging Like a Hacker
327---
328</code></pre>
329
330<p>前后的<code>---</code>不能省略,在这之间,你可以定一些你需要的变量,layout就是调用<code>_layouts</code>下面的某一个模板,他还有一些其他的变量可以使用:</p>
331
332<ul>
333<li><code>permalink</code> 你可以对某一篇文章使用通用设置之外的永久链接</li>
334<li><code>published</code> 可以单独设置某一篇文章是否需要发布</li>
335<li><code>category</code> 设置文章的分类</li>
336<li><code>tags</code> 设置文章的tag</li>
337</ul>
338
339
340<p>上面的<code>title</code>就是自定义的内容,你也可以设置其他的内容,在文章中可以通过<code>{ { page.title }}</code>这样的形式调用。</p>
341
342<p>模板变量,我们之前也涉及了不少了,还有其他需要的变量,可以参考官方的文档:<a href="https://github.com/mojombo/jekyll/wiki/template-data" title="Jekyll Template Data">https://github.com/mojombo/jekyll/wiki/template-data</a></p>
343
344<h2>使用Disqus管理评论</h2>
345
346<p>模板部分到此就算是配置完毕了,但是Jekyll只是个静态页面的发布系统,想做到关爽场倒是很容易,如果想要评论呢?也很简单。</p>
347
348<p>现在专做评论模块的产品有很多,比如<a href="http://disqus.com/">Disqus</a>
348,还有国产的<a href="http://duoshuo.com/">多说</a>,Disqus对现在各种系统的支持都比较全面,到写博客为止,多说现在仅是WordPress的一个插件,所以我这里暂时也使用不了,多说与国内的社交网络紧密结合,还是有很多亮点的,值得期待一下。我先选择了Disqus。</p>
349
350<p>注册账号什么的就不提了,Disqus支持很多的博客平台,参见下图:
351<img src="/images/githubpages/disqus-site.jpg" alt="Disqus sites" /></p>
352
353<p>我们选择最下面的<code>Universal Code</code>就好,然后会看到一个介绍页面,把下面这段代码复制到你的模板里面,可以只复制到显示文章的模板中:</p>
354
355<pre><code>&lt;div id="disqus_thread"&gt;&lt;/div&gt;
356&lt;script type="text/javascript"&gt;
357    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
358    var disqus_shortname = 'example'; // required: replace example with your forum shortname 这个地方需要改成你配置的网站名
359
360    /* * * DON'T EDIT BELOW THIS LINE * * */
361    (function() {
362        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
363        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
364        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
365    })();
366&lt;/script&gt;
367&lt;noscript&gt;Please enable JavaScript to view the &lt;a href="http://disqus.com/?ref_noscript"&gt;comments powered by Disqus.&lt;/a&gt;&lt;/noscript&gt;
368&lt;a href="http://disqus.com" class="dsq-brlink"&gt;blog comments powered by &lt;span class="logo-disqus"&gt;Disqus&lt;/span&gt;&lt;/a&gt;
369</code></pre>
370
371<p>配置完之后,你也可以做一些异步加载的处理,提高性能,比如我就在最开始页面打开的时候不显示评论,当你想看评论的时候,点击“显示评论”再加载Disqus的模块。代码很简单,你可以参考我的写法。</p>
372
373<pre><code>$('#disqus_container .comment').on('click',function(){
374        $(this).html('加载中...');
375        var disqus_shortname = 'beiyuu';
376        var that = this;
377        BYB.includeScript('http://' + disqus_shortname + '.disqus.com/embed.js',function(){$(that).remove()}); //这是一个加载js的函数
378});
379</code></pre>
380
381<p>如果你不喜欢Disqus的样式,你也可以根据他生成的HTML结构,自己改写样式覆盖它的,Disqus现在也提供每个页面的评论数接口,<a href="http://docs.disqus.com/developers/universal/">帮助文档</a>在这里可以看到。</p>
382
383<h2>代码高亮插件</h2>
384
385<p>如果写技术博客,代码高亮少不了,有两个可选插件<a href="http://mihai.bazon.net/projects/javascript-syntax-highlighting-engine">DlHightLight代码高亮组件</a>和<a href="http://code.google.com/p/google-code-prettify/">Google Code Prettify</a>。DLHightLight支持的语言相对较少一些,有js、css、xml和html,Google的高亮插件基本上任何语言都支持,也可以自定义语言,也支持自动识别,也有行号的特别支持。</p>
386
387<p>Google的高亮插件使用也比较方便,只需要在<code>&lt;pre&gt;</code>的标签上加入<code>prettyprint</code>即可。所以我选择了Google Code Prettify。</p>
388
389<h2>搭建本地jekyll环境</h2>
390
391<p>这里主要介绍一下在Mac OS X下面的安装过程,其他操作系统可以参考官方的<a href="https://github.com/mojombo/jekyll/wiki/Install">jekyll安装</a>。</p>
392
393<p>作为生活在水深火热的墙内人民,有必要进行下面一步修改gem的源,方便我们更快的下载所需组建:</p>
394
395<pre><code>sudo gem sources --remove http://rubygems.org/ 
396sudo gem sources -a http://ruby.taobao.org/ 
397</code></pre>
398
399<p>然后用Gem安装jekyll</p>
400
401<pre><code>$ gem install jekyll
402</code></pre>
403
404<p>不过一般如果有出错提示,你可能需要这样安装:</p>
405
406<pre><code>$ sudo gem install jekyll
407</code></pre>
408
409<p>我到了这一步的时候总是提示错误<code>Failed to build gem native extension</code>,很可能的一个原因是没有安装rvm,<a href="https://rvm.io/rvm/install/">rvm的安装</a>可以参考这里,或者敲入下面的命令:</p>
410
411<pre><code>$ curl -L https://get.rvm.io | bash -s stable --ruby
412</code></pre>
413
414<p>然后还需要安装Markdown的解释器,这个需要在你的_config.yml里面设置<code>markdown:rdiscount</code>:</p>
415
416<pre><code>$ gem install jekyll rdiscount
417</code></pre>
418
419<p>好了,如果一切顺利的话,本地环境就基本搭建完成了,进入之前我们建立的博客目录,运行下面的命令:</p>
420
421<pre><code>$ jekyll --server
422</code></pre>
423
424<p>这个时候,你就可以通过<code>localhost:4000</code>来访问了。还有关于<a href="http://jekyllbootstrap.com/">jekyll bootstrap</a>的资料,需要自己修改调试的,可以研究一下。</p>
425
426<p>我在这个过程中还遇到两个诡异的没有解决的问题,一个是我放在根目录下面的blog.md等文件,在GitHub的pages服务上一切正常,可以通过<code>beiyuu.com/blog</code>访问的到,但是在本地环境下,总是<code>not found</code>,很是让人郁闷,看生成的<code>_site</code>目录下面的文件,也是正常的<code>blog.html</code>,但就是找不到,只有当我把URL改为<code>localhost:4000/blog.html</code>的时候,才能访问的到,环境不同真糟糕。</p>
427
428<p>还有一个是关于<code>category</code>的问题,根据<code>YAML</code>的语法,我们在文章头部可以定义文章所属的类别,也可以定义为<code>category:[blog,rss]</code>这样子的多类别,我在本地试一切正常,但是push到GitHub之后,就无法读取了,真让人着急,没有办法,只能采用别的办法满足我的需求了。这里还有一篇<a href="http://chxt6896.github.com/blog/2012/02/13/blog-jekyll-native.html">Jekyll 本地调试之若干问题</a>,安装中如果有其他问题,也可以对照参考一下。</p>
429
430<h2>结语</h2>
431
432<p>如果你跟着这篇不那么详尽的教程,成功搭建了自己的博客,恭喜你!剩下的就是保持热情的去写自己的文章吧。</p>
433
434
435        <div id="disqus_container">
436            <div style="margin-bottom:20px" class="right">
437                
437<script type="text/javascript" charset="utf-8">
438                (function(){
439                  var _w = 86 , _h = 16;
440                  var param = {
441                    url:location.href,
442                    type:'6',
443                    count:'', /**是否显示分享数,1显示(可选)*/
444                    appkey:'', /**您申请的应用appkey,显示分享来源(可选)*/
445                    title:'', /**分享的文字内容(可选,默认为所在页面的title)*/
446                    pic:'', /**分享图片的路径(可选)*/
447                    ralateUid:'1855270953', /**关联用户的UID,分享微博会@该用户(可选)*/
448                    language:'zh_cn', /**设置语言,zh_cn|zh_tw(可选)*/
449                    rnd:new Date().valueOf()
450                  }
451                  var temp = [];
452                  for( var p in param ){
453                    temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
454                  }
455                  document.write('<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>')
456                })()
457                </script>
457
458            </div>
459            <a href="#" class="comment" onclick="return false;">点击查看评论</a>
460            <div id="disqus_thread"></div>
461        </div>
462    </div>
463
464    <div class="sidenav">
465        <iframe width="100%" height="75" class="share_self"  frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=75&fansRow=2&ptype=1&speed=0&skin=5&isTitle=0&noborder=0&isWeibo=0&isFans=0&uid=1855270953&verifier=375b89d6&dpc=1"></iframe>
466    </div>
467
468    <div class="sidenav">
469        <h2>Blog</h2>
470        <ul class="artical-list">
471        
472            <li><a href="/blog/skynet">云风skynet框架研究</a></li>
473        
474            <li><a href="/blog/github-pages">使用Github Pages建独立博客</a></li>
475        
476            <li><a href="/blog/why-blog">我为什么写博客?</a></li>
477        
478        </ul>
479
480        <h2>Opinion</h2>
481        <ul class="artical-list">
482        
483        </ul>
484
485        <h2>Project</h2>
486        <ul class="artical-list">
487        
488        </ul>
489    </div>
490</div>
491
492<script src="/js/post.js" type="text/javascript"></script>
492
493
494
495    <div class="hide">
496        
496<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_5913314'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/stat.php%3Fid%3D5913314' type='text/javascript'%3E%3C/script%3E"));</script>
496
497    </div>
498    
498<script type="text/javascript">
499        $(function(){
500            $('.home-follow').click(function(e){
501                e.preventDefault();
502
503                if($('.home-contact').is(':visible')){
504                    $('.home-contact').slideUp(100);
505                }else{
506                    $('.home-contact').slideDown(100);
507                }
508            });
509        })
510    </script>
510
511</body>
512</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.