Eleventy 是一个简单、灵活且高度可定制的静态网站生成器。它基于 Node.js 平台，并且支持多种模板引擎，包括 Markdown。在本篇博客中，我将介绍 Eleventy 的基本概念，并演示如何使用 Eleventy 构建一个内容丰富的静态网站。
安装 Eleventy
首先，确保你的电脑已经安装了 Node.js。然后，在命令行中运行以下命令来全局安装 Eleventy：
npm install -g eleventy
创建项目
创建一个新的文件夹作为你的项目，并进入其中：
mkdir my-website
cd my-website
在这个文件夹中，运行以下命令，初始化你的项目：
npm init -y
这将创建一个 package.json 文件，用于管理你的项目依赖。
配置 Eleventy
在项目文件夹中，创建一个 .eleventy.js 文件作为 Eleventy 的配置文件。在这个文件中，你可以指定一些选项来自定义 Eleventy 的行为。例如，你可以定义输入和输出目录：
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("assets");
return {
dir: {
input: "src",
output: "dist"
}
};
};
在这个例子中，我们指定了 src 文件夹作为输入目录，dist 文件夹作为输出目录。此外，我们通过 addPassthroughCopy 方法将 assets 文件夹复制到输出目录，以便在网站中使用静态资源。
创建 Markdown 内容
在 src 目录中，创建一个名为 index.md 的 Markdown 文件，并添加一些示例内容：
# 欢迎来到我的网站
这是我的第一篇博客文章。Eleventy 是一个很棒的静态网站生成器，它可以帮助我快速创建网站并发布到 GitHub Pages 上。
## 为什么选择 Eleventy
Eleventy 可以与多种模板引擎一起使用，包括 Liquid、Nunjucks、Handlebars 和 Markdown。它还支持自定义过滤器和标签，以及构建时转换 Markdown 文件。
## 下一步
接下来，我将继续完善我的网站，并添加更多有趣的内容。请继续关注！
如果你对 Eleventy 感兴趣，可以查看官方文档了解更多信息：[Eleventy Documentation](https://www.11ty.dev/docs/)
构建网站
要构建你的网站，只需在命令行中运行以下命令：
npx eleventy
Eleventy 将把输入目录中的内容处理并输出到输出目录中。然后，你就可以在输出目录中查看生成的静态网站了。
预览网站
为了方便地预览你的网站，你可以运行一个本地服务器。运行以下命令安装一个简单的服务器：
npm install -g live-server
然后，在输出目录中运行以下命令启动服务器：
live-server dist
现在，你可以在浏览器中访问 http://localhost:8080 来预览你的网站。
结论
Eleventy 是一个功能强大、灵活且易于使用的静态网站生成器。它支持多种模板引擎，并且可以与 Markdown 文件一起使用。通过 Eleventy，你可以快速构建内容丰富的静态网站，并轻松部署到各种托管平台上。
希望这篇博客能够帮助你入门 Eleventy，并为你的网站开发之旅提供一些指导。祝你成功！
本文来自极简博客，作者：青春无悔，转载请注明原文链接：使用Eleventy构建静态网站
