用 Eleventy 建立一个静态网站
创始人
2024-03-02 07:35:22
0

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

静态网站生成器是一种基于原始数据和一组模板生成完整的静态 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


Page title

Hello world

EOF $ echo '# Page header' > 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中国 荣誉推出

相关内容

不重新构建整个静态网站的情...
一种解决方法是使用JavaScript和AJAX来实现动态内容和组...
2025-01-12 13:31:22
不知道如何在AWS上托管静...
在AWS上托管静态网站有多种方法,其中一种较常用的方法是使用Ama...
2025-01-12 07:01:29
部署Django应用程序到...
要将Django应用程序部署到Render作为静态网站,可以按照以...
2025-01-07 12:00:33
部署包含文件和构建配置的静...
为了解决此问题,可以使用netlify.toml文件来配置网站的基...
2025-01-07 07:00:54
保护由Gatsby生成的静...
保护由Gatsby生成的静态网站上的电子邮件地址免受抓取的一种解决...
2024-11-24 03:02:32
AWSS3/Route53...
确认S3存储桶中的文件权限设置正确,例如,确保文件具有公共读取权限...
2024-11-19 12:31:15

热门资讯

使用 KRAWL 扫描 Kub... 用 KRAWL 脚本来识别 Kubernetes Pod 和容器中的错误。当你使用 Kubernet...
Helix:高级 Linux ... 说到 基于终端的文本编辑器,通常 Vim、Emacs 和 Nano 受到了关注。这并不意味着没有其他...
通过 SaltStack 管理... 我在搜索Puppet的替代品时,偶然间碰到了Salt。我喜欢puppet,但是我又爱上Salt了:)...
Epic 游戏商店现在可在 S... 现在可以在 Steam Deck 上运行 Epic 游戏商店了,几乎无懈可击! 但是,它是非官方的。...
如何在 Github 上创建一... 学习如何复刻一个仓库,进行更改,并要求维护人员审查并合并它。你知道如何使用 git 了,你有一个 G...
2024 开年,LLUG 和你... Hi,Linuxer,2024 新年伊始,不知道你是否已经准备好迎接新的一年~ 2024 年,Lin...
Bazzite:专为 Stea... 为 Linux 桌面或者 Steam Deck 做好游戏准备,听起来都很刺激!对于一个专为 Linu...
Motrix:一个漂亮的跨平台... 一个开源的下载管理器,提供了一个简洁的用户界面,同时提供了跨平台操作的所有基本功能。在这里了解关于它...
Bash 脚本中如何使用 he... here 文档 here document (LCTT 译注:here 文档又称作 heredoc ...
使用 dialog 和 jq ... 为何选择文字用户界面(TUI)?许多人每日都在使用终端,因此, 文字用户界面 Text User I...