日期：2024年 05月 05日

標籤： Html Jekyll Javascript Web GitHub Ruby

摘要：資訊筆記

第一部分：介紹 Jekyll 工具

Step 1：關於 Jekyll

Jekyll 是一個免費、開源的靜態網站生成器，基於 Markdown 語法產生網站
熟悉後可以快速生成 Blog、文檔、靜態網站
官方給的三大特性：簡單、靜態、Blog

第二部分：安裝 Ruby

Step 1：官方文檔 - 1

官方的 Docs 有建立 Jekyll 步驟的說明
第一步驟是觀察自己系統所需，選擇 prerequistites

Step 2：官方文檔 - 2

主要差異在作業系統上， Guide 的地方需依照自己的作業系統進行環境建置

Step 3：安裝 Ruby - 1

所有的作業系統都需相依於 Ruby 因此先進 Ruby 官網下載

Step 4：安裝 Ruby - 2

下載後可以進行安裝，Windows 會提供 .exe 的安裝包

Step 5：安裝 Ruby - 3

基本上一值按下一步，要記得將 Ruby 加入環境配置 (下圖處打勾)

Step 6：安裝 Ruby - 4

安裝完成後，打開 Windows CMD ，可以發現仍無法辨識

ruby -v

Step 7：安裝 Ruby - 5

要在 Windows CMD 輸入，完成 Ruby 在 Windows 上的整合包裝

ridk install

此整合包含了：MSYS2 base installatio、MinGW、MSYS2 and MINGW development toolchain、MSYS2 remix of UCRT binaries
安裝完成後，才能正確的透過 Jekyll 產生靜態網站

Step 8：安裝 Ruby - 完成

再次輸入可以發現有正確安裝了

ruby -v

第三部分：安裝 Jekyll & 產生範本

Step 1：安裝 Jekyll 套件 - 1

打開 Windows CMD 輸入以下

gem install jekyll bundler

Step 2：安裝 Jekyll 套件 - 完成

可以透過以下指令檢查，已正確安裝 v4.3.3

jekyll -v 

Step 3：建立 Jekyll 範本 - 指令

可先建立好一個資料，然後透過 Windows CMD 進入目錄下 (如圖，在 C 槽，已建立了 JekyllBasic 資料夾，並已進入)
然後輸入以下指令，產生基本範本 (資料夾名稱：myblog)

jekyll new myblog

Step 4：建立 Jekyll 範本 - 結果

產生完成後，可以看到 JekyllBasic 資料夾下有預設的 Jekyll 範本資料

第四部分：DEMO 結果

Step 1：啟動 Jekyll

每次要啟動 Jekyll 時，要從根目錄下輸入以下指令
執行後預設會建立 http://127.0.0.1:4000 的本機靜態網站

bundle exec jekyll serve

Step 2：Jekyll 範本網站 DEMO

打開瀏覽器，貼上連結，會看到範本網站的結果

http://127.0.0.1:4000

Step 3：補充 Github.IO

github.io 只允許靜態網站，因此可將整個 Jekyll 的資料夾簽入到 Github 上，就可以自動產生 Blog 的靜態網站
※詳細建立網站方式還需自行搭配 Liquid 、CSS 、JS 等建立
以下是現在這個 Blog 網站的簽入