使用jekyll在GitHub Pages上搭建个人博客【转】

网上有不少资源，但大多是“授人以鱼”，文中一步一步的告诉你怎么做，却没有解释为什么，以及他是如何知道的。他们默认着你知道种种专业名词的含义，默认着你掌握着特定技能。你折腾半天，查资料，看教程，一步步下来，有进行不下去的地方，再去查其他人的做法，最终也建立起了自己的独立博客。但却，恍然不知，你用到的技术是什么含义。

我认为，初学者，要想在一个项目中，切实提高自己，需要活用活学。遇到一个专业名词，就去搞懂它，而不是马马虎虎混过去。一个技能点、一个技能点的攻破，然后将点系统的连起来，形成自己的知识网络，不断去细化和扩充。所以，这篇文中，尽力的在“授人以渔”。读者边看边实践之后，一方面，可以搭建好自己的独立博客；另一方面，会学到涉及的知识。前者是实际应用，是至顶向下的过程；后者是基础知识，是自底向上的过程。至底向上与至顶向下相结合，才能融会贯通。我希望在文中表达的,或者说希望读者接收到的，也就是融会贯通的学习能力。

引子

在互联网的世界里，建自己的博客就像是在搭建房子。当然，你可以直接用别人为你建好的房子，比如Tumblr、简书、新浪博客、Lofter、博客大巴等等。

Tumblr和Lofter都是自己比较喜欢的，房子建得美丽又实用。在同一个平台下，就感觉你们在同一个社区。当然不是这个社区居住的人们，也是可以进来逛一逛的。简书，也是如此。顺便提一句，选择简书，是喜欢它的写作体验。

不过，有时候，你想从头到尾自己建房子，就是搭建个自己的独立博客。如果你不知道如何选择，可以读一读《What are the best solutions for a personal blog?》（需FQ），文章分析了不同博客平台的优缺点和针对人群。当然，我的选择是 Jekyll+Github Pages。

开辟土地、搭建、装修、到注册门牌号等，都是需要动手的。土地就是你的服务器，房子是你的网站，装修是网站主题，布局和色彩等等，当然门牌号就是你的域名了。别忘了你还要写文章，这才是关键，你房间里放的不是家具，而是你的思考成果。

话不多说了，我们开始建房子的美妙旅途吧 ；）

Step 1. 选地

互联网上有免费的地，也有收费的地。Github Pages就是一个免费好用的地。

具体步骤：

首先，注册 Github


然后，建立一个仓库



比如，我的用户名是Yogayu，那么仓库名就取为 Yogayu.github.io。这一点很重要，不要弄错。

最后，按照提示步骤操作


一种简单的方式是，下载GitHub的桌面客户端，安装完成后，粘贴 http://github.com/yourusername/yourusername.github.io.git 克隆到本地。

之后，新建一个index.html文件，push到对应的master 分支（推荐官网教程）。等一段时间之后（可以听首歌），网站生效，访问yourusername.github.io，就能看见完整的网页了。



到此，我们的地就选好了，也就是在用GitHub的服务器。

1.1. 什么是 GitHub？

在说GitHub之前，必须要提到Git。Git是分布式版本控制系统。GitHub可以托管各种Git版本库，并提供一个web界面。

Github 就像是程序员们的Facebook，程序员们，写代码，做项目，在此和全世界的人们分享。 会使用GitHub的资源，比会搭建个人博客的价值大得多。

1.2.那么GitHub Pages是什么呢？

GitHub Pages有两种。一种是为个人或者组织的博客。一种是为项目的博客。前者一个账号只能建一个，后者，可以建很多个。

这样的博客，免费、独立、安全。

1.3.1. Git和Github如何使用？

可选择终端或图形化界面操作。怎么顺手怎么来吧。

Git简易指南

Git教程-廖雪峰

如何使用GitHub -知乎

GitHub 使用教程图文详解

Step 2. 搭建

环境搭建。

安装Ruby，Mac一般默认安装了Ruby，这一步可以忽略。官网安装

安装Bundler，在Terminal中输入： gem install bundler

安装Jekyll，同理输入： source 'https://rubygems.org' gem 'github-pages' *当然，如果你在墙内，很容易出问题，无法安装，推荐修改镜像源（淘宝镜像源）。

安装Jekyll gem install jekyll 在你希望存放的目录下，输入： jekyll new your-site-name 进入： cd your-site-name 运行本地服务： jekyll s 在浏览器中输入： http://localhost:4000 就可以在本地进行查看和调试你的网站了。

2.1. 什么是Jekyll？

解释一下，Jekyll可以将纯文本转换为静态博客网站。你整个网站的页面都是它生成的，从主页index到文章post。 比如，文章怎么写？标准网页格式是扩展标记语言HTML。纯手写？未免太麻烦。大家，多偏爱Markdown。所以，就用它写。不过，你需要有一个能把你用Markdown格式写的文章，转化为HTML网页的东西，这里使用的就是静态网页生成器。

