用Jekyll模板製作個人網站
關於我自己把舊的個人網站搬到這個用Jekyll模板做的網站的經歷。
僅限在Windows 10上，其他OS我不能保證正確，且未來版本更新也可能會有所不同
安裝Jekyll
有任何問題請參考Jekyll官網的Doc
安裝Ruby
Windows按照它的建議用RubyInstaller，版本也按照Ruby官網的建議(裝Ruby+Devkit的)，反正大於2.5.0就好。安裝過程中我應該是沒有動什麼選項，一切按照它建議的來。
用以下指令確定是否安裝成功(我一開始只能在Start Command Prompt with Ruby之中執行，要等一段時間才能在一般的cmd中執行，應該是環境變數的設置生效需要時間，或直接重開機應該也行？)
1
ruby -v
安裝RubyGems
這是用來管理Ruby的套件的東西，RubyInstaller應該會幫你一起裝好。
用以下指令確定是否安裝成功(跟Ruby一樣，我一開始也只能在Start Command Prompt with Ruby之中執行，要等一段時間才能在一般的cmd中執行)
1
gem -v
安裝GCC
Windows建議裝MinGW，或者說MinGW32。不過我很久以前就裝了，所以有問題就看網路上的教學吧。
裝好之後在環境變數的Path新增C:\MinGW\bin(要生效可能要重開機)。
1
2
gcc -v
g++ -v
用以下指令確定是否安裝成功
安裝GNU Make
Windows就裝Make for Windows，我同樣也是裝了一段時間的，所以有問題請爬文。
裝好之後在環境變數的Path新增C:\Program Files (x86)\GnuWin32\bin。
用以下指令確定是否安裝成功
1
make -v
安裝Jekyll
1
gem install jekyll bundler
裝好之後，測試一下可不可以用
用以下指令創建新的Jekyll Project(<your website name>可以替換成任何你想要的名字，但建議不要用中文或奇怪符號)
1
jekyll new <your website name>
然後進入那個資料夾
1
cd <your website name>
架起最基礎的網站
1
bundle exec jekyll serve # 或 bundle exec jekyll s
如果你用的是
Ruby v3.0.0以上的版本，這一步可能會失敗，請先執行bundle add webrick，然後再試一次。
然後你就可以在http://localhost:4000或http://127.0.0.1:4000看到它了！
如果你對Project做了任何更動，只要儲存(例如按下Ctrl+S)，Jekyll就會自動幫你重新編譯，只要重新載入就可以看見變更了。
想關掉該網頁只要回到剛才的cmd然後按下Ctrl+C即可。
使用模板
網路上應該很容易找到很多Jekyll的模板/主題。我自己是用Chirpy這個模板，並且是用它的Chirpy Starter Template。
這是Chirpy的官方教學，大部分步驟都寫得滿清楚的，但還是有一些東西沒寫到，我就寫在Q&A了。
關於Chirpy的markdown文章語法請見：Text and Typography
Q&A
為什麼選擇Jekyll？
Hugo和Hexo雖然也都是不錯的選擇，但是我不喜歡Chocolatey。然而在Windows上用Hugo最簡單的方式就是裝Chocolatey；Hexo使用Node.js，也有可能會用到Chocolatey(裝Node.js時它會說有些套件需要Chocolatey才能用，建議安裝)。
為什麼選擇Chirpy？
很單純的原因：因為它很好看。
我是用它的Starter Template/從它的GitHub fork過來，那MIT License可以改嗎？
確切來說，不能改，但是可以(且應該)加上你自己的License，如果你決定使用MIT Lincense，只要加上一行即可。
1
2
3
4
MIT License
Copyright (c) 2024 Chen-Wei, Zhang # 我是加上這一行
Copyright (c) 2021 Cotes Chung
如果你想要使用GPL或其他LICENSE也可以，但要保留它原本的LICENSE。
註：GitHub Repo的License跟文章的License可以是不同的。
有不懂得請爬文，我自己也是看stackoverflow上的文章(但其實不保證我是對的)。
如果我想改文章預設的在頁尾的MIT License怎麼做？頁尾的Using the Chirpy theme for Jekyll.怎麼弄掉？
要改_data/locales/[lang].yml(沒有就去Chirpy的GitHub下載)，其中[lang]是_config.yml中lang的值(預設是en)
左邊的Sidebar我想要不只有Categories，Tags，Archives，About這四個Page怎麼辦？
在_tabs/底下新增一個<page name>.md，<page name>是你想要的名字，Front Matter參考_tabs/about.md。
同樣，如果想要把已有的page刪掉，只要把_tabs/底下對應的markdown檔案刪掉再重新編譯即可。
為什麼我的文章沒有顯示Last Modified Time？
因為那個功能來自一個插件，你應該可以看到_plugins\posts-lastmod-hook.rb，但可惜的是hook在GitHub Pages上不起作用。
解決辦法：手動在每個post的Front Matter中加上last_modified_at: YYYY-MM-DD HH:MM:SS +/-TTTT。
為什麼我GitHub Action會Build失敗？
我自己遇到的問題是文章中包含了Http連結，然後它就跟我說
1
2
3
4
5
Run bundle exec htmlproofer _site \
...
For the Links check, the following failures were found:
...
http://some_http_link is not an HTTPS link
原因是有個叫HTML Proofer的東西會幫你檢查網頁的各種問題。
只要在.github\workflows\pages-deploy.yml中加上你要的HTML Proofer 參數即可。
1
2
3
4
5
run: |
bundle exec htmlproofer _site \
\-\-disable-external=true \
\-\-enforce_https=false \ # 我自己是加上這一行
\-\-ignore-urls "/^http:\/\/127.0.0.1/,/^http:\/\/0.0.0.0/,/^http:\/\/localhost/"
怎麼讓所有的外部連結都在新分頁開啟？
方法一：手動在每個[description](link)後面都加上{: target="_blank" }。
方法二：安裝Jekyll Target Blank插件，安裝方法它的GitHub頁面有說。
如何設定SEO？
我還參考了改善 SEO 的幾種方法。
使用Google Search Console和Google Rich Results Test。
如何使用自己想要的字體？
Chirpy官網的教學其實有寫，剩下的就是怎麼寫SCSS了，這是語法問題，不過我發現大部分CSS的語法在SCSS都可以用(至少目前沒發現不能用的)。
至於Chirpy產生的HTML element有哪些class和id，這個我是直接到網站上去用Chrome的開發人員工具(按F12)看的。
你用的是什麼字體？怎麼這麼好看
中文我用的是霞鶩文楷，英文是很多種Google Font，例如Caudex和EB Garamond。