From f411a514c3bae573e8f2b74c701fc51b14237a67 Mon Sep 17 00:00:00 2001 From: Xingyu Wang Date: Wed, 23 Jun 2021 16:01:00 +0800 Subject: [PATCH] PUB @geekpi https://linux.cn/article-13513-1.html --- ...15 Build a static website with Eleventy.md | 71 +++++++++---------- 1 file changed, 32 insertions(+), 39 deletions(-) rename {translated/tech => published}/20210615 Build a static website with Eleventy.md (68%) diff --git a/translated/tech/20210615 Build a static website with Eleventy.md b/published/20210615 Build a static website with Eleventy.md similarity index 68% rename from translated/tech/20210615 Build a static website with Eleventy.md rename to published/20210615 Build a static website with Eleventy.md index 8d75bc81f2..2a78a7b3cb 100644 --- a/translated/tech/20210615 Build a static website with Eleventy.md +++ b/published/20210615 Build a static website with Eleventy.md @@ -3,22 +3,24 @@ [#]: author: (Nwokocha Wisdom https://opensource.com/users/wise4rmgod) [#]: collector: (lujun9972) [#]: translator: (geekpi) -[#]: reviewer: ( ) -[#]: publisher: ( ) -[#]: url: ( ) +[#]: reviewer: (wxy) +[#]: publisher: (wxy) +[#]: url: (https://linux.cn/article-13513-1.html) 用 Eleventy 建立一个静态网站 ====== -Eleventy 是一个基于 JavaScript 的 Jekyll 和 Hugo 的替代品，用于构建静态网站。 -![Digital images of a computer desktop][1] -静态网站生成器是一种基于原始数据和一组模板生成完整的静态 HTML 网站的工具。它自动完成单个 HTML 页面的编码任务，并让这些页面准备好为用户服务。由于 HTML 页面是预先建立的，它们在用户的浏览器中加载得非常快。 +> Eleventy 是一个基于 JavaScript 的 Jekyll 和 Hugo 的替代品，用于构建静态网站。 + +![](https://img.linux.net.cn/data/attachment/album/202106/23/160000epjn313s1t5ja8wj.jpg) + +静态网站生成器是一种基于原始数据和一组模板生成完整的静态 HTML 网站的工具。它可以自动完成单个 HTML 页面的编码任务，并让这些页面准备好为用户服务。由于 HTML 页面是预先建立的，它们在用户的浏览器中加载得非常快。 静态网站对文档也很友好，因为静态网站很容易扩展，而且它们是生成、维护和部署项目文档的一种简单方法。由于这些原因，企业经常使用它们来记录应用编程接口 （API）、数据库模式和其他信息。文档是软件开发、设计和其他方面技术的一个重要组成部分。所有的代码库都需要某种形式的文档，选择范围从简单的 README 到完整的文档。 ### Eleventy: 一个静态网站生成器 -[Eleventy][2] (11ty) 是一个简单的静态网站生成器，是 [Jekyll][3] 和 [Hugo][4] 的替代品。它是用 JavaScript 编写的，它将一个模板目录（不同类型）转化为 HTML。它也是开源的，在 MIT 许可下发布。 +[Eleventy][2]（11ty）是一个简单的静态网站生成器，是 [Jekyll][3] 和 [Hugo][4] 的替代品。它是用 JavaScript 编写的，它将一个（不同类型的）模板目录转化为 HTML。它也是开源的，在 MIT 许可下发布。 Eleventy 可以与 HTML、Markdown、Liquid、Nunjucks、Handlebars、Mustache、EJS、Haml、Pug 和 JavaScript Template Literals 协同工作。 @@ -29,24 +31,20 @@ Eleventy 可以与 HTML、Markdown、Liquid、Nunjucks、Handlebars、Mustache * 可定制 * 基于 JavaScript，这是许多网络开发者所熟悉的，新用户也容易学习 - - ### 安装 Eleventy Eleventy 需要 Node.js。在 Linux 上，你可以使用你的包管理器安装 Node.js： - ``` -`$ sudo dnf install nodejs` +$ sudo dnf install nodejs ``` 如果你的包管理器没有 Node.js，或者你不在 Linux 上，你可以从 Node.js 网站[安装它][5]。 Node.js 安装完毕后，就用它来安装 Eleventy： - ``` -`$ npm install -g @11ty/eleventy` +$ npm install -g @11ty/eleventy ``` 这就完成了！ @@ -55,62 +53,57 @@ Node.js 安装完毕后，就用它来安装 Eleventy： 现在你可以开始使用 Eleventy 来建立你的静态文档网站。以下是需要遵循的步骤。 -#### 1\. 创建一个 package.json 文件 - -要将 Eleventy 安装到你的项目中，你需要一个 package.json 文件： +#### 1、创建一个 package.json 文件 +要将 Eleventy 安装到你的项目中，你需要一个 `package.json` 文件： ``` -`$ npm init -y` +$ npm init -y ``` -#### 2\. 将 Eleventy 安装到 package.json 中 - -安装 Eleventy 并保存到你的项目的 `package.json` 中，通过运行： +#### 2、将 Eleventy 安装到 package.json 中 +安装 Eleventy 并保存到你的项目的 `package.json` 中。运行： ``` -`$ npm install-save-dev @11ty/eleventy` +$ npm install-save-dev @11ty/eleventy ``` -#### 3\. 运行 Eleventy +#### 3、运行 Eleventy 使用 `npx` 命令来运行你本地项目的 Eleventy 版本。在你确认安装完成后，尝试运行 Eleventy： - ``` -`$ npx @11ty/eleventy` +$ npx @11ty/eleventy ``` -#### 4\. 创建一些模板 +#### 4、创建一些模板 现在运行两个命令来创建两个新的模板文件（一个 HTML 和一个 Markdown 文件）： - ``` -$ cat << EOF >> index.html -<!doctype html><html> -<head> -<title>Page title</title> -</head><body> -<p>Hello world</p> -</body></html> +$ cat << EOF >> index.html + + +Page title + +

Hello world

+ EOF -$ echo '# Page header' > index.md +$ echo '# Page header' > index.md ``` 这就把当前目录或子目录中的任何内容模板编译到输出文件夹中（默认为 `_site`）。 运行 `eleventy --serve` 来启动一个开发网络服务器。 - ``` -`$ npx @11ty/eleventy-serve` +$ npx @11ty/eleventy-serve ``` 在你的网络浏览器中打开 `http://localhost:8080/README/`，看你的 Eleventy 输出。 -然后把 `_site` 中的文件上传到你的网络服务器，发布你的网站给世界看。 +然后把 `_site` 中的文件上传到你的 Web 服务器，发布你的网站给世界看。 ### 尝试 Eleventy @@ -118,7 +111,7 @@ Eleventy 是一个静态网站生成器，它易于使用，有模板和主题 * * * -_本文基于[为开源项目建立技术文档静态网站][7]，首次发布在 Nwokocha Wisdom Maduabuchi 的 Medium 上，经授权转载。_ +_本文基于 [为开源项目建立技术文档静态网站][7]，首次发布在 Nwokocha Wisdom Maduabuchi 的 Medium 上，经授权转载。_ -------------------------------------------------------------------------------- @@ -127,7 +120,7 @@ via: https://opensource.com/article/21/6/static-site-builder 作者：[Nwokocha Wisdom][a] 选题：[lujun9972][b] 译者：[geekpi](https://github.com/geekpi) -校对：[校对者ID](https://github.com/校对者ID) +校对：[wxy](https://github.com/wxy) 本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出