CleanMyMac

11ty 初體驗，靜態網頁快速入門

Feature image for 11ty 初體驗，靜態網頁快速入門

11ty（Eleventy）是一個簡單易用的靜態網站生成器，即使程式開發經驗不多也能輕鬆上手。它的架構簡單清晰，非常適合用來架設部落格網站，讓你可以專注於內容創作，而不需要擔心複雜的技術細節。

根據 npm 下載統計，11ty 是非常受歡迎的套件，2023 年已超過 100 萬次下載，顯示其在開發社群中的廣泛採用。作為一個零配置的靜態網站生成器，11ty 讓開發者能夠快速將 Markdown、HTML 等檔案轉換成完整的靜態網站，無需學習複雜的框架或配置。

11ty download stat

為什麼選擇 11ty？

11ty 有幾個明顯的優點，讓它成為許多開發者的首選：

  • 零配置即可使用：不需要複雜的設定檔，開箱即用，非常適合快速原型開發
  • 支援多種模板語言：可以使用 HTML、Markdown、Nunjucks、Liquid、Handlebars、Mustache、EJS、Haml、Pug 等多種格式，讓你可以選擇最熟悉的模板語法
  • 快速建置：生成靜態網站的速度非常快，即使是大型網站也能在幾秒內完成建置
  • 靈活的資料來源：可以從 JSON、JavaScript、YAML、CSV 等格式讀取資料，甚至可以直接使用 API 作為資料來源
  • 簡單的部署：生成的靜態檔案可以輕鬆部署到任何靜態網站託管服務，無需伺服器端運行環境
  • 優秀的效能：生成的靜態網站載入速度快，對 SEO 友善，且可以輕鬆整合 CDN 加速

今天就讓我們跟著官方快速入門指南，實際體驗一下 11ty 的魅力。

Step 1 建立專案目錄

首先，找一個適合的目錄位置來建立測試專案（建議選擇可以隨時刪除的測試目錄，例如桌面或臨時資料夾）。

mkdir try-11ty

建立完成後，進入這個目錄：

cd try-11ty

注意：確保你的系統已經安裝了 Node.js（建議版本 14 或以上）。如果還沒有安裝，可以前往 Node.js 官網 下載安裝。

Step 2 建立 Node.js 專案

初始化一個新的 Node.js 專案。如果你使用 npm：

npm init -y

或者使用 pnpm（本文範例將使用 pnpm，pnpm 是一個更快速的套件管理工具）：

pnpm init

-y 參數會自動使用預設值建立 package.json 檔案，省去手動回答問題的步驟。如果你想要手動設定專案資訊，可以省略 -y 參數，系統會引導你輸入專案名稱、版本、描述等資訊。

Step 3 安裝 11ty

將 11ty 安裝為開發依賴套件。使用 npm：

npm install @11ty/eleventy --save-dev

或使用 pnpm：

pnpm install @11ty/eleventy --save-dev

--save-dev 參數表示將套件安裝為開發依賴，因為 11ty 主要用於開發和建置階段，不需要在生產環境中執行。安裝完成後，你可以在 package.json 的 devDependencies 區塊中看到 @11ty/eleventy 的版本資訊。

Step 4 執行 11ty

執行 11ty 來生成網站。使用 npm：

npx @11ty/eleventy

或使用 pnpm：

pnpm exec eleventy

此時執行後可能不會有任何輸出，或者會顯示「Wrote 0 files」的訊息，這是正常的，因為我們還沒有建立任何網頁檔案。11ty 預設會掃描專案目錄中的 HTML、Markdown、JavaScript 等檔案，並將處理後的結果輸出到 _site 目錄中。

Step 5 建立網頁範本

現在讓我們建立一些測試檔案。11ty 支援多種格式，我們先建立一個 HTML 檔案和一個 Markdown 檔案：

echo '<html><head><meta charset="UTF-8"></head><p>第一個 11ty 網頁</p></html>' > index.html
echo '# Another Markdown Page' > Markdown.md

或者你也可以使用文字編輯器手動建立這些檔案。建立完成後，再次執行 11ty 來生成網頁：

pnpm exec eleventy

執行後，你會看到類似以下的輸出：

這表示 11ty 已經成功處理並生成了兩個頁面。預設情況下，生成的檔案會放在 _site 目錄中。你可以打開 _site 目錄查看生成的 HTML 檔案，這些就是最終要部署到伺服器的靜態檔案。

Step 6 即時預覽

每次修改檔案後都要手動執行建置指令實在太麻煩了。11ty 提供了開發伺服器功能，可以自動監聽檔案變更並重新建置，讓開發過程更加順暢。

啟動開發伺服器：

pnpm exec eleventy --serve

