寫在前面
此篇博文為翻譯之作简烘，原文鏈接為Creating and Hosting a Personal Site on GitHub.
正文
需要用到的知識
- 版本控制
- Git
- GitHub
- HTML
- CSS
- Markdown
當(dāng)然物喷，并不需要對這些很熟練黍判。一種很好的學(xué)習(xí)方法是“做中學(xué)”（learn by doing)
此篇博文著重介紹如何用github.com的網(wǎng)頁界面去建個人網(wǎng)站
什么是Git,GitHub和GitHub Pages
簡單來說，Git是完成事情的工作流挪鹏，而GitHub和GitHub Pages 是存儲你完成東西的地方袁辈。使用Git的項目公開地保存在GitHub 和GitHub Pages 上汗洒，于是廣義上說，Git 是你可以在你個人PC上做的事情崩溪，GitHub是存儲你做出東西的公開服務(wù)器浅役。
Git
Git 是一個版本控制系統(tǒng)，跟蹤項目中文件的修改情況伶唯。記錄文件的修改——添加了什么觉既？刪了什么？誰做的這些修改乳幸？什么時間修改的瞪讼？尤其在軟件合作開發(fā)時適用。這種合作的特性引起了人們把他當(dāng)做一項幫助自己編輯工作流的工具粹断。
Git 可以高效管理多個版本文件并且回到不同版本的文件而不需要被保存在不同地方的不同版本的文件名所迷惑尝艘。從這個意義上來說，Git 和版本控制就像神奇的取消按鈕姿染。
在下面的示意圖中背亥，每個文檔表示一個保存過程。沒有Git, 你不能回到最初的文檔和最終文檔間的任意一個文檔狀態(tài)悬赏。如果你想修改最終的文檔狡汉，要刪掉一些不能復(fù)原的東西，這時你會選擇另存為闽颇，然后在進行刪除操作盾戴。
有了Git之后，這個流程有了更多的方向兵多。每一個修改都會被標(biāo)記尖啡。如果你想回到早期的版本，剩膘，你就可以可以在不損失數(shù)據(jù)的情況下回到早期文檔衅斩。
詳細了解Git
GitHub Pages
GitHub Pages 是通過GitHub免費的公開網(wǎng)頁。GitGub用戶可以創(chuàng)建并且擁有自己的網(wǎng)站怠褐，以及連接自己在GitHub上項目的網(wǎng)站畏梆。
新建個人網(wǎng)頁
step 1
創(chuàng)建項目存儲倉庫
step 2
將自己的倉庫命名為username.github.io ,username是你的GitHub用戶名。
step 3
創(chuàng)建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
提交后你就有了一個自己的網(wǎng)站
http://username.github.io
step 5
創(chuàng)建樣式
添加鏈接至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 是一個很輕大的靜態(tài)網(wǎng)頁產(chǎn)生器。跟GitHub一起使用奠涌，Jekyll會自動重新生成所有的改動過文件的HTML頁面宪巨。Jekyll之所以這么好用是因為它依賴模板。當(dāng)你使用靜態(tài)網(wǎng)頁生成器時溜畅，模板是你的好朋友捏卓。
在github.com上使用Jekyll
step 1
新建 .gitignore 文件。這個文件告訴Git忽略_site目錄慈格，每次你提交文件時天吓，Jekyll會自動產(chǎn)生網(wǎng)頁。因為這個目錄下的文件是在你每次提交時寫入峦椰，所以不希望受版本控制的影響龄寞。
step 2
新建 _config.yml文件，這個文件告訴Jekyll關(guān)于你項目的基本信息汤功。舉個例子物邑，我們告訴Jekyll我們網(wǎng)站的名字以及我們所使用的markdown的版本
name: Hank Quinlan, Horrible Cop
markdown: kramdown
新建_layouts目錄，在里面新建文件default.html
這時我們主要的模板滔金，它會應(yīng)用到所有<head>和<footer>元素上面去色解。于是我們不需要在每個頁面的源碼上重復(fù)勞動。
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.現(xiàn)在當(dāng)你每次提交一個文件當(dāng)文件頭明確指出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嚴(yán)格要求命名，YYYY-MM-DD-title-of-my-post.md那么例子應(yīng)當(dāng)命名為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會將其轉(zhuǎn)換為HTML错英。提交這個post之后，你就便可以在http://username.github.io/YYYY/MM/DD/name-of-your-post中看到post了隆豹。
但是你的讀者并不知道你的post的正確URL椭岩。所以下面我們需要新建一個頁面，在上面羅列出我們博客的標(biāo)題及超鏈接璃赡。
step 3
新建一個blog目錄判哥，并且新建一個文件index.html。為了列出我們的post,我們需要用一個foreach循環(huán)去新建一個我們博客的無序列表碉考。
---
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.每次你發(fā)布一篇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 - 自定義域名
- 添加博客的頁數(shù)統(tǒng)計
- 新建
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
