自己的部落格自己架

Jekyll
#Blog #心得

其實我在使用 Jekyll 之前,原本想是自己用 vue.js 來完成前端並用 ajax 帶出 firebase 裡的 JSON 資料,渲染在畫面上。

雖然這想法是可行的,但我在製作的過程中資料並沒有如我預期的漂亮渲染在畫面上,且文章不好編寫,原因是因為都是用純Html

所以當時為了滿足這個需求,就做了一個小小的編輯器,類似Word可以自己排版或增加一些文字效果,最後可以轉成Html。

直到有一天我在別人的部落格底下留言板看到有位匿名詢問博客大大是怎麼架部落格的,這時我才知道了 Jekyll。

Jekyll為什麼適合架部落格

首先jekyll是Github的創辦人使用Ruby寫的,並開源釋出。

有在用Github的朋友應該就知道Github可以存放靜態網站吧!

欸~!就這麼剛好,使用Ruby寫的Jekyll就是靜態網站,完全不用使用資料庫,且文章皆可使用Markdown做編寫,來去生成一個html的靜態網站。

我覺得這種大量資料的網站不使用資料庫就已經很猛了XD,還能這麼好管理,還不用爆!

且Jekyll非常彈性靈活,可以輕鬆用Bootstrap+CSS切出自己想要的版型!也可以結合各種前端框架來去做擴充使用!

如果一開始沒什麼想法的話也可以參考 jekyllthemes,上面有許多模板來供大家使用!

在Windows安裝Ruby

安裝方式在google搜尋Jekyll就會出現它的官方網站,之中也有寫到 Jekyll on Windows 的安裝流程唷!

Jekyll是使用Ruby Gem引擎,因此第一步我們需要先安裝Ruby,根據官網我們可以到 RubyInstaller 點下載就可以囉!

接著開啟會看到這樣的畫面 !

然後直接下一步到底就OK了,環境變數也在安裝過程幫你搞定!

安裝完畢後會出現如下的畫面

可以看到一些歡迎的字樣XD

安裝Jekyll

在安裝Jekyll之前環境變數必須設定完畢,在剛剛安裝過程已經有幫你設定好了,也可以進到”環境變數”中查看有無Ruby30-x64

確定OK後,我們開啟新的終端機,輸入gem install jekyll bundler安裝Jekyll

安裝完成後我們可以再輸出jekyll -v確定有無安裝成功,終端機會顯示jekyll版本

此時我們所有前置動作就都完成了!

建立部落格專案

接著建置部落格,我們在終端輸入jekyll new blog,這個動作是幫你建立並初始化一個部落格專案,專案名稱叫做blog,也可以自行輸入你想要的專案名稱。

接著可以輸入cd blog進到專案中。

啟動本地終端看看自己的部落格吧!

若都沒有錯誤出現就趕快輸入bundle exec jekyll serve啟動本地終端機吧~

預設網址為http://127.0.0.1:4000/,開起來看看吧!