Jekyll x Github x Blog (Part 1)

由於身邊大部份的同事們都擁有屬於自己的部落格,用來分享技術或記錄自己的學習過程等,讓我有了很大的動力來製作屬於自己的部落格。本篇主要是記錄 Jekyll 部落格的架構,Jekyll x Github x Blog (Part 2) 會分享一些功能的實作,更詳細的教學可參考 Jekyll 官網

Jekyll 簡介

Jekyll 是一個部落格平台,主要的功能是能夠讓人們可以在 Github 上使用靜態的 HTML 頁面建置部落格。使用者使用 markdown 語法撰寫部落格文章,Jekyll 則會透過動態模板 (Template) 將文章轉為靜態 HTML 網頁。同時 Github Pages 也提供方便的 Host 功能,只需要將你的專案存在 Github 的儲存庫 (Repository) 中,就能夠讓 Github 來協助我們作 Host 的動作,不用再費其他心思。

alt text

靜態頁面的好處

當初會選擇使用 Jekyll 來當製作部落格的工具主要是因為以下的原因:

快速建置 Jekyll 部落格

建置一個 Jekyll 部落格主要有兩種方法:

建立基礎

開始的第一步是將 Poole/Hyde 的內容搬到我們自己的部落格儲存庫內。這邊要使用 Fork 或是 Clone 都可以,看各位喜好。

特別注意的是,在命名儲存庫時有兩種選擇:

這兩種命名方法會影響部落格的 base URL 與版本分支結構:

使用自訂專案名稱的話,此儲存庫的 Github Page 會是一個專案網站。你的部落格 base URL 會是 你的帳號.github.io/你的專案名稱,同時必須將專案內容放到 gh-pages 的分支下,才能夠正常建置。每一個 Github 帳號能夠擁有多個專案網站。

另一方面,專案使用特定名稱 你的帳號.github.io 的話,此儲存庫的 Github Page 會成為使用者網站。部落格的 base URL 則是 你的帳號.github.io/。專案內容放在預設的 master 分支底下就能夠正常建置頁面。要注意的是每個 Github 帳號只能夠有一個使用者網站。

確定加入所有內容並 Push 後就算完成第一步,如果對應儲存庫的命名與存放內容的分支都正確的話,你已經可以在此儲存庫專屬的網址內看到 Poole/Hyde 的內容囉。

部落格結構

接著讓我們來看看 Poole 的基本架構,詳細的結構可以在 Poole/Hyde 的官方 Github 頁面查詢:

404.html
CNAME
LICENSE.md
README.md
_config.yml
_includes
_layouts
_posts
about.md
atom.xml
index.html
public

當在本地端使用 jekyll buildjekyll serve 建置後,會有一個 _site 的資料夾產生,此資料夾是建置後的結果。在建置的過程中,所有的專案內容,除了有底線開頭的檔案都會被複製到這個 _site 資料夾中,markdown 檔案則會透過 Liquid 動態模板轉換成靜態 HTML 頁面。

_posts 資料夾是用來存放所有 markdown 格式的部落格文章,Poole 預設的範例文章如下:

2013-12-31-whats-jekyll.md
2014-01-01-example-content.md
2014-01-02-introducing-poole.md

新增文章的方法很簡單,只需要另存一份 markdown 檔案到 _posts 資料夾內,Jekyll 就會自動生成新頁面了。這邊比較需要注意的是檔案的命名規則,必須以 “年-月-日-文章標題.md” 的規則來命名。

index.html 應該不用解釋太多,簡單來說就是初始呈現出來的網頁結構,about.md 則是自我介紹頁面,雖然說是頁面,但它其實只是個 markdown 格式的文章偽裝成頁面罷了。

_config.yml 是很重要的檔案,部落格內的所有設定都必須到 config.yml 內去做,可設定的內容包含網址路徑,網站描述,markdown 的寫法等,詳細的內容可到 Jekyll Configuration 查看。

最後,_layout_include 資料夾裡面裝著所有組成部落格的 boilerplate HTML 檔案:

default.html
page.html
post.html
$ ls -1 _includes/
head.html

樣式微調

Poole/Hyde 有內建的一些樣式提供簡單的客製化功能,如下圖: Hyde in red

以下是 Poole/Hyde 提供的八個內建顏色: Hyde theme classes 要改變顏色很容易,只需要在 default.html 加入對應的 class 到 <body> 就完成了。範例如下:

<body class="theme-base-08">
  ...
</body>

Poole/Hyde 也提供將導覽 bar 調到右邊的樣式: Hyde with reverse layout 要達成此效果也很簡單,一樣在 default.html 中的 <body> 內加入 layout-reverse 的 class 就可完成。範例如下:

<body class="layout-reverse">
  ...
</body>

如果你了解一些 CSS 的技巧,也可以加入自己的 CSS 檔案,剩下的就是自由發揮了。

總結

使用 Jekyll 建置一個簡易的部落格不是一件難事,它擁有單純,方便與自由度等優點。但是,當你需要某些特殊功能時又該怎麼做呢?沒錯,就是自己動手刻。在 Jekyll x Github x Blog (Part 2) 文章內,我會分享如何實作改善文章顯示方法,評論,標籤與加入 Google Analytics 等功能。如果文章內有任何錯誤或問題,歡迎各位討論糾正。

profile-image
Hello, I'm Rhadow. A software engineer curious about how nature works. Dreaming to simulate our world in computer one day.
comments powered by Disqus