Github Pages + jekyll 全面介紹極簡搭建個人網站和部落格
本文將會全面介紹一下如何使用Github pages + jekyll搭建個人站點，所謂 極簡 的意思就是不用使用git和本地構建jekll服務，直接在Github網站上編輯設定即可，但會涉及到jekll的一些配置和程式設計控制。可以參看我的網站模板： ofollow,noindex">https://scottcgi.github.io 使用了github內建的主題修改而成。
第一步，建立Github倉庫
首先到 這裡Github ，建立一個倉庫。
倉庫名稱有固定的格式： username.github.io ，其中 username 必須是Github賬戶的使用者名稱（我的是scottcgi），github.io是固定的，這個地址將會成為個人站點的網站地址。另外，我們可以勾選 Initialize this repository with a README ，讓倉庫自動建立一個README.md檔案，我們用它來做站點的首頁（當然也可以不建立，後面自行建立，或是建立index.html也行）。
注意：username如果不是Github賬戶名，這個倉庫就會成為 username.github.io 的子站點，比如訪問地址會是： username.github.io/aaa.github.io 。可見， username.github.io 是github預設分配給你的域名，同名倉庫即代表著預設網站內容。而 username.github.io/倉庫名稱 ，是用來訪問你的其它倉庫的地址。
第二步，設定倉庫開啟Github Pages
進入倉庫設定介面，如圖。
這裡能夠重新修改倉庫的名稱，比如這個倉庫內容是fork別人的，就可以在這裡修改成自己的 username.github.io 名稱。
在 Setting 頁面下有Github Pages的設定選項。綠色表示部署成功，每次修改倉庫內容，都會出發Github jekyll重新編譯部署，需要1-2分鐘的時間，更新才能體現。如果有編譯錯誤，包括js，css，html，markdown語法問題，都會顯示紅色以及錯誤頁面和行號，同時會發郵件通知。其中， Source 有以下幾個選項：
gh-pages branch master branch master branch/docs folder None
如果是 username.github.io 只能使用主分支，其它倉庫專案可以選擇其它兩個。接下來Choose a theme是Github提供的內建的網站主題，選擇即可應用無需其它設定。Custom domain是自定義域名，本文暫不討論。
第三步，使用Github內建主題
選擇好主題，過一會重新整理網站地址就已經能看到效果了，而在 Code 頁面僅有兩個檔案。
編輯README.md檔案的內容，就會預設顯示在網站首頁， _config.yml 是jekyll的全域性配置檔案，現在裡面只有一句話， theme: jekyll-theme-modernist 。我們可以手動修改這個theme主題配置，網站就會應用不同的主題。
Github內建支援的幾個主題，官方的倉庫在這裡： https://pages.github.com/themes ，每個README.md裡都有介紹如何設定。
那麼我們現在就有兩種方法來使用這些主題：
- 第一種，就是直接fork一個主題倉庫，然後修改倉庫名稱為我們自己的，然後修改我們需要的部分。
- 第二種，只是簡單的Choose (Change) theme（或在_config.yml設定theme），然後我們對照著官方倉庫的主題目錄，需要改什麼檔案就按照同樣的路徑拷貝單獨一個檔案到自己的倉庫來修改（保持路徑一致），這樣就可以保持自己倉庫的簡潔。（如果使用了github內建的主題，github就會把你倉庫的內容和內建主題內容合併到一起編譯成靜態網頁。）
另外，更多主題可以參看這兩個地址（不要挑花眼了）： jekyll themes 和 jekyll wiki site 。
第四步，jekyll的目錄結構
我們只需要關注幾個核心的目錄結構如下（可以自己建立）：
-
_layouts（存放頁面模板，md或html檔案的內容會填充模板） -
_sass（存放樣式表） -
_includes（可以複用在其它頁面被include的html頁面） -
_posts（部落格文章頁面） -
assets（原生的資原始檔）js css image
-
_config.yml（全域性配置檔案） -
index.html, index.md, README.md（首頁index.html優先順序最高，如果沒有index，預設啟用README.md檔案） -
自定義檔案和目錄
更多更詳細的目錄結構參看jekyll官網： https://jekyllrb.com/docs/structure
第五步，jekyll的模板程式語言Liquid的使用
-
變數
{{ variable }}被嵌入在頁面中，會在靜態頁面生成的時候被替換成具體的數值。常用的全域性變數物件有：site和page。這兩個物件有很多預設自帶的屬性，比如：{{ site.time }}，{{ page.url }}。更多的預設值參看： https://jekyllrb.com/docs/variables 。-
site物件對應的就是網站範圍，自定義變數放在_config.yml中，比如title:標題使用{{ site.title }}訪問。 -
page物件對應的是單個頁面，自定義變數放在每個頁面的最開頭，比如：--- myNum:100 myStr:我是字串 ---
使用{{ page.myNUm }}和{{ page.myStr }}訪問。
-
-
條件判斷語句，更多詳見： https://shopify.github.io/liquid/tags/control-flow
{% if site.title == 'Awesome Shoes' %} These shoes are awesome! {% endif %} {% if site.name == 'kevin' %} Hey Kevin! {% elsif site.name == 'anonymous' %} Hey Anonymous! {% else %} Hi Stranger! {% endif %} -
迴圈迭代，更多詳見： https://shopify.github.io/liquid/tags/iteration
{% for product in collection.products %} {{ product.title }} {% endfor %} -
預設函式，可以對變數進行一些處理，比如大小寫轉化、數學運算、格式化、排序等等，在Liquid中叫做Filters。比如
{{ "Hello World!" | downcase }}轉換字串為小寫。更多內建函式詳見： https://jekyllrb.com/docs/liquid/filters
第六步，使用_config.yml檔案設定jekyll
如果不是fork別人的倉庫，就需要自己建立一個這個檔案。然後，我們就可以配置一些預設的屬性來控制jekyll的編譯過程。更多詳細的內建屬性詳見： https://jekyllrb.com/docs/configuration/default
同時我們可以自定變數，會自動繫結到 site 物件上，比如我們可以把導航配置到_config.yml中：
nav: - name: Home link: / - name: About link: /about.html
// 以下嵌入頁面，page.url以 "/" 開頭
<nav>
{% for item in site.nav %}
<a href="{{ item.link }}"
{% if page.url == item.link %} style="color: red;" {% endif %}
>
{{ item.name }}
</a>
{% endfor %}
</nav>
當然，我們也可以把一些資料單獨放入一個 yml 檔案，然後放在固定的資料資料夾 _data 下，比如 _data/navigation.yml ，這樣訪問這個檔案的資料物件就是 site.data.navigation 。
第七步，_layouts模板配置
_layouts 資料夾存放的是頁面模板，預設需要一個 default.html ，什麼意思？就是說，layout提供一個頁面的佈局框架，這是固定的模式，包括樣式、結構、佈局、指令碼控制等等。然後，我們在用其它md或html檔案去動態填充這個框架，這樣就形成了一個完整的頁面。比如我的 default.html 頁面如下：
<!doctype html>
<html lang="{{ page.lang | default: site.lang }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% seo %}
<link rel="icon" href="https://avatars0.githubusercontent.com/u/1797320" type="image/x-icon" title="scottcgi">
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
<script src="{{ '/assets/js/scale.fix.js' | relative_url }}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<div class="wrapper">
<header {% unless site.description or site.github.project_tagline %} class="without-description" {% endunless %}>
<h1>{{ site.title | default: site.github.repository_name }}</h1>
<p>{{ page.description | default: site.description }}</p>
<ul>
{% for item in site.nav %}
{% if page.url == item.link %}
<li style="background-color:#069">
<a href="{{ item.link }}">
<strong>{{ item.name }}</strong>
</a>
</li>
{% else %}
<li><a href="{{ item.link }}">{{ item.name }}</a></li>
{% endif %}
{% endfor %}
</ul>
</header>
<section>
{{ content }}
</section>
</div>
<footer>
<p>{{ site.copyright | default: "copyright not found in _config.yml" }}</p>
</footer>
</body>
</html>
-
{% seo %}是jekyll的一個外掛提供的seo優化，詳情在這裡： https://github.com/jekyll/jekyll-seo-tag - 核心在於
{{ content }}這個變數是內建的，會用我們的md或html頁面填充這部分內容。 - 其它的，我們看到會大量使用變數和流程控制程式碼，來填充模板的方方面面。
- 於是，填充模板的內容，一方面是來自配置檔案，一方面是來自
_include的頁面，還有就是來自{{ content }}對應的頁面。
當然，我們也可以不使用 {{ content }} 來填充模板，而是使用 _include 的頁面來代替 {{ content }} ，但這樣不夠靈活，因為使用 {{ content }} ，我們可以在每個頁面單獨設定對應的 layout 模板。
第八步，md和html頁面編寫
站點內容頁面，可以使用markdown或html來編寫，但markdown編寫的md檔案，在瀏覽器地址訪問的時候依然使用html檔案字尾。推薦使用markdown來書寫內容，語法參見： github md 示例 和 github md 教程 。比如下面這個About.md頁面：
--- layout: default title: About --- # About page This page tells you a little bit about me.
layout: default 就是告訴jekyll這個頁面使用哪個模板，即這個頁面會放入哪個模板的 {{ content }} 。當然，我們可以在 _layouts 資料夾下提供多個不同的模板，然後根據需要不同的頁面使用不同的 layout 。
頁面可以放在任意位置和目錄，訪問的時候從站點域名開始，帶上目錄名稱，再次注意需要使用html結尾。如果想要自定義瀏覽器的訪問路徑，可以參看詳細設定： permalinks 。
至此，我們就可以在github上，新建md檔案然後編輯提交，等待幾分鐘編譯生成之後，就可以在瀏覽器裡看到頁面內容了。
第九步，部落格文章編寫和管理
我們自然可以新建目錄，提交文章，然後新增一個文章列表頁面。但我們也可以把這些交給jekyll的內建機制來完成，因為它提供了一些方便的內建文章管理功能。
-
_posts資料夾是內建的放置文章的目錄，我們可以將固定格式year-moth-day-name.md名的md檔案放到這裡。--- layout: post --- 這是一篇部落格文章。
-
接下來我們需要新增一個
post的模板頁面到_layouts資料夾下面。--- layout: default --- <h1>{{ page.title }}</h1> <p>{{ page.date | date_to_string }} - {{ page.author }}</p> {{ content }}可見，模板頁面本身也可以使用模板，這裡
post使用了default模板，而這裡{{ content }}就會填充_posts下面編寫的頁面（如果頁面使用了layout: post模板）。 -
最後，我們還需要編寫一個部落格文章列表的頁面，用來展示所有的文章。比如在根目錄新建
blog.html頁面：--- layout: default title: Blog --- <h1>Latest Posts</h1> <ul> {% for post in site.posts %} <li> <h2><a href="{{ post.url }}">{{ post.title }}</a></h2> <p>{{ post.excerpt }}</p> </li> {% endfor %} </ul>-
site.postsjekyll會自動生成_posts目錄的物件。 -
post.url在_posts目錄下的頁面，jekyll會自動會設定url。 -
post.title預設是文章名稱，但也可以在文章頁面覆蓋這個title: 我的文章自定義名稱。 -
post.excerpt預設是文章第一段的摘要文字。
-
第十步，Github Pages的限制
Github Pages 並不是無限儲存和無限流量的靜態站點服務，並且還有一些規則需要遵守，比如不能放色情內容。一些限制如下：
- 內容儲存不能超過1GB
- 每個月100GB流量頻寬
- 每小時編譯構建次數不超過10次。（線上修改重新編譯並未發現這個限制）
- 更多參看官方說明： usage-limits
總結
在實際的使用過程中，我發現完全可以在Github網站上，編寫md和html頁面，修改js和css檔案，來完成站點的設定和搭建。只不過每次修改都要觸發Github jekyll的編譯行為，有點慢（不知道是不是增量編譯），沒有在本地修改除錯的速度快。
更多jekyll詳細的設定和功能，參看官方網站的文件（都寫的清清楚楚了）： https://jekyllrb.com/docs 。