用 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

热门资讯

“Linux 中国” 开源社区... 这是一个艰难的决定 —— 这不是调侃,而是当你真正做出改变了你十几年生活轨迹的决定时,你就会明白这个...
硬核观察 #1263 德国铁路... #1 德国铁路公司招聘 Windows for Workgroups 3.11 管理员该职位要求了解...
人工智能教程(七):Sciki... 在本系列的 上一篇文章 中,我们用 TensorFlow 构建了第一个神经网络,然后还通过 Kera...
关闭 WSL 中正在运行的 L... 以下是使用 WSL 关闭在 Windows 内运行的 Linux 系统的不同方法。你使用 WSL 在...
MX Linux 23.2 “... 最新的 MX Linux 23.2 小版本更新带来了基本的改进和新增功能。MX Linux 推出了 ...
硬核观察 #1262 网络上最... #1 网络上最古老的软件存档库之一即将关闭美国新墨西哥州立大学(NMSU)最近宣布,即将于 2024...
如何在 RHEL 上通过绑定配... 在 Linux 中,你可以根据自己的需要创建高级网络设置,如 网络绑定 Network Bondin...
Linux Matrix 消息... Matrix 用户可以升级 Fractal 6 了!Fractal 是目前 最好的 Matrix 客...
如何通过 VLC 使用字幕 使用 VLC 媒体播放器播放和管理字幕的新手指南。我是一个超级动漫迷,如果你想观看最新的剧集,那么你...
硬核观察 #1261 X 计划... #1 X 计划在奥斯汀建立内容审核总部据报道,该部门将招聘 100 名全职员工,将主要关注 CSE ...