Github

利用Jekyll與Github Page建立自己的Dev-Blog

想建立一個自己的Dev Blog嗎?有些人一直想要創一個屬於自己的開發者Blog,但是卻沒有經費去申請網頁主機,或是覺得Wordpress門檻太高,安裝步驟太繁雜。其實有更好的選擇,你可以使用Jekyllhexo之類的平台,直接創一個自己的靜態Blog。空間也不用擔心,因為他只是一堆靜態網頁檔而已,可以直接在GithubGitCafe部屬即可。況且,Github Pages目前也有支援Jekyll,也就是說你不需要做一大堆的設定就可以使用。那還能不用Jekyll嗎?


下載Jekyll

因為Jekyll是基於ruby的語言寫的,所以你必須先安裝Ruby才能使用。當你安裝完Ruby後(含gem),你就可以使用下面的步驟安裝Jekyll。

1
~$ gem install jekyll

接下來要利用jekyll建立一個新專案並啟動Server

1
2
3
~$ jekyll new my-awesome-site
~$ cd my-awesome-site
~/my-awesome-site$ jekyll serve

基本上就這樣而已,很簡單吧。


部屬至Github

Github有一個Pages的服務,讓你可以把自己的靜態網頁丟到Github上。如果你使用Jekyll就簡單了,只要把整包產出來的檔案直接Push到Github上就可以。不過這邊有兩個設定的問題,你的網址是要自訂?還是直接用Github所提供的account.github.io網址呢?


Plan A.我想要使用Github內建的github.io網址

如果你要使用內建的就比較簡單,只要確認你的branch是在master上,並將Repo名字設定為account.github.io(**記得要把account改成你的帳號**),後續直接將檔案推到Github上面即可。

1
2
3
4
5
6
~/my-awesome-site$ git init
~/my-awesome-site$ git add .
~/my-awesome-site$ git commit -m 'init git'

git remote add origin https://github.com/account/account.github.io.git
git push -u origin master

Plan B.我想要使用自己購買的網址

如果你想要使用自己購買的網址,你必須要先將branch設定為gh-pages,並新增一個CNAME的檔案,內容為你要綁定的網址。(**這邊就不限定Github的repo名稱**)並到你的網址供應商那邊將網址使用CNAME
的方式綁定至account.github.io

1
2
3
~/my-awesome-site$ vi CNAME

seans.tw

1
2
3
4
5
6
7
~/my-awesome-site$ git init
~/my-awesome-site$ git checkout -b gh-pages
~/my-awesome-site$ git add .
~/my-awesome-site$ git commit -m 'init git'

~/my-awesome-site$ git remote add origin https://github.com/account/account.github.io.git
~/my-awesome-site$ git push -u origin gh-pages

當你push到Github上的時候,就可以直接使用網址看到你的Blog囉!


如何新增文章

在Jekyll中,資料夾架構如下:

1
2
3
4
5
6
7
my-awesome-site
|-- _drafts 草稿資料夾
|-- _layouts 模版資料夾
|-- _plugins 外掛資料夾
|-- _posts 文章資料夾
|-- _site 靜態網頁轉換存放處
|-- _config.yaml 網站設定檔

基本上新增文章很簡單,只要新增檔案至_posts就可以了,不過必須遵守年-月-份-文章網址名稱.md的檔名規範才行,不然會失效喔!

新增完畢後,必須要在檔案最上面設定你的文章設定,如下:

1
2
3
4
5
6
7
8
---
title: 利用Jekyll與Github Page建立自己的Dev-Blog
categories: Github
tags:
- jekyll
- hexo
---
想建立一個自己的Dev Blog嗎?有些人一直想要創一個屬於自己的開發者Blog,但是卻沒有經費去申請網頁主機,或是覺得Wordpress門檻太高,安裝步驟太繁雜。其實有更好的選擇,你可以使用Jekyll或hexo之類的平台.....

當然在文章中,標籤與分類並沒有強制要設定,只是在這邊做個範例,如果只有title也是可以順利啟動成功的喔!

最後新增完文章記得部屬到Github上,這樣網站上面才會更新哦!

1
2
3
~/my-awesome-site$ git add .
~/my-awesome-site$ git commit -m 'add new post'
~/my-awesome-site$ git push -u origin [gh-pages|master]

恭喜你擁有自己的Dev Blog囉!


相關資料