Linux中國

用 Eleventy 建立一個靜態網站

靜態網站生成器是一種基於原始數據和一組模板生成完整的靜態 HTML 網站的工具。它可以自動完成單個 HTML 頁面的編碼任務,並讓這些頁面準備好為用戶服務。由於 HTML 頁面是預先建立的,它們在用戶的瀏覽器中載入得非常快。

靜態網站對文檔也很友好,因為靜態網站很容易擴展,而且它們是生成、維護和部署項目文檔的一種簡單方法。由於這些原因,企業經常使用它們來記錄應用編程介面 (API)、資料庫模式和其他信息。文檔是軟體開發、設計和其他方面技術的一個重要組成部分。所有的代碼庫都需要某種形式的文檔,選擇範圍從簡單的 README 到完整的文檔。

Eleventy: 一個靜態網站生成器

Eleventy(11ty)是一個簡單的靜態網站生成器,是 JekyllHugo 的替代品。它是用 JavaScript 編寫的,它將一個(不同類型的)模板目錄轉化為 HTML。它也是開源的,在 MIT 許可下發布。

Eleventy 可以與 HTML、Markdown、Liquid、Nunjucks、Handlebars、Mustache、EJS、Haml、Pug 和 JavaScript Template Literals 協同工作。

它的特點包括:

  • 易於設置
  • 支持多種模板語言(如 Nunjucks、HTML、JavaScript、Markdown、Liquid)
  • 可定製
  • 基於 JavaScript,這是許多網路開發者所熟悉的,新用戶也容易學習

安裝 Eleventy

Eleventy 需要 Node.js。在 Linux 上,你可以使用你的包管理器安裝 Node.js:

$ sudo dnf install nodejs

如果你的包管理器沒有 Node.js,或者你不在 Linux 上,你可以從 Node.js 網站安裝它

Node.js 安裝完畢後,就用它來安裝 Eleventy:

$ npm install -g @11ty/eleventy

這就完成了!

為你的文檔建立一個靜態網站

現在你可以開始使用 Eleventy 來建立你的靜態文檔網站。以下是需要遵循的步驟。

1、創建一個 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、創建一些模板

現在運行兩個命令來創建兩個新的模板文件(一個 HTML 和一個 Markdown 文件):

$ cat << EOF >> index.html
<!doctype html><html>
<head>
<title>Page title</title>
</head><body>
<p>Hello world</p>
</body></html>
EOF
$ echo &apos;# Page header&apos; > index.md

這就把當前目錄或子目錄中的任何內容模板編譯到輸出文件夾中(默認為 _site)。

運行 eleventy --serve 來啟動一個開發網路伺服器。

$ npx @11ty/eleventy-serve

在你的網路瀏覽器中打開 http://localhost:8080/README/,看你的 Eleventy 輸出。

然後把 _site 中的文件上傳到你的 Web 伺服器,發布你的網站給世界看。

嘗試 Eleventy

Eleventy 是一個靜態網站生成器,它易於使用,有模板和主題。如果你已經在你的開發流程中使用 Node.js,Eleventy 可能比 Jekyll 或 Hugo 更自然。它能快速提供很好的結果,並使你免於複雜的網站設計和維護。要了解更多關於使用 Eleventy 的信息,請仔細閱讀它的文檔

本文基於 為開源項目建立技術文檔靜態網站,首次發布在 Nwokocha Wisdom Maduabuchi 的 Medium 上,經授權轉載。

via: https://opensource.com/article/21/6/static-site-builder

作者:Nwokocha Wisdom 選題:lujun9972 譯者:geekpi 校對:wxy

本文由 LCTT 原創編譯,Linux中國 榮譽推出


本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive

對這篇文章感覺如何?

太棒了
0
不錯
0
愛死了
0
不太好
0
感覺很糟
0
雨落清風。心向陽

    You may also like

    Leave a reply

    您的電子郵箱地址不會被公開。 必填項已用 * 標註

    此站點使用Akismet來減少垃圾評論。了解我們如何處理您的評論數據

    More in:Linux中國