部署

现在你已经用 Eleventy 构建了一个网站（即使只有一个 HTML 页面！），你可能准备将它发布到网上让所有人看到！有很多不同的方法可以做到这一点！

标准的 Eleventy 构建（例如运行 npx @11ty/eleventy）默认就是生产就绪的构建。Eleventy 在内部不会为开发环境与生产环境改变其构建行为。

如果你想自定义 Eleventy 来实现自己的本地开发/生产环境优化，环境变量是实现这个目标的常用解决方案。

提供商

看看下面的列表，了解在哪里部署你的 Eleventy 项目。有很多部署选项可用，这里并非详尽列表。

Jamstack 提供商

Jamstack 提供商可以在你向源代码仓库（GitHub、GitLab、Codeberg 等）提交文件时自动触发你的 Eleventy 构建命令，并为你部署 Eleventy 的构建输出目录。

Render

Netlify

Cloudflare Pages

Vercel

GitHub Pages

使用 npm 脚本

通过 Jamstack 提供商部署 Eleventy 时的一个常见做法是使用 npm 脚本来运行构建命令。这在你的 package.json 文件中配置，可能如下所示：

{
  "scripts": {
    "build": "npx @11ty/eleventy"
  }
}

这允许你配置主机运行 npm run build，并允许你在代码中对该命令进行未来更改，而不需要在主机配置中更改。

传统 Web 主机

Eleventy 可以与任何支持静态文件的 Web 主机配合使用！

使用这些主机时，部署不会自动为你触发，所以在运行 Eleventy 构建命令后，你需要手动将 Eleventy 输出目录（默认为 _site）上传到主机。

如果你不熟悉源代码控制（例如 git 或 GitHub），这是一个很好的起点。

GitHub Pages CLI

Neocities

Netlify Drop

在线编辑

有一些很棒的 Web 编辑器出现，你可以用它在线运行和编辑 Eleventy 项目！这里有一些选项：

Stackblitz

持久化缓存

.cache 文件夹被 Eleventy Fetch 插件（和 Eleventy Image）用来避免重复昂贵的网络请求。在你的托管提供商的构建服务器上，当你开始构建时这个文件夹通常是空的，因为你绝对没有将你的 .cache 文件夹提交到 git（对吗？）。

一些 Jamstack 提供商有额外功能可以在构建之间持久化这个文件夹，重用缓存并加速构建时间。以下是其中一些：

• CloudCannon: 使用 Preserved paths。YouTube 教程。
• Vercel: 零配置支持（当检测到 Eleventy 框架时，源码）。
• Cloudflare Pages: 现在默认保留 .cache 文件夹！（2024年4月发布）
• GitHub Pages: 使用 cache action。包含下面的迷你教程。
• Netlify: 使用 netlify-plugin-cache。包含下面的迷你教程。YouTube 视频。

加速 Eleventy Image

此外，如果你将 Eleventy Image 输出写入你的 Eleventy 输出目录（例如 ./_site/img/）（并且不将这些文件提交到 git），你也可以持久化这个文件夹以重用 Eleventy Image 磁盘缓存来改善构建时间。

• CloudCannon YouTube 教程 (2023)
• Netlify 的 GitHub 源码示例 (2022)

迷你教程

将 Eleventy 项目部署到 GitHub Pages

包括跨构建的持久化缓存。使用 peaceiris/actions-gh-pages。

1. 转到 GitHub 上你的仓库设置。
2. 在 GitHub Pages 部分更改：
   • Source: Deploy from a branch
   • Branch: gh-pages/(root)
3. 将 "build-ghpages" 命令添加到你的
   package.json 脚本部分

   "scripts": {
     "build-ghpages": "npx @11ty/eleventy --pathprefix=/your-repo-name/",
   }

4. 在
   .github/workflows/deploy-to-ghpages.yml

   中创建新的 GitHub 工作流文件

   name: Deploy to GitHub Pages
   
   on:
     push:
       branches:
         - main
     pull_request:
   
   jobs:
     deploy:
       runs-on: ubuntu-22.04
       permissions:
         contents: write
       concurrency:
         group: ${{ github.workflow }}-${{ github.ref }}
       steps:
         - uses: actions/checkout@v3
   
         - name: Setup Node
           uses: actions/setup-node@v3
           with:
             node-version: "18"
   
         - name: Persist npm cache
           uses: actions/cache@v3
           with:
             path: ~/.npm
             key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
   
         - name: Persist Eleventy .cache
           uses: actions/cache@v3
           with:
             path: ./.cache
             key: ${{ runner.os }}-eleventy-fetch-cache
   
         - run: npm install
         - run: npm run build-ghpages
   
         - name: Deploy
           uses: peaceiris/actions-gh-pages@v3
           if: github.ref == 'refs/heads/main'
           with:
             github_token: ${{ secrets.GITHUB_TOKEN }}
             publish_dir: ./_site

使用 netlify-plugin-cache 持久化缓存

使用 netlify-plugin-cache。

1. npm install netlify-plugin-cache
2. 将以下内容添加到你的
   netlify.toml 配置文件

   [[plugins]]
   package = "netlify-plugin-cache"
   
     [plugins.inputs]
     paths = [ ".cache" ]

相关内容

来自社区

• GitLab Pages Sample Project by Benson Muite
• GitHub Action for Eleventy by @TartanLlama

×2 个资源通过 11tybundle.dev 由 Bob Monsour 整理。

• Making a free image gallery with 11ty and Neocities.org — Stefan Bohacek (2025)
• Deploying Eleventy Sites to Various Platforms — Zach Leatherman (2025)

其他页面在 Services

• 部署与托管
• Using a CMS
• Runtime APIs
  • 截图
  • OpenGraph 图像
  • IndieWeb 头像
  • 生成器图像
  • 托管图像
  • 迷你图