使用 Eleventy 构建静态网站

Eleventy 是 Jekyll 和 Hugo 的基于 JavaScript 的替代品，用于构建静态网站。

静态站点生成器是一种基于原始数据和一组模板生成完整静态 HTML 网站的工具。它自动完成对单个 HTML 页面进行编码的任务，并使这些页面准备好为用户提供服务。因为 HTML 页面是预先构建的，所以它们在用户的浏览器中加载得非常快。

静态站点也特别适用于文档，因为静态站点易于扩展，并且它们是生成、维护和部署项目文档的简便方法。由于这些原因，组织经常使用它们来记录应用程序编程接口 (API)、数据库模式和其他信息。文档是软件开发、设计和其他技术方面的重要组成部分。所有代码库都需要某种形式的文档，选项范围从简单的 README 到完整的文档。

：静态站点生成器

Eleventy 是一个简单的静态站点生成器，是Jekyll 和 Hugo的替代品。它是用 JavaScript 编写的，并将模板目录（不同类型）转换为 HTML。它也是开源的，在 MIT 许可下发布。

Eleventy 使用 HTML、Markdown、Liquid、Nunjucks、Handlebars、Mustache、EJS、Haml、Pug 和 JavaScript 模板文字。

其特点包括：

• 轻松设置
• 支持多种模板语言（例如，Nunjucks、HTML、JavaScript、Markdown、Liquid）
• 可定制
• 基于 JavaScript，很多 Web 开发者都很熟悉，新用户也很容易学习

安装

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

将 Eleventy 安装到 package.json 中

package.json通过运行以下命令安装 Eleventy 并将其保存到您的项目中：

$ npm install-save-dev @11ty/elevent

### 3.运行

使用该`npx`命令运行您本地项目的 Eleventy 版本。确认安装按预期进行后，尝试运行 Eleventy：

$ npx @11ty/eleventy`

### 4\. 创建一些模板

现在运行两个命令来创建两个新的模板文件（一个 HTML 和一个 Markdown 文件）：

echo '#Pageheader' >索引.md

这会将当前目录或子目录中的任何内容模板编译到输出文件夹中（默认为`_site`）。

运行`eleventy --serve`以启动开发 Web 服务器。

$ npx @11ty/eleventy-serve`

http://localhost:8080/README/在您选择的 Web 浏览器中打开 以查看您的 Eleventy 输出。

然后将文件上传_site到您的 Web 服务器以发布您的站点以供全世界查看。

尝试

Eleventy 是一个静态站点生成器，易于使用、模板和主题。如果您已经在开发工作流程中使用 Node.js，Eleventy 可能比 Jekyll 或 Hugo 更适合。它可以快速提供出色的结果，并使您免于复杂的站点设计和维护。要了解有关使用 Eleventy 的更多信息，请通读其文档。