用 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

热门资讯

Helix:高级 Linux ... 说到 基于终端的文本编辑器,通常 Vim、Emacs 和 Nano 受到了关注。这并不意味着没有其他...
使用 KRAWL 扫描 Kub... 用 KRAWL 脚本来识别 Kubernetes Pod 和容器中的错误。当你使用 Kubernet...
JStock:Linux 上不... 如果你在股票市场做投资,那么你可能非常清楚投资组合管理计划有多重要。管理投资组合的目标是依据你能承受...
通过 SaltStack 管理... 我在搜索Puppet的替代品时,偶然间碰到了Salt。我喜欢puppet,但是我又爱上Salt了:)...
Epic 游戏商店现在可在 S... 现在可以在 Steam Deck 上运行 Epic 游戏商店了,几乎无懈可击! 但是,它是非官方的。...
《Apex 英雄》正式可在 S... 《Apex 英雄》现已通过 Steam Deck 验证,这使其成为支持 Linux 的顶级多人游戏之...
如何在 Github 上创建一... 学习如何复刻一个仓库,进行更改,并要求维护人员审查并合并它。你知道如何使用 git 了,你有一个 G...
2024 开年,LLUG 和你... Hi,Linuxer,2024 新年伊始,不知道你是否已经准备好迎接新的一年~ 2024 年,Lin...
什么是 KDE Connect... 什么是 KDE Connect?它的主要特性是什么?它应该如何安装?本文提供了基本的使用指南。科技日...
Opera 浏览器内置的 VP... 昨天我们报道过 Opera 浏览器内置了 VPN 服务,用户打开它可以防止他们的在线活动被窥视。不过...