Posts 使用Template美化你的Jekyll專案
Post
Cancel

使用Template美化你的Jekyll專案

我是wells,擔任過室內配線的國手,征服了電氣領域後,現在正跨大版圖到資訊界。

料理食材(內文內容)

  • Jekyll的使用
  • Jekyll Template

誰可以安心食用(適合誰讀)

服用完你會獲得什麼

  • 知道如何亂改別人的Code使用Jekyll模板
  • 幫你抓幾隻蟲、踩幾個雷,節省你好幾個小時的時間

挑選Jekyll Template

一個靜態網頁的生成器受歡迎程度除了本身的性能(速度、穩定度)外,有很大的因素取決於社群,關於Jekyll網路上有許多熱心人士提供各式各樣的主題,像是jekyllthemes.org這個網站中就有各式各樣的模板供你選擇,但要特別注意的是不同的模板要求的jekyll版本也是會不同的。

如果網站上的模板都不得你喜好,要自己刻一個也是沒問題的,關於Jekyll的官方文件可以查閱此處

這邊我選擇chirpy這個模板,點進去之後可以再點擊Demo頁面,或是按下前面的chirpy也可以進入此畫面:

這些模板的提供者通常都會把使用說明放在Demo網站上,個人覺得這種做法非常的高效,充分的發揮了這個Demo的價值及教育意義。

使用Theme Gem安裝Jekyll Template

如果想要使用這個模板有很多種方式,這邊我們示範使用Theme Gem的方法

  1. 在Jekyll專案的GemFile中加入以下這段: gem "jekyll-theme-chirpy"
  2. 在Jekyll專案的_config.yml中加入以下這段: theme: jekyll-theme-chirpy
  3. 使用bundler安裝GemFile中的Gem bundle
  4. 下載chirpy的Github專案 使用git clone https://github.com/cotes2020/chirpy-starter.git下載
  5. 複製專案中的以下內容到你自己的專案
    1
    2
    3
    4
    5
    6
    
     .
     ├── _data
     ├── _plugins
     ├── _tabs
     ├── _config.yml
     └──  index.html
    

    此時運行bundle exec jekyll s你會發現已經有畫面了,但是卻沒有任何文章。

  6. 在自己的專案中刪除以下文件
    1
    2
    3
    
     .
     ├──  about.markdown
     └──  index.markdown
    

    此時再重新開啟server,就會出現以下畫面了。

  7. 修改_config.yml中的以下變數:
    • url換成你推上github page的url,例如https://blog.wells.tw
    • avatar大頭貼的圖檔(使用圓框遮罩修改後更佳)
    • timezone換成你所在位置的時區,例如 Asia/Taipei
    • lang換成你的語言,例如Zh-TW

到這一步基本的建置功能就都已經完成了,在_post/中新增文章進行撰寫吧!

更改專案中的favicon

favicon就是在網站名稱左邊的小小圖片,這東西是可以自己定義的

首先先到Real Favicon Generator選擇上傳要當作facicon的圖片,上傳會可以在最下面點擊Generate your Favicons and HTML code,即可得到一個zip的檔案

解壓縮後刪除裡面的兩個東西:

  • browserconfig.xml
  • site.webmanifest

之後把所有的圖片檔案都複製到自己專案中的assets/img/favicons/資料夾中,之後你就可以看到你的網站名稱旁已經有你剛剛放置的icon了。

部署Jekyll專案

在本地端寫好檔案後我們就部署到Github Page上,關於如何部署請看這裡 但…等等!!怎麼有點落差…

這是Demo的網頁

接著…讓我們按下F12來Debug一下 可以發現這裡的錯誤主要的原因是找不到檔案,所以我們來檢查一下網址

1
http://blog.wells.tw/jekyll-demo/

這一段網址http://blog.wells.tw/是domain name,而後面的jekyll-demo則是專案的名稱,再打開Jekyll專案中的_config.yml

這邊可以發現需要填入專案名稱baseurl是空的,因此我們把它更改為baseurl: /jekyll-demo

jekyll-demo換成你的專案名稱

之後在終端機輸入

1
2
3
git add .
git commit -m "提交訊息"
git push

過幾秒後就可以看到正常的網站囉

結語

本篇文主要介紹如何使用Theme Gem的方式套上模板,但還有更快的方式,就是直接Fork專案XDD
但是自己一步一步完成就是有那種成就感啦!這篇結束後已經有一個blog該有的樣子了,下一篇開始我們來介紹一些對於部署更方便的功能吧!

This post is licensed under CC BY 4.0 by the author.