寫在前面
此篇博文為翻譯之作，原文鏈接為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 >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 >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 rel="self"/>
<link />
<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
