在GitHub上建立和託管個人網站(下)
在 github pages中使用Jekyll
github pages會自動識別 Jekyll檔案，所以如果你新增資料夾和檔案遵循特定的命名約定，當你將相關Jekyll檔案提交給GitHub，Jekyll就會神奇地建立你的網站。
雖然我建議在自己的計算機上設定Jekyll，以便您可以在本地編輯和預覽您的網站，並準備好後，將這些更改推送到您的GitHub，但是，為了快速掌握Jekyll的工作方式，我們將使用GitHub Web介面將Jekyll構建到我們的GitHub倉庫中。
什麼是 Jekyll
Jekyll是一個非常強大的靜態站點生成器。 對於沒有複雜架構的簡單網站，如個人網站， 當與GitHub一起使用時，Jekyll會在您每次提交檔案時自動為您的網站重新生成所有的HTML頁面。
Jekyll使管理您的網站更容易，因為它取決於模板。 在使用靜態站點生成器時，模板（或者Jekyll術語中的佈局）是您最好的朋友。 我不必在每個建立的頁面上重複相同的導航標記，如果我新增，刪除或更改導航專案的位置，則必須在每個頁面上編輯這些導航標記，我可以建立Jekyll所稱的佈局，以便在所有頁面上使用 我的網頁。 在本教程中，我們將建立兩個Jekyll模板來構建您的網站。
在 github.com 構建Jekyll
為了讓Jekyll和您的網站一起工作，您需要遵循Jekyll的目錄結構。 要了解這個結構，我們將把它構建到我們的GitHub倉庫中。
- 建立一個.gitignore檔案。 這個檔案告訴Git忽略每次提交時Jekyll自動生成的_site目錄。 因為這個目錄和裡面的所有檔案都是在你提交的時候被寫入的，所以你不需要這個目錄在版本控制之下。
建立成功後 複製下面的文字到.gitignore檔案中
_site/- 建立一個_config.yml檔案，告訴Jekyll關於你的專案的一些基礎知識。 在這個例子中，我們告訴Jekyll我們網站的名字和我們想用什麼版本的Markdown：
在_config.yml檔案檔案中寫入
name: Hank Quinlan, Horrible Cop
markdown: kramdown在這一點上，我希望你已經使用GitHub網頁介面建立好了檔案和目錄，所以我將停止使用截圖來說明這些操作。
- 製作一個_layouts目錄，並在其中建立名為default.html的檔案。 （記住，你可以在建立新檔案時建立目錄，如果你忘記了，請參閱main.css步驟。）
這是我們的主要佈局，將包含像<head>和<footer>這樣的重複元素。 現在我們不必在我們建立的每一個頁面上重複這些標記，使得我們的網站的維護更容易。 因此，讓我們將這些元素從index.html移動到default.html中，最後得到如下所示的內容：
<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</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">
{{ content }}
</div><!-- /.container -->
<footer>
<ul>
<li><a href="mailto:[email protected]">email</a></li>
<li><a href="https://github.com/hankquinlan">github.com/hankquinlan</a></li>
</ul>
</footer>
</body>
</html>記請記住{{page.title}}和{{content}}標籤。 他們就是jekyll中的liquid標籤，這些標籤用於將內容注入最終的網頁。
- 現在更新您的index.html使用您的預設佈局。 用下面的替換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。 您網站上的任何檔案都將由Jekyll進行處理。 每次提交指定layout：default的檔案時，Jekyll都會通過將_layouts / default.html中的{{content}替換為已提交檔案的內容來神奇地生成完整的HTML文件。真棒！
寫一篇部落格到自己的網站
Jekyll非常靈活，可以根據需要擴充套件您的網站，但在本指南中，我們只會介紹基礎知識：
- 建立一篇部落格
- 建立一個列出所有部落格的頁面
- 為部落格建立超連結
- 為部落格建立RSS feed
我們希望為我們的部落格帖子建立一個新的佈局，名為post.html，併為每個帖子儲存一個名為_posts /的資料夾。
- 從建立佈局開始。 在_layouts資料夾中建立一個名為post.html的檔案。 注意帖子佈局使用預設佈局作為基礎，並新增一些新的
liquid標籤來列印帖子和日期的標題：
---
layout: default
---
<h1>{{ page.title }}</h1>
<p class="meta">{{ page.date | date_to_string }}</p>
<div class="post">
{{ content }}
</div>- 建立一個_posts /目錄，用來儲存我們的部落格文章。 Jekyll對這些檔案的命名非常嚴格，所以要注意。 它必須遵循約定YYYY-MM-DD-title-of-my-post.md(如:2017-09-我的第一篇部落格.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，檔案內部使用的Markdown語法由Jekyll轉換為HTML。 和Wikitext一樣，Markdown是一種標記語言，語法更接近純文字。 Markdown的想法是擺脫作者的方式，以便他們可以快速編寫HTML內容，使Markdown非常適合作為部落格創作語法。
所有這一切都很棒，但是您的讀者並不總是知道您帖子的確切網址。 接下來，我們需要在我們的網站上建立一個頁面，列出每個帖子的標題和超連結。 您可以在您的主頁上建立此列表，或者建立一個收集您所有帖子的部落格子頁面。 我們打算做後者。
- 建立一個部落格目錄，並在其中建立一個名為index.html的檔案。 要列出每篇文章，我們將使用一個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>您可能已經注意到您的部落格文章的網址不包含其中的部落格目錄。 在Jekyll中，我們可以通過編輯_config.yml檔案來控制我們固定連結的結構。因此，讓我們改變我們的固定連結結構以包含部落格目錄。
複製下面的內容到_config.yml檔案
permalink: /blog/:year/:month/:day/:title為您的部落格設定RSS提要也非常簡單。 每當你釋出一個新的帖子，它將被新增到這個RSS檔案。
- 在你的blog /目錄裡建立一個檔案並命名為atom.xml。 將此新增到檔案中：
---
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>[email protected]</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>注意：在Chrome中，您的Feed可能看起來像是一個錯誤，但事實並非如此。 Chrome不知道如何顯示XML。
剩下還要做一些事
- 不要忘記建立並提交about / index.html和cv / index.html頁面。讓你自己完成這些頁面。
- 在繼續之前，花點時間在你自己的電腦上設定Git和Jekyll。 本教程是關於在Web瀏覽器中的Git，所以真的只是九牛一毛。 如果您希望能夠將影象或PDF檔案上傳到您的GitHub倉庫，您將不得不這樣做。 GitHub的教程和桌面應用程式使本地設定變得簡單，現在您已經瞭解了許多Git和GitHub的基本概念，您應該能夠做到這一點。
希望本指南能夠讓您有信心使用Git，GitHub，Jekyll以及您的網站或部落格來做其他許多事情。 在這一點上，你可以走很多不同的方向，因為我相信你已經開始思考了，但是這裡還有一些我認為值得你花費的時間：
建立_includes。 他們很像_layouts，只有更小的標記片段，可以注入到_layouts和頁面。
嘗試建立一個將Google Analytics（分析）跟蹤程式碼插入到<head>中的_include檔案，以便您可以獲取網站訪問者的統計資訊。 這是一個例子。
想要評論您的部落格？ 建立一個DISQUS
_include並在你的post.html佈局中呼叫它。不想用github.io作為你的網址？ 設定一個自定義域。
- 成為一個編碼專家，並建立您的網站的開發分支。 每次您要修復一個錯誤或新增一個新功能時，您都可以建立主分支的副本，進行更改，然後將該分支合併到主分支。 這個想法是保持主分支清潔。
乾貨
我會盡力保持這份名單目前和最新。 如果你知道更好的資源，你想分享或注意到資源有問題，請聯絡。