或使用簡寫 -s：

pnpm exec eleventy -s

執行後會看到類似以下的輸出：

現在你可以在瀏覽器中打開 http://localhost:8080 來預覽網站。當你修改任何檔案時，11ty 會自動重新建置，你只需要重新整理瀏覽器就能看到最新的變更。

小技巧：如果你想要使用不同的埠號，可以使用 --port 參數，例如 pnpm exec eleventy --serve --port=3000。另外，--watch 參數可以讓 11ty 監聽檔案變更但不啟動伺服器，適合與其他開發工具整合使用。

Step 7 部署網站上線

當內容都準備好後，就可以將網站部署上線了。首先，我們需要在 package.json 中加入建置指令，方便日後使用。

使用 npm 的設定：

{
  "scripts": {
    "build": "npx @11ty/eleventy",
    "serve": "npx @11ty/eleventy --serve"
  }
}

或使用 pnpm 的設定：

{
  "scripts": {
    "build": "pnpm exec eleventy",
    "serve": "pnpm exec eleventy --serve"
  }
}

執行 pnpm run build 後，11ty 會在 _site 目錄中生成所有靜態檔案。接下來，你可以將 _site 目錄中的內容上傳到任何靜態網站託管服務。

部署前檢查清單：

  • 確認所有頁面都能正常顯示
  • 檢查圖片和資源檔案的路徑是否正確
  • 測試網站在不同裝置上的顯示效果
  • 確認 _site 目錄中包含所有必要的檔案

推薦的部署平台

11ty 官方列出了許多支援的靜態網站託管服務：

image src: https://www.11ty.dev/

這些服務包括：

  • Netlify：提供免費方案，支援自動部署、HTTPS、表單處理等功能，非常適合前端專案
  • Vercel：同樣提供免費方案，部署流程非常簡單，與 Git 整合良好，支援自動部署
  • GitHub Pages：完全免費，適合開源專案，可以直接從 GitHub 儲存庫自動部署
  • Cloudflare Pages：提供全球 CDN 加速，免費方案包含無限頻寬，部署速度極快
  • 傳統虛擬主機：也可以使用傳統的虛擬主機服務，透過 FTP 或檔案管理器上傳檔案即可

選擇部署平台時，可以根據你的需求來決定：如果需要自動部署和 CI/CD 功能，建議選擇 Netlify 或 Vercel；如果預算有限且不需要太多進階功能，GitHub Pages 是不錯的選擇；如果需要全球加速，Cloudflare Pages 會是很好的選項。

使用虛擬主機部署範例

例如，如果你使用 Hostinger 虛擬主機，可以透過 hPanel 的檔案管理器來部署：

  1. 在 hPanel 中建立一個新的目錄（例如 try-11ty），或直接使用網站的根目錄（通常是 public_html）
  2. 將 _site 目錄中的所有檔案上傳到該目錄（注意：是上傳 _site 目錄「裡面」的檔案，而不是 _site 目錄本身）
  3. 如果使用子目錄，記得設定網域指向該目錄
  4. 完成！你的網站就可以透過網址訪問了

注意事項：

  • 確保上傳的是建置後的檔案（_site 目錄中的內容），而不是原始碼
  • 如果網站使用相對路徑，確保檔案結構正確
  • 某些虛擬主機可能需要設定預設首頁檔案（通常是 index.html）

總結

透過這個簡單的快速入門，我們已經成功建立並部署了一個基本的 11ty 網站。11ty 的簡單性和靈活性讓它成為建立靜態網站的絕佳選擇，無論是個人部落格、文件網站，還是企業官網，都能輕鬆應付。

11ty 的核心優勢在於它的零配置設計和強大的擴展性。即使是最簡單的 HTML 檔案，11ty 也能處理；而當你需要更複雜的功能時，11ty 也提供了豐富的配置選項和插件生態系統。

接下來，你可以探索 11ty 的更多功能，例如：

  • 使用模板和佈局：透過 Nunjucks 或 Liquid 等模板語言建立可重複使用的佈局，統一網站風格
  • 建立資料檔案：使用 JSON、YAML 或 JavaScript 檔案來管理網站資料，實現內容與樣式的分離
  • 使用過濾器和短代碼：透過自訂過濾器和短代碼來擴展功能，例如日期格式化、圖片處理等
  • 整合其他工具：結合 PostCSS、Tailwind CSS 等工具來優化網站效能和開發體驗
  • 建立集合（Collections）：將相關的內容組織成集合，例如部落格文章、產品列表等
  • 使用分頁功能：自動將大量內容分頁，建立索引頁面

如果你想要深入學習 11ty，建議參考 官方文件，裡面有詳細的教學和範例。開始你的 11ty 之旅吧！