這篇教學將介紹如何用Github Pages和Jekyll搭建部落格。其優點是快速、免費、免架站，相較於wordpress客製化彈性高，更支援用Markdown語法寫文章。推薦給廣大工程師朋友們！

目錄

簡介

GitHub Pages

GitHub Pages 是GitHub推出的免費網頁服務。個人頁面的連結就是[GitHub使用者名稱].github.io，意味著你不需要花錢買網域！

此外，更新網頁很方便，只要利用Git將HTML檔案push到GitHub上即可。

GitHub Pages支援兩種格式：

  • 靜態網頁
  • Markdown格式的純文字檔（透過Jekyll轉換成靜態網頁）

Jekyll

Jekyll 是一個將文字檔轉換成靜態HTML的產生器，支援Markdown語法。

GitHub Pages支援Jekyll，所以在GitHub Pages上用Markdown寫文章非常容易。

快速搭建

想要快速感受一下部落格架起來的樣子，步驟如下：

  • 在Github創建一個名為[GitHub使用者名稱].github.io的repo，clone到本地端。

  • 在資料夾底下建一個Gemfile：

source 'https://rubygems.org'
gem 'github-pages'
  • 安裝Jekyll跟一些套件：
gem install bundler
bundle install
  • 產生預設內容：
bundle exec jekyll new . --force
  • 在本地端測試：
bundle exec jekyll serve

此時在瀏覽器打開localhost:4000就會看到熱騰騰的部落格了！

最後，把所有東西Push上去，就可以在[GitHub使用者名稱].github.io看到自己的部落格了！

使用現成版型

快速搭建起來的部落格外觀比較沒有美感，此時我們可以考慮客製化或是使用現成版型。

客製化需要先搞懂很多Jekyll的眉角，因此我推薦套用現成版型，可以節省一些時間。

Google關鍵字jekyll theme就可以找到很多現成的版型。Jekyll Theme是一個不錯的範例。

套用現成版型的步驟如下：

  1. Fork你喜歡的版型的repo
  2. 在GitHub的設定裡，把fork過來的repo名稱改成[GitHub使用者名稱.github.io]

實測在master branch裡面commit一篇新的文章之前，GitHub Pages永遠顯示404 not found，推測在master branch有commit才會觸發GitHub Pages去更新頁面。

寫文章

寫文章很容易，只要在_post/底下新增一個markdown格式的純文字檔，Jekyll就可以幫你變成靜態HTML網頁。

為了要讓Jekyll正確處理，需要按照一定的格式去寫：

  1. 檔名是YYYY-MM-DD-title-of-a-post的形式，副檔名是.md或.markdown的形式。
  2. 內容的開頭用兩條橫線包成一個區塊，稱為Front Matter。開頭有Front Matter的文件，才會被Jekyll特別處理。Front Matter是用來定義一些Jekyll處理時需要的變數，例如：
---
layout: post
title: An Example Post
---
This is the content.

其中layout是用來指定要用什麼版型來呈現頁面。定義了layout: post，Jekyll就會去用_layout/post.html來呈現頁面。

結論

用Github Pages + Jekyll，搭架部落格和寫文章都非常容易。我推薦寫部落格使用GitHub Pages。

至於想要客製化版面或功能，可以參考Jekyll Documentation，先讀過一遍Jekyll的原理和設定。

相關文章