写在前面
此篇博文为翻译之作，原文链接为Creating and Hosting a Personal Site on GitHub.
正文
需要用到的知识
- 版本控制
- Git
- GitHub
- HTML
- CSS
- Markdown
当然，并不需要对这些很熟练。一种很好的学习方法是“做中学”（learn by doing)
此篇博文着重介绍如何用github.com的网页界面去建个人网站
什么是Git,GitHub和GitHub Pages
简单来说，Git是完成事情的工作流，而GitHub和GitHub Pages 是存储你完成东西的地方。使用Git的项目公开地保存在GitHub 和GitHub Pages 上，于是广义上说，Git 是你可以在你个人PC上做的事情，GitHub是存储你做出东西的公开服务器。
Git
Git 是一个版本控制系统，跟踪项目中文件的修改情况。记录文件的修改——添加了什么？删了什么？谁做的这些修改？什么时间修改的？尤其在软件合作开发时适用。这种合作的特性引起了人们把他当做一项帮助自己编辑工作流的工具。
Git 可以高效管理多个版本文件并且回到不同版本的文件而不需要被保存在不同地方的不同版本的文件名所迷惑。从这个意义上来说，Git 和版本控制就像神奇的取消按钮。
在下面的示意图中，每个文档表示一个保存过程。没有Git, 你不能回到最初的文档和最终文档间的任意一个文档状态。如果你想修改最终的文档，要删掉一些不能复原的东西，这时你会选择另存为，然后在进行删除操作。
有了Git之后，这个流程有了更多的方向。每一个修改都会被标记。如果你想回到早期的版本，，你就可以可以在不损失数据的情况下回到早期文档。
详细了解Git
GitHub Pages
GitHub Pages 是通过GitHub免费的公开网页。GitGub用户可以创建并且拥有自己的网站，以及连接自己在GitHub上项目的网站。
新建个人网页
step 1
创建项目存储仓库
step 2
将自己的仓库命名为username.github.io ,username是你的GitHub用户名。
step 3
创建index.html
<!DOCTYPE html>
<html>
<head>
<title>Hank Quinlan, Horrible Cop</title>
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/cv">CV</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<div class="container">
<div class="blurb">
<h1>Hi there, I'm Hank Quinlan!</h1>
<p>I'm best known as the horrible cop from <em>A Touch of Evil</em> Don't trust me. <a href="/about">Read more about my life...</a></p>
</div><!-- /.blurb -->
</div><!-- /.container -->
<footer>
<ul>
<li><a href="mailto:hankquinlanhub@gmail.com">email</a></li>
<li><a href="https://github.com/hankquinlan">github.com/hankquinlan</a></li>
</ul>
</footer>
</body>
</html>
step 4
提交index.html
提交后你就有了一个自己的网站
http://username.github.io
step 5
创建样式
添加链接至main.css （粗体）
<!DOCTYPE html>
<html>
<head>
<title>Hank Quinlan, Horrible Cop</title>
<!-- link to main stylesheet -->
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/cv">CV</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<div class="container">
<div class="blurb">
<h1>Hi there, I'm Hank Quinlan!</h1>
<p>I'm best known as the horrible cop from <em>A Touch of Evil</em> Don't trust me. <a href="/about">Read more about my life...</a></p>
</div><!-- /.blurb -->
</div><!-- /.container -->
<footer>
<ul>
<li><a href="mailto:hankquinlanhub@gmail.com">email</a></li>
<li><a href="https://github.com/hankquinlan">github.com/hankquinlan</a></li>
</ul>
</footer>
</body>
</html>
使用Jekyll
Jekyll 是一个很轻大的静态网页产生器。跟GitHub一起使用，Jekyll会自动重新生成所有的改动过文件的HTML页面。Jekyll之所以这么好用是因为它依赖模板。当你使用静态网页生成器时，模板是你的好朋友。
在github.com上使用Jekyll
step 1
新建 .gitignore 文件。这个文件告诉Git忽略_site目录，每次你提交文件时，Jekyll会自动产生网页。因为这个目录下的文件是在你每次提交时写入，所以不希望受版本控制的影响。
step 2
新建 _config.yml文件，这个文件告诉Jekyll关于你项目的基本信息。举个例子，我们告诉Jekyll我们网站的名字以及我们所使用的markdown的版本
name: Hank Quinlan, Horrible Cop
markdown: kramdown
新建_layouts目录，在里面新建文件default.html
这时我们主要的模板，它会应用到所有<head>和<footer>元素上面去。于是我们不需要在每个页面的源码上重复劳动。
step 3
更新index.html
---
layout: default
title: Hank Quinlan, Horrible Cop
---
<div class="blurb">
<h1>Hi there, I'm Hank Quinlan!</h1>
<p>I'm best known as the horrible cop from <em>A Touch of Evil</em> Don't trust me. <a href="/about">Read more about my life...</a></p>
</div><!-- /.blurb -->
---之间的文字Jekyll称之为Front-matter.现在当你每次提交一个文件当文件头明确指出layout：default时，Jekyll会神奇地生成整个HTML把_layouts/default.html中的{{content}}替换为该文件。
开始写博客咯
基于Jekyll的博客就是充分利用了上述说的那些便利。
step 1
在_layouts 中新建post.html文件。
---
layout: default
---
<h1>{{ page.title }}</h1>
<p class="meta">{{ page.date | date_to_string }}</p>
<div class="post">
{{ content }}
</div>
step 2
新建_posts/目录保存我们的博客post。Jekyll严格要求命名，YYYY-MM-DD-title-of-my-post.md那么例子应当命名为2014-04-30-hank-quinlan-site-launched.md
---
layout: post
title: "Hank Quinlan, Horrible Cop, Launches Site"
date: 2014-04-30
---
Well. Finally got around to putting this old website together. Neat thing about it - powered by [Jekyll](http://jekyllrb.com) and I can use Markdown to author my posts. It actually is a lot easier than I thought it was going to be.
.md是markdown文件的扩展名，Jekyll会将其转换为HTML。提交这个post之后，你就便可以在http://username.github.io/YYYY/MM/DD/name-of-your-post中看到post了。
但是你的读者并不知道你的post的正确URL。所以下面我们需要新建一个页面，在上面罗列出我们博客的标题及超链接。
step 3
新建一个blog目录，并且新建一个文件index.html。为了列出我们的post,我们需要用一个foreach循环去新建一个我们博客的无序列表。
---
layout: default
title: Hank Quinlan's Blog
---
<h1>{{ page.title }}</h1>
<ul class="posts">
{% for post in site.posts %}
<li><span>{{ post.date | date_to_string }}</span> » <a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
个性化你的博客
step 1
编辑_config.yml，添加
permalink: /blog/:year/:month/:day/:title
可以很简单地配置你博客的RSS feed.每次你发布一篇post,它会自动添加进RSS file.
step 2
---
layout: feed
---
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Hank Quinlan's Blog</title>
<link href="http://hankquinlan.github.io/blog/atom.xml" rel="self"/>
<link href="http://hankquinlan.github.io/blog"/>
<updated>{{ site.time | date_to_xmlschema }}</updated>
<id>http://hankquinlan.github.io/blog</id>
<author>
<name>Hank Quinlan</name>
<email>hankquinlanhub@gmail.com</email>
</author>
{% for post in site.posts %}
<entry>
<title>{{ post.title }}</title>
<link href="http://hankquinlan.github.io{{ post.url }}"/>
<updated>{{ post.date | date_to_xmlschema }}</updated>
<id>http://hankquinlan.github.io/{{ post.id }}</id>
<content type="html">{{ post.content | xml_escape }}</content>
</entry>
{% endfor %}
</feed>
这样就可以方便读者订阅你的RSS了。
大功告成
新建其他页面并提交
下一步
- 新建
_includes - 自定义域名
- 添加博客的页数统计
- 新建
sitemap.xml，方便SEO - 新建
development分枝 - 更多灵感http://jekyllrb.com/docs/sites/
https://github.com/jekyll/jekyll/wiki/Sites
资源
Git, GitHub, and GitHub Pages
Git Documentation
Learn Git and GitHub in 15 minutes
GitHub Pages Help
GitHub Help
GitHub Cheat Sheet
GitHub Glossary
GitHub For Academics
Jekyll
Sites Using Jekyll
Blog Migrations to Jekyll
Markdown
Official Markdown Spec
Printable Markdown Cheatsheet
Markdown Cheatsheet
GitHub Flavored Markdown