静态网页是相对于动态网页而言的，如果感兴趣可以自己学习。

2.2. Jekyll目录

解释一下整个jekyll的目录(官方文档): 为了之后不至于完全茫然，很值得先看一看，第一次看不懂没关系，用着用着就知道什么意思了。就像练习吉他和弦的转换，开始很难，可换着换着你就会了。



这个很奇怪的结构是，文件目录树，config.yml这样的代表一个文件，drafts这样的代表一个文件夹，与它连接的文件，比如begin-with-the-crazy-ideas.textile，就在文件夹中。一开始，我没怎么看官方文档，嫌麻烦，不如直接开始干。结果是绕了不少弯路，修改主题的时候，找半天各个部分。

先说需要了解的，其余以后依个人需求学习

_config.yml 是配置文件，你可以在里面配置你博客会用到的常量，比如博客名，邮件

_includes：就是你文章各个部分的html文件，可以在布局中包含这些文件

_layouts：存放模板。就是你网页的布局，主页布局，文章布局。当然不是指CSS那样的布局，是指，你包含哪些基本的内容到页面上。包含的内容就是includes里面的文件。

_posts: 存放博客文章

index：博客主页

CNAME文件：域名地址

CSS：存放博客所用CSS

JS: 存放博客所用JavaScript

可以设置每个html文件的title(标题)和layout(布局)。比如index的layout一般是default。你也可以添加其他的页面，加上不同的layout。

当你想定制博客的时候，以上目录就很有用了。

2.3. 如何发表文章？

文章的写法，在Markdown开头加上一段：

---
layout: posttitle: "Welcome to Jekyll!"
date: 2014-01-27 21:57:11
categories: Blog
---

文件命名格式: 时间加标题 比如：2015-08-15-HowTOBuildBlog.md

ok，你可以写文章了，放入_post文件夹即可。

Step 3. 装修

3.1. 如何选择和修改主题？

一种方式是使用程序员们写好的，免费开源。



另一种是，你也可以自己写或修改，需要懂一些前端的知识。

之前，我在Codecademy上学了两、三天，进行入门。正好用自己的博客，来做练习。 其实前端还蛮好玩的，特别满足强迫症的强迫意愿。


虽然下了dreamweaver, 没怎么用，不过官网上的教程不错。 推荐使用 Sublime Text, 多么好用的代码编辑器啊，还有一个不错的教程。再配上Jekyll的本地服务器，在Cheome上调试。那感觉~

自己写是好，也要看看别人是如何做的，优秀的网站是如何设计的。文章可以注重注重排版，字体选择，屏幕适配调整等。不过说实在的，个人博客最重要的还是你的文章内容。

Step 4. 定制

如果你已经做到了这一步，那么恭喜你，你的个人博客已经搭建完成。不过要享受折腾的快乐，或想要更好的独特性，就继续进行吧。

4.1. 如何使用独立域名？

购买域名 著名的有 Godaddy，支持支付宝。在网上可以搜到优惠码。



在你本地网站文件夹中添加一个文件 CNAME，写入你的域名即可。

考虑到我国网络特殊情况，进行域名解析，可以选择dnspad 添加两条A记录(教程)，对，计算就是机网络课上学的A记录。在你的Godaddy上看你买的域名，就能找到，两条A记录。



买域名这事，我自己还有点经历。一开始我买了个azureyu.cn的域名，cn是国内的，然后让提交身份证信息，输入各种资料。又要进行网站备份，一大推看不懂的备份名词，最后放弃了。买了个国外的域名azureyu.com，没有了以上复杂环节，马上就可以用了。

4.2. 如何添加评论功能？

这些平时习以为常的东西，到这都是纯手工制造。 我使用的是Disqus



注册Disqus

在博客中添加，就会自动获得它为你生成的一段代码，复制它





新建一个名为Comments的html文件，复制进去这段代码，保存到文件夹includes里去。然后在layouts的post文件里加入：



其实，就是在你的网页中加入一段代码，加载之后在网页中加入Disqus，就会自动获得它为你生成的一段代码。

要还想添加一些feather就去折腾吧。比如分享、文章目录、代码高亮、标签云、搜索等等。我想到现在，学习这些内容，对你已经很简单了。

最后

个人建议：

多看官方文档，系统清晰很多

利用好而不是滥用搜索引擎

遇见问题，先看看他人如何解决

用一句作为结束：



参考：
http://www.ruanyifeng.com/blog/2012/08/bloggingwithjekyll.html http://beiyuu.com/github-pages/ http://daringfireball.net/projects/markdown/ http://stevelosh.com/ http://jekyllbootstrap.com/ http://gaohaoyang.github.io http://segmentfault.com/a/1190000000406013 http://tom.preston-werner.com/2008/11/17/blogging-like-a-hacker.html