在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作為你的網址? 設定一個自定義域。
- 成為一個編碼專家,並建立您的網站的開發分支。 每次您要修復一個錯誤或新增一個新功能時,您都可以建立主分支的副本,進行更改,然後將該分支合併到主分支。 這個想法是保持主分支清潔。
乾貨
我會盡力保持這份名單目前和最新。 如果你知道更好的資源,你想分享或注意到資源有問題,請聯絡。