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

聽說 11ty 非常簡單，就算程式開發技術不高，應該也可以輕鬆上手，而且官網也說了，11ty 的簡單架構，非常適合架設部落格網站，不用擔心複雜的技術細節，只需要專心建立內容。

看看它的下載數量統計，是非常受歡迎的套件，今年已超過 100 萬下載。

今天就來試試看，到底有多大魅力。

參考官方快速入門，到底有多快速？

首先找個隨時可以刪掉的地方

mkdir try-11ty

進入這個目錄。

cd try-11ty

npm init -y

但最近喜歡 pnpm

pnpm init

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

或者 pnpm

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

npx @11ty/eleventy

不想用 npx，pnpm 也有類似指令

pnpm exec eleventy

現在什麼事都沒發生，因為我們還沒建立任何網頁。

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

然後交給 11ty 產生網頁

pnpm exec eleventy

現在指令執行後的結果變成

看來已產生兩個檔案頁面。

這樣一直手動產生不就很發煩，當然不行啊，輸入一下指令，啟動本機開發 SERVER 。

pnpm exec eleventy --serve

打開網址 http://localhost:8080 即可預覽成果。

內容都準備好了，如何上線呢？
先產生正式內容，其實 11ty 產生的開發版和正式版網頁是一樣的，可以在 package.json 加一個方便的 script。

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

或者 pnpm

{  "scripts": {    "build": "pnpm run eleventy"  }}

執行 pnpm run build 就會產生網頁在 _site 目錄中，將這個目錄中的檔案丟到虛擬主機，或其它靜態網站服務就可以。

11ty 列出蠻多靜態網站服務

例如本站使用 Hostinger 虛擬主機，利用 hPanel File Manager，建立 try-11ty 目錄，然後把 _site 檔案拖上去就好啦。

Related Post