cover

概念圖

前置條件

在開始之前,請先確認你的 Ruby 環境已經設定好了(可以參考第一篇 Ruby 環境設定)。跑一下 ruby -vgem -v,確認都有正常輸出就可以繼續。

Step 1:安裝 Jekyll 和 Bundler

gem install jekyll bundler

這會把 Jekyll 和 Bundler 兩個 gem 一起裝起來。安裝完成後,可以確認一下版本:

jekyll -v   # 例如 jekyll 4.3.x

Step 2:建立新的 Jekyll 站點

jekyll new myblog
cd myblog

jekyll new 會幫你產生一個完整的起始專案,裡面包含預設的主題和基本設定。

目錄結構長怎樣?

建好之後,你會看到這樣的結構:

myblog/
├── _posts/          # 你的文章放這裡(Markdown 格式)
├── _config.yml      # 站點的設定檔(標題、網址、主題等)
├── Gemfile          # Ruby 的相依性管理(像 package.json)
├── Gemfile.lock     # 鎖定相依版本
├── index.markdown   # 首頁
├── about.markdown   # 關於頁面
└── 404.html         # 404 頁面

最重要的是 _config.yml,站點名稱、描述、主題等等都在這裡改。而 _posts/ 資料夾就是你放文章的地方,檔名格式要是 YYYY-MM-DD-title.md

Step 3:安裝相依套件

bundle install

這個指令會根據 Gemfile 裡列的 gem 來安裝所有相依套件。第一次跑可能會花一點時間,之後就快了。

Step 4:在本地端啟動

bundle exec jekyll serve

看到類似這樣的輸出就表示成功了:

Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.

打開瀏覽器,前往 http://localhost:4000 就能看到你的網站了。而且 Jekyll 有 live reload 功能,你改了檔案存檔後,重新整理頁面就會看到更新。

小提示:加上 --livereload 參數可以讓瀏覽器自動重新整理:bundle exec jekyll serve --livereload

Step 5:建置正式版本

等你的網站內容都準備好了,要部署到正式環境時:

bundle exec jekyll build

這會把整個站點編譯成靜態 HTML,產出放在 _site/ 資料夾裡。你只要把 _site/ 裡的檔案上傳到任何靜態網站主機(GitHub Pages、Netlify、Vercel 等)就可以了。

常見問題

  • bundle exec jekyll serve 出現 port 4000 already in use:換個 port 就好,加 --port 4001 參數
  • 修改 _config.yml 後沒有生效:設定檔的變更需要重新啟動 server,按 Ctrl+C 停止後再跑一次 serve
  • Gemfile 裡的 gem 版本衝突:試試 bundle update 讓 Bundler 重新解析相依版本
  • Windows 上遇到編碼問題:在 _config.yml 加上 encoding: utf-8

按照以上步驟,你就能夠成功安裝並啟動 Jekyll 站點了!