Jekyll+Github的一個簡單範例
所謂在GitHub上使用Jekyll,其實就是把適當的Jekyll的檔案架構和名稱放置到GitHub上而已,因為GitHub已經開啟了Jekyll的服務,所以只要架構與名稱合符了規定,就可以被靜態生成出blog文件,點擊這裡可以知道Jekyll目前在GitHub上的版本是多少。
第零步、事前準備
- 到Github申請一組個人帳號
第一步、建立儲存庫
值得注意,命名儲存庫時有兩種方式:
- 自訂專案名稱
- 命名為
你的帳號.github.io
這兩種結果分別會影響你專案網站的URL:
1.選擇自訂專案名稱,能夠讓你的專案完整放置在你的帳號.github.io/你的專案名稱
下,但有一個規定是必須在gh-pages
分支下才會生成網頁文件,當然一個GitHub帳號能擁有多個專案網站~
2.如果選擇你的帳號.github.io的方式的話,URL便是你的帳號.github.io
,使用master
分支便能夠正常建置。官網上快速建置的教學
在這一篇裡我會介紹自訂專案名稱的做法,為什麼呢?因為方法能套用在第2點上
###1.首先創建一個專案
按new repository
###2.命名專案名稱
這裡填上blog
然後會看到這個頁面
##第二步、創建專案資料夾
1.在你的電腦上,創建一個目錄,名稱要與剛在github上創建的專案名稱相同
2.進入目錄
3.對目錄進行初始化
4.切換成gh-pages
分支,因為github規定只有在該分支下才會生成網頁文件
$ mkdir ~/blog
$ cd ~/blog
$ git init
$ git checkout --orphan gh-pages
接下來的動作都需要在gh-pages分支下完成
##第三步、創建部落格結構
請在~/blog
的路經底下操作
1.建立_config.yml文件vim _config.yml
並加入以下內容
baseurl: /blog
目錄結構變成:
#
2.建立index.html文件 vim index.html
並加入以下內容
目錄結構變成:
# 3.建立_layout資料夾並在裡面建立default.html文件
$ mkdir _layout
$ touch _layout/default.html
編輯default.html vim _layout/default.html
並加入以下內容
目錄結構變成:
# 4.建立_posts資料夾並在裡面建立2012-08-25-hello-world.html文件
- 值得注意,文章一律放置於 _posts 資料夾底下,文章要按照 年-月-日-名稱.副檔名 來命名
$ mkdir _posts
$ touch _posts/2012-08-25-hello-world.html
編輯2012-08-25-hello-world.html vim _posts/2012-08-25-hello-world.html
並加入以下內容
目錄結構變成:
基本上現在就有一個簡單的架構jekyll,只要上傳至github就大功告成。
##第六步、上傳發布
$ git remote add origin https://github.com/你的用戶名/blog.git
$ git add .
$ git commit -m "first post"
$ git push origin gh-pages
以後文章如果有新增或更改,只要執行上面的3行指令重新上傳發布即可
上傳成功後,再等個10幾分鐘,連上 http://你的用戶名.github.com/blog/ 就可以看到了,如沒有的話…再多按幾下重新整理
效果大概是這樣:
#
嗯!沒錯!因為這是最陽春的架構所以介面非常的難看簡潔,不過如果你喜歡從無到有開始打造你的部落格,這種簡潔風格應該很適合你,不過由於太過醜陋簡潔,甚至連我都無法直視XDD,所以下一篇會教學如何從官方默認模版(Theme)開始,修改成自已理想的外觀