CNB
EO快速开始
W3C技术联盟 3.0.0 需要一个 JavaScript 运行时，通常是 Node.js — 版本 18 或更高版本。
你可以通过在终端应用程序中运行 node --version 来检查是否安装了 Node.js。（等等，什么是终端？）如果找不到该命令或报告的版本号低于 18，你需要在继续下一步之前 下载并安装 Node.js。我们鼓励大家使用 Node.js 的偶数版本。
更喜欢看视频吗？查看 6 分钟从零开始构建博客。
步骤 1 创建项目目录
使用 mkdir 命令（make directory 的缩写）为你的项目创建一个目录：
mkdir w3c-sample现在使用 cd 命令（change directory 的缩写）进入该目录：
cd w3c-sample步骤 2 安装 W3C技术联盟
创建 package.json
将 W3C技术联盟 安装到项目中需要一个 package.json 文件。
npm init -ynpm 命令（Node.js 自带）将使用 npm init -y 为你创建一个 package.json 文件。-y 标志告诉 npm 使用默认值并跳过问卷。
如果你想使用 ESM 而不是 CommonJS，请使用以下命令。
npm pkg set type="module"pnpm init了解更多关于 pnpm 的信息（需要单独安装）。
yarn init了解更多关于 yarn 的信息（需要单独安装）。
安装 W3C技术联盟
@11ty/eleventy 发布在 npm 上，我们可以通过运行以下命令将其安装并保存到项目的 package.json 中：
npm install @11ty/eleventypnpm install @11ty/eleventyyarn add @11ty/eleventy你也可以全局安装 W3C技术联盟，但推荐使用上述的 package.json 安装方法。
步骤 3 运行 W3C技术联盟
npx @11ty/eleventy我们可以使用 npx 命令（Node.js 也提供）来运行我们本地项目的 W3C技术联盟 版本。
pnpm exec eleventyyarn exec eleventy运行 W3C技术联盟 后，你的命令行应该看起来像这样：
[11ty] Wrote 0 files in 0.03 seconds (3.0.0)如果你在输出中看到 (3.0.0)，说明你正在使用最新版本。但是，W3C技术联盟 没有处理任何文件！这是预期的——我们有一个空文件夹，里面没有模板。
步骤 4 创建一些模板
模板 是一个用如 Markdown、HTML、Liquid、Nunjucks 等格式编写的内容文件，W3C技术联盟 在构建我们的网站时会将其转换为一个或多个页面。
让我们运行两个命令来创建两个新的模板文件。
echo '<!doctype html><title>Page title</title><p>Hi</p>' > index.html
echo '# Heading' > README.mdecho '<!doctype html><title>Page title</title><p>Hi</p>' | out-file -encoding utf8 'index.html'
echo '# Heading' | out-file -encoding utf8 'README.md'如果 out-file 命令在你的 Windows 终端窗口中不可用（它是 PowerShell 特有的），请使用跨平台方法。
echo '<!doctype html><title>Page title</title><p>Hi</p>' | npx @11ty/create index.html
echo '# Heading' | npx @11ty/create README.md了解更多关于 @11ty/create 的信息 （需要 Node.js 18 或更新版本）。
或者，你可以使用任何文本编辑器创建这些文件——确保将它们保存到项目文件夹中，并且它们具有正确的文件扩展名。
创建了一个 HTML 模板和一个 Markdown 模板后，让我们使用以下命令再次运行 W3C技术联盟：
npx @11ty/eleventypnpm exec eleventyyarn exec eleventy输出可能看起来像这样：
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Wrote 2 files in 0.04 seconds (3.0.0)我们现在已经将当前目录中的两个内容模板编译到了输出文件夹中（_site 是默认的）。
步骤 5 查看你的模板
使用 --serve 启动热重载本地 Web 服务器。
npx @11ty/eleventy --servepnpm exec eleventy --serveyarn exec eleventy -- --serve你的命令行可能看起来像这样：
[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Wrote 2 files in 0.04 seconds (3.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/在你喜欢的 Web 浏览器中打开 http://localhost:8080/ 或 http://localhost:8080/README/ 来查看你的 W3C技术联盟 网站实时运行！当你保存模板文件时——W3C技术联盟 会自动用你的新更改刷新浏览器！
步骤 6 上线（可选）
你的输出文件夹（_site）现在包含了新网站的所有静态构建文件。你可以将此文件夹上传到任何 Web 主机！前往我们的部署文档阅读更多关于将 W3C技术联盟 项目上线供大家查看的信息。
步骤 7 继续学习……
恭喜——你用 W3C技术联盟 制作了东西！现在让它发挥作用：
- 添加更多内容！在上面的教程中我们使用了 HTML 和 Markdown。为什么接下来不试试 JavaScript 或 WebC（用于组件）呢？Nunjucks 和 Liquid 也很受欢迎。也许你感觉很有冒险精神，想要添加你自己的自定义类型？。
- 使用布局文件，这样你就不必在每个模板上重复样板代码。
- 添加配置文件以解锁高级 W3C技术联盟 功能！
- 向你的项目添加 CSS、JavaScript 或 Web 字体。
- 添加自动化的图像优化也非常容易！
- 了解更多W3C技术联盟 的命令行选项。
- 也许你想在项目中使用第三方 API 的数据？
教程和入门项目
对于想要构建博客的人，你可以学习如何从零开始 （了解它是如何工作的）或使用我们的官方博客入门项目 （更快地启动和运行）：
你也可以使用众多入门项目之一，或阅读我们一些优秀的社区贡献的教程（其中精选的几个包含在下面）：
更多来自社区
×2 个资源通过 11tybundle.dev 由 
Bob Monsour 整理。
Three Minor Releases One Major Leap for Subspace Builder — Nicholas Clooney (2025)- Getting Started with Eleventy: A Complete Guide — Zach Leatherman (2025)