

前置條件
在開始之前,請先確認你的 Ruby 環境已經設定好了(可以參考第一篇 Ruby 環境設定)。跑一下 ruby -v 和 gem -v,確認都有正常輸出就可以繼續。
Step 1:安裝 Jekyll 和 Bundler
gem install jekyll bundler這會把 Jekyll 和 Bundler 兩個 gem 一起裝起來。安裝完成後,可以確認一下版本:
jekyll -v # 例如 jekyll 4.3.xStep 2:建立新的 Jekyll 站點
jekyll new myblog
cd myblogjekyll 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 站點了!