会员登录 - 用户注册 - 设为首页 - 加入收藏 - 网站地图 用 Eleventy 建立一个静态网站!

用 Eleventy 建立一个静态网站

时间:2025-11-05 01:51:35 来源:益强数据堂 作者:系统运维 阅读:349次

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

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

静态网站对文档也很友好,网站因为静态网站很容易扩展,建静态而且它们是网站生成、维护和部署项目文档的建静态一种简单方法。由于这些原因,网站企业经常使用它们来记录应用编程接口 (API)、建静态数据库模式和其他信息。网站文档是建静态软件开发、设计和其他方面技术的一个重要组成部分。所有的代码库都需要某种形式的文档,选择范围从简单的站群服务器 README 到完整的文档。

Eleventy: 一个静态网站生成器

Eleventy(11ty)是一个简单的静态网站生成器,是 Jekyll 和 Hugo 的替代品。它是用 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<!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 来启动一个开发网络服务器。企商汇

$ npx @11ty/eleventy-serve

在你的网络浏览器中打开 http://localhost:8080/README/,看你的 Eleventy 输出。

然后把 _site 中的文件上传到你的 Web 服务器,发布你的网站给世界看。

尝试 Eleventy

Eleventy 是一个静态网站生成器,它易于使用,有模板和主题。如果你已经在你的开发流程中使用 Node.js,Eleventy 可能比 Jekyll 或 Hugo 更自然。它能快速提供很好的结果,并使你免于复杂的网站设计和维护。要了解更多关于使用 Eleventy 的信息,请仔细阅读它的文档。 

(责任编辑:IT科技)

推荐内容
  • 电脑检测关键信号错误及其修复方法(解决关键信号错误的有效技巧与注意事项)
  • MySQL索引设计的艺术:你的表该建多少个索引才健康
  • 大厂防止商品超卖的五种方案!
  • FastAPI 实战:打造高效的 CRUD 接口(增删改查优秀实践)
  • 如何应对台式电脑设置密码提示错误问题(解决密码提示错误的有效方法)
  • 数据库与缓存不一致,你会怎么办?