一、是什么？为什么选择它？
（简称11ty）是一个基于的静态站点生成器，它能将你编写的、HTML、等多种模板文件，编译生成纯静态的HTML网站 。
核心优势：
极速访问：输出纯静态文件，无运行时框架开销，首页加载仅需数百毫秒 。
零配置起步：无需复杂的配置，安装后即可运行。
灵活性强：支持HTML、、、、、Pug等多种模板语言，且可在同一项目中混用 。
数据管理：通过“数据级联”机制，轻松管理全局数据和页面数据。
二、快速搭建你的第一个网站
1. 环境准备与安装
确保你的电脑已安装 Node.js（版本14及以上）。在项目文件夹中打开终端，执行以下命令：
# 1. 初始化项目
npm init -y
# 2. 安装
npm @11ty/ --save-dev
2. 创建第一个页面
在项目根目录下创建一个index.md（或index.html）文件，内容如下：
title: 我的第一个网站
# 欢迎光临
这里是首页内容，由编写。
3. 启动开发服务器
在终端运行：
npx @11ty/ --serve
此时你会看到提示： at :8080/。打开浏览器即可访问你的网站。
> 说明：--serve参数会自动启动本地服务器并开启热重载，修改文件后页面会自动刷新 。
三、核心配置与常见问题解决
1. 目录结构配置
为了项目整洁，建议使用src作为源文件夹，（或_site）作为输出文件夹。在根目录创建..js配置文件：
. = () {
{
dir: {
input: "src", // 源文件目录
: "" // 输出目录
}
};
};
2. 处理HTML模板与资源文件
让HTML支持模板语法：默认不解析.html文件中的变量。解决方法有两种 ：
方法一：在.html文件顶部添加空的---前置数据。
方法二：在..js中配置：
.("html", {
: "njk", // 让HTML使用引擎
});
复制静态资源：图片、CSS等静态文件不会被自动复制到输出目录，需要使用指令 ：
. = () {
// 复制src目录下的所有CSS和图片
.('./src/.css');
.('./src//');
{ / ... */ };
};
3. 输出路径控制
如果你想控制生成的HTML文件位置，使用字段 ：
: /about/index.html
上述代码会强制将当前页面生成到/about/index.html。
4. 数据加载与集合
全局数据：在_data文件夹下创建.js或.json文件，数据会自动注入到所有模板中。
页面数据：在或HTML文件的顶部---区域定义。
集合（）：通过给页面打tags标签，可以自动生成集合，方便在页面上循环展示文章列表 ：
---
tags: posts
---
这是文章内容。
在模板中遍历：
<ul>
{% for post in .posts %}
<li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
{% %}
</ul>
四、部署你的网站
生成的是纯静态文件，因此可以部署在任何静态服务器上，推荐以下两种方式：
1. 使用 Pages（免费）
1. 在项目根目录运行构建命令：npx @11ty/
2. 将生成的（或_site）文件夹推送到仓库。
3. 在仓库的 -> Pages中，选择分支和文件夹，保存即可生效 。
2. 使用专业托管平台（如 Cloud）
在部署时需要配置环境变量，确保服务器知道如何构建你的项目 ：
# 设置Web根目录为输出文件夹
env set "/"
# 设置安装依赖的命令
env set "npm "
# 设置构建命令
env set "npx @11ty/"
五、常见问题排查
| 问题现象 | 解决方案 |
|---|---|
| 修改了图片或CSS，页面没变化 | 检查是否在..js中配置了 |
| 部署后图片404 | 确保HTML中的资源路径是相对路径（如/logo.png），而不是绝对路径（如//logo.png），尤其是部署在子目录时 。 |
| HTML文件不解析变量 | 在文件顶部添加空---，或按上文方法配置 |
| 数据变量无法获取 | 检查作用域。全局数据放在_data，页面级数据放在文件顶部，集合数据需先打tags标签 。 |
六、进阶功能与迁移建议
如果你是从旧的动态站点（如PHP、Node.js应用）迁移过来，提供了极佳的迁移路径：
复用现有模板：支持Pug等多种模板引擎，甚至可以直接复制原有的模板文件 。
自定义Feed：利用的非HTML渲染能力，你可以自定义生成RSS或Atom订阅源，保持原有格式不变 。
动态功能替代：静态站点无法处理用户提交的表单。建议使用第三方服务如 来处理表单提交，无需后端代码 。
