用 Eleventy 建立一個靜態(tài)網(wǎng)站
Eleventy 是一個基于 JavaScript 的 Jekyll 和 Hugo 的替代品,用于構建靜態(tài)網(wǎng)站。
靜態(tài)網(wǎng)站生成器是一種基于原始數(shù)據(jù)和一組模板生成完整的靜態(tài) HTML 網(wǎng)站的工具。它可以自動完成單個 HTML 頁面的編碼任務,并讓這些頁面準備好為用戶服務。由于 HTML 頁面是預先建立的,它們在用戶的瀏覽器中加載得非???。
靜態(tài)網(wǎng)站對文檔也很友好,因為靜態(tài)網(wǎng)站很容易擴展,而且它們是生成、維護和部署項目文檔的一種簡單方法。由于這些原因,企業(yè)經(jīng)常使用它們來記錄應用編程接口 (API)、數(shù)據(jù)庫模式和其他信息。文檔是軟件開發(fā)、設計和其他方面技術的一個重要組成部分。所有的代碼庫都需要某種形式的文檔,選擇范圍從簡單的 README 到完整的文檔。
Eleventy: 一個靜態(tài)網(wǎng)站生成器
Eleventy(11ty)是一個簡單的靜態(tài)網(wǎng)站生成器,是 Jekyll 和 Hugo 的替代品。它是用 JavaScript 編寫的,它將一個(不同類型的)模板目錄轉化為 HTML。它也是開源的,在 MIT 許可下發(fā)布。
Eleventy 可以與 HTML、Markdown、Liquid、Nunjucks、Handlebars、Mustache、EJS、Haml、Pug 和 JavaScript Template Literals 協(xié)同工作。
它的特點包括:
- 易于設置
- 支持多種模板語言(如 Nunjucks、HTML、JavaScript、Markdown、Liquid)
- 可定制
- 基于 JavaScript,這是許多網(wǎng)絡開發(fā)者所熟悉的,新用戶也容易學習
安裝 Eleventy
Eleventy 需要 Node.js。在 Linux 上,你可以使用你的包管理器安裝 Node.js:
$ sudo dnf install nodejs
如果你的包管理器沒有 Node.js,或者你不在 Linux 上,你可以從 Node.js 網(wǎng)站安裝它。
Node.js 安裝完畢后,就用它來安裝 Eleventy:
$ npm install -g @11ty/eleventy
這就完成了!
為你的文檔建立一個靜態(tài)網(wǎng)站
現(xiàn)在你可以開始使用 Eleventy 來建立你的靜態(tài)文檔網(wǎng)站。以下是需要遵循的步驟。
1、創(chuàng)建一個 package.json 文件
要將 Eleventy 安裝到你的項目中,你需要一個 package.json 文件:
$ npm init -y
2、將 Eleventy 安裝到 package.json 中
安裝 Eleventy 并保存到你的項目的 package.json 中。運行:
$ npm install-save-dev @11ty/eleventy
3、運行 Eleventy
使用 npx 命令來運行你本地項目的 Eleventy 版本。在你確認安裝完成后,嘗試運行 Eleventy:
$ npx @11ty/eleventy
4、創(chuàng)建一些模板
現(xiàn)在運行兩個命令來創(chuàng)建兩個新的模板文件(一個 HTML 和一個 Markdown 文件):
$ cat << EOF >> index.html<!doctype html><html><head><title>Page title</title></head><body><p>Hello world</p></body></html>EOF$ echo '# Page header' > index.md
這就把當前目錄或子目錄中的任何內容模板編譯到輸出文件夾中(默認為 _site)。
運行 eleventy --serve 來啟動一個開發(fā)網(wǎng)絡服務器。
$ npx @11ty/eleventy-serve
在你的網(wǎng)絡瀏覽器中打開 http://localhost:8080/README/,看你的 Eleventy 輸出。
然后把 _site 中的文件上傳到你的 Web 服務器,發(fā)布你的網(wǎng)站給世界看。
嘗試 Eleventy
Eleventy 是一個靜態(tài)網(wǎng)站生成器,它易于使用,有模板和主題。如果你已經(jīng)在你的開發(fā)流程中使用 Node.js,Eleventy 可能比 Jekyll 或 Hugo 更自然。它能快速提供很好的結果,并使你免于復雜的網(wǎng)站設計和維護。要了解更多關于使用 Eleventy 的信息,請仔細閱讀它的文檔。
























