首页 » 如何使用 Eleventy 创建原始静态网站(11ty)

如何使用 Eleventy 创建原始静态网站(11ty)

随着 Eleventy 等静态站点生成器 (SSG) 的出现,创建原创且高效的静态网站从未如此简单。

在本文中,我们将了解如何使用 Eleventy 创建静态且功能齐全的网站,而无需服务器端语言或数据库。

我们还将学习如何将

静态网站直接从您的 GitHub 存储库部署到 Kinsta 的应用程 WhatsApp 号码 序托管平台,并在免费的 .kinsta.app 域上立即启动并运行您的网站。

这是我们将使用 Eleventy 构建的静态投资组合网站的现场演示。

优雅的静态作品集网站
优雅的静态作品集网站
如果您想仔细了解,可以访问该项目的 GitHub 存储库。

Eleventy 是什么?
Eleventy,也称为 11ty,是一个静态网站 个人身份信息 (PII) 与个人数据 生成器,它基于 HTML、CSS 和 JavaScript 创建网站,而无需数据库和后端编程语言。

Eleventy 以其简单性和灵活性而闻名,因为它不会强迫您只使用一种模板语言或框架。它支持超过 10 种模板语言,并允许您|

在单个项目中使用任意数量的模板语言

Eleventy 支持的模板语言
Eleventy 支持的模板语言
与大多数 SSG 一样,Eleventy 允许您使用可重复使用的组件构建静态站点内容,而不必为每个页面创建完整的 HTML 文档。

如何安装 Eleventy
安装 Eleventy 很容易。具体操作如下:

确保您的计算机上安装了 Node.js。您可以通过 巴西商业名录在终端中运行 node -v 命令来检查。无法使用?以下是如何在您的计算机上安装 Node.js。
为您的项目创建一个新文件夹。
打开终端并在项目目录中运行 npm init -y 命令来初始化一个新的 Node.js 项目,并使用默认设置创建一个 package.json 文件。
运行命令 npm install @11ty/eleventy –save-dev 将包作为开发依赖项安装到您的项目中。
完毕!现在,您可以通过在项目目录中运行命令 npx @11ty/eleventy 来运行 Eleventy。这将生成您的站点文件并将其发送到项目文件夹中的 _site 目录(或您配置的任何目录)。

注意当您运行命令

时,您将得到以下结果:

秒内写入 0 个文件 (v2.0.0)
这里写入了 0 个文件,因为项目文件夹中没有模板。

命令和配置

滚动至顶部