如何使用Jekyll架設Blog

Posted on | Post modified | In |

如何使用Jekyll架設Blog

參考資料: 【種樹】使用 Jekyll 和搭建 Github Pages

Install Jekyll

  1. Install Ruby 務必要安裝MSYS2，這是一個在 Windows 上提供 Unix-like 開發環境 的套件系統，它是許多 Windows 上的開發工具（尤其是 Ruby、Python、Node.js 的原生編譯擴充套件）運作的關鍵。安裝的時候只要按照rubyinstaller的流程就會看到，如果在安裝ruby的時候跳過了，可以直接$ ridk install並按照guide進行安裝 
    1
    2
    3
    4
    5
    6
    7
    		 
     $ gcc --version
 gcc (MinGW.org GCC-6.3.0-1) 6.3.0
 Copyright (C) 2016 Free Software Foundation, Inc.
 This is free software; see the source for copying conditions.  There is NO
 warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 $ ruby --version
 ruby 3.3.8 (2025-04-09 revision b200bad6cd) [x64-mingw-ucrt]
  2. 安裝Jekyll 
    1
    2
    3
    4
    5
    6
    		 
     $ gem install jekyll
 $ gem install bundler
 $ bundler -v
 Bundler version 2.6.7
 $ cd myblog
 $ jekyll server

    之後就可以request http://localhost:4000 查看目前的網站

改Themes

和hugo差不多，網路上也是有很多種themes，看哪一種順眼，我是使用NexT(Official Guide)，把該repo下載下來後解壓縮，把全部的內容複製到myblog folder，建議刪除Gemfile.lock，因為他使用的bundler version是1.17.1，現在有一些function已經廢棄了，可能會出現一些問題

1
2
 
$ bundle install
$ bundle exec jekyll server --incremental

--incremental的意思是只重新生成有變動的檔案，而不是每次都從零開始建整個網站。是 Jekyll 的一種加速機制

  • (Optional) 解決大括號的問題 因為Jekyll是支援Liquid語言並render成靜態的網站，因此在文章中如果出現{}語法，e.g., 嵌入YT的影片之類的，在啟動jekyll server時會出現error，解決的方式可以參考解決Jekyll將大括號識別成Liquid語言，只要在大括號前後加入raw標籤就可以了 
    1
    		 
      {%youtube 27fBCKKZdpY %}

改Github Pages Setting

因為之前使用Hugo的時候是使用actions script，讓github使用Hugo，而不是預設的Jekyll，但現在就非常簡單，只要把Setting > Pages > Build and deployment中的Branch改回main就可以了，另外如果之前是使用Hugo並且有寫actions script的要把workflow folder刪掉

Sort Categories

訪問/categories的時候，會發現Jekyll預設是按照該category中的文章更新當作排序，從舊到新，也就是說假設aaa這個分類中最新的更新時間是昨天，而bbb這個分類中最新的更新時間是今天，那順序就是aaa>bbb，所以如果想要讓分類可以按照字母順序的話，要修改./_includes/_helper/list_categories.html

1
2
3
4
 
{% for cat_posts in site.categories %}
↓
{% assign sort_categories = site.categories | sort %}
{% for cat_posts in sort_categories %}

這樣就可以了，不需要更改其他的設定，另外這個檔案中也不能出現comment，這樣Jekyll在render的時候不知道為什麼就是會出錯

改Mathjax的來源

因為原本的cdn網址是舊的，所以我寫的latex無法被render，看來看去應該就是這個cdn的問題，把原本的cdn來源換成以下的就可以了

1
 
//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

(Optional) 新增 Disqus / LeanCloud / Gitalk / Swiftype

(Optional) Fine Tune Website

如果有其他需要，例如製作alert或是highlight之類的，可以參考Cynthia的其他文章，幫助很大