如何使用 Jekyll 產生網誌

April 17, 2022

Jekyll in GitHub Pages

使用 Jekyll 把目前基本的 GitHub Pages 網頁，轉成簡潔又具備分類、版面等多種功能的網誌。

安裝

  1. 參考 About GitHub Pages and Jekyll - GitHub Docs
  2. 因為使用 Windows，根據網頁說明，下載 Jekyll on Windows - Jekyll，並跟著執行以下指令： 
    ridk install (使用預設值，執行完成後重開命令列，接著繼續執行)
gem install jekyll bundler (安裝 Jekyll)
jekyll -v (檢查是否安裝完成)
  3. 跟著 Creating a GitHub Pages site with Jekyll - GitHub Docs 的說明操作，因為先前已經有建立 Repository，以及撰寫了一些文章，因此從執行下方指令開始： 
    jekyll new --skip-bundle . (建立新網站，使用 `--force` 強制在目錄已有檔案的狀況下執行)

    Jekyll - create new site scaffold in existing project - Stack Overflow

  4. 修改 Gemfile，加入 # 註解 
    #gem "jekyll", "~> 4.2.2"

    這行，並移除以下行的註解、加入版本 (版本可能有所不同)

    gem "github-pages", "~> 225", group: :jekyll_plugins
  5. 執行 bundle install。

轉移已有的文章

  1. 跟隨 Adding content to your GitHub Pages site using Jekyll - GitHub Docs 的操作說明，將文章檔案移動至 _post 目錄底下，並修改名稱為 YYYY-MM-DD-NAME-OF-POST.md 格式。在此 YYYY-MM-DD 是日期，NAME-OF-POST 是文章名稱，例如 2018-07-03-TensorRT.md。
  2. 編輯文章，最前面加入 Front Matter。包含上下三個 - 符號，使用 post 版面，title、date 和 categories 則分別代表標題、日期和分類，可自行撰寫。範例如下: 
    ---
layout: post
title: "POST TITLE"
date: YYYY-MM-DD hh:mm:ss -0000
categories: CATEGORY-1 CATEGORY-2
---

其它設定

  1. 找到 _config.yml 裡面的 title、description 屬性，修改為自己需要的標題和介紹。
  2. 依 如何在使用Jekyll寫網頁的時候插入圖片 - Yunchi Pang 建立 assets/imgs/ 資料夾，並將原有的圖片移動至此處。文章需要修改原有路徑，才能重新抓到圖片，如 TensorRT.png 須改為 /assets/imgs/TensorRT.png。

在本機測試

  1. Testing your GitHub Pages site locally with Jekyll - GitHub Docs: 執行 bundle exec jekyll serve ，接著瀏覽 http://127.0.0.1:4000/。 PS. 如果遇到 Webrick 的載入錯誤，還要用 bundle add webrick 安裝 Webrick (Quickstart - Jekyll)。

其它參考資料