使用 Eleventy 构建静态网站

Eleventy 是一个基于 JavaScript 的静态网站构建工具，可替代 Jekyll 和 Hugo。

图片来源：

Opensource.com

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

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

Eleventy：静态站点生成器

Eleventy (11ty) 是一个简单的静态站点生成器，是 Jekyll 和 Hugo 的替代方案。它用 JavaScript 编写，并将模板目录（各种类型）转换为 HTML。它也是开源的，根据 MIT 许可证发布。

Eleventy 适用于 HTML、Markdown、Liquid、Nunjucks、Handlebars、Mustache、EJS、Haml、Pug 和 JavaScript 模板字面量。

其功能包括

易于设置
支持多种模板语言（例如，Nunjucks、HTML、JavaScript、Markdown、Liquid）
可自定义
基于 JavaScript，许多 Web 开发人员都很熟悉，并且易于新用户学习

安装 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 '# Page header' > index.md

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

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

$ npx @11ty/eleventy-serve

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

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

试用 Eleventy

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

这基于为开源项目构建技术文档静态站点，该文章首次出现在 Nwokocha Wisdom Maduabuchi 的 Medium 站点上，并经许可转载。

接下来阅读什么