Deployment

Contents

• Providers
  • Jamstack Providers
  • Classic Web Hosts
  • Edit on the Web
• Persisting Cache
  • Speed up Eleventy Image
• Mini-Tutorials
  • Deploy an Eleventy project to GitHub pages
  • Using netlify-plugin-cache to persist cache
• 相关内容
• 来自社区的资源

现在你已经用 Eleventy 构建了一个网站了 （即使只有一个 HTML 页面！） ，并且已经准备好要把它放到网上让大家看看了！以下是各种部署网站的方式！

标准的 Eleventy 构建 (例如 运行 npx @11ty/eleventy) 默认是针对生产环境的。Eleventy 内部并不会针对开发和生产环境改变自己的构建行为。

如果你想定制 Eleventy 来实现开发/生产环境的优化，环境变量 是实现这一目标的常用方法。

Providers Jump to heading #

Take a look at the list below for some ideas on where to deploy your Eleventy project. There are many deployment options available and this is not meant to be an exhaustive list.

Jamstack Providers Jump to heading #

Jamstack providers can trigger your Eleventy build command automatically when you commit a file to your source control repository (GitHub, GitLab, Codeberg, etc.) and deploy Eleventy’s build output directory for you.

Use an npm Script Jump to heading #

One common practice when deploying Eleventy via a Jamstack provider is to use an npm script to run your build command. This is configured in your package.json file and could look like this:

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

This allows you to configure your host to run npm run build and allows you to make future changes to that command in your code and not the host’s configuration.

Classic Web Hosts Jump to heading #

Eleventy can work with any web host that supports static files!

With these hosts deployment is not automatically triggered for you, so after you run the Eleventy build command you’ll need to upload your Eleventy output directory (defaults to _site) to the host manually.

This is a great place to start if you’re not familiar with source control (e.g. git or GitHub).

Edit on the Web Jump to heading #

There are some great Web editors popping up that you can use to run and edit Eleventy projects online! Here are some options:

Persisting Cache Jump to heading #

The .cache folder is used by the Eleventy Fetch plugin (and Eleventy Image) to avoid repeating costly network requests. On your hosting provider’s build server, this folder will typically be empty when you start a build, because you definitely are not checking in your .cache folder to git (right?).

Some Jamstack providers have additional features to persist this folder between builds, re-useing the cache and speeding up build times. Here are a few of these:

• CloudCannon: use Preserved paths. Tutorial on YouTube.
• Vercel: zero-configuration support (when the Eleventy framework is detected, source).
• Cloudflare Pages: now preserves the .cache folder by default! (shipped April 2024)
• GitHub Pages: use the cache action. Mini-tutorial included below.
• Netlify: use netlify-plugin-cache. Mini-tutorial included below. Video on YouTube.

Speed up Eleventy Image Jump to heading #

Additionally, if you’re writing your Eleventy Image output to your Eleventy output directory (e.g. ./_site/img/) (and not checking those files into git), you can persist this folder as well to reuse the Eleventy Image disk cache to improve build times.

• CloudCannon Tutorial on YouTube (2023)
• Source example on GitHub for Netlify (2022)

Mini-Tutorials Jump to heading #

Deploy an Eleventy project to GitHub pages Jump to heading #

Includes persisted cache across builds. Using peaceiris/actions-gh-pages.

1. Go to your repository’s Settings on GitHub.
2. In the GitHub Pages section change:
   • Source: Deploy from a branch
   • Branch: gh-pages/(root)
3. Create a new GitHub workflow file in
   .github/workflows/deploy-to-ghpages.yml

   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

Using netlify-plugin-cache to persist cache Jump to heading #

Using netlify-plugin-cache.

1. npm install netlify-plugin-cache
2. Add the following to your
   netlify.toml configuration file

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

相关内容 Jump to heading #

来自社区的资源 Jump to heading #

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

×67 resources courtesy of 11tybundle.dev curated by Bob Monsour

• Building a Euros sweepstake website with 11ty — Rob Wood (2024)
• Scheduled posts and deployments with 11ty — Nicki Hoffman (2024)
• Eleventy, Codeberg CI & Pages — Mathilde Grünig (2024)
• Scheduling Posts with a Static Site — Alex Hyett (2024)
• Eleventy adoption guide: Overview, examples, and alternatives — Nelson Michael (2024)

Expand to see 62 more resources.

• Deploying An 11ty Project To Shared Hosting — fLaMEd (2024)
• Eleventy website to GitHub Pages with GitHub Actions — Andres Bitrian (2024)
• Deploy a Static Website to AWS S3 with Official GitHub Actions — Lucas Cantor (2024)
• Fixing a typo shaved 4 minutes off my Netlify build time — Thomas Rigby (2024)
• Creating a Reading List with Eleventy and Omnivore — Tom Doe (2024)
• Automate Your Static Site Rebuilds with Netlify Scheduled Functions — Marc Littlemore (2024)
• Eleventy: pathPrefix and GitHub Pages — Łukasz Wójcik (2024)
• Deploy an Eleventy site to Cloudflare Pages efficiently with GitHub's action cache — Jonas Brusman (2024)
• Automatic Mastodon post embeds — Cory Dransfeldt (2024)
• Eleventy - Differentiate between dev and production builds with unique favicons — Rob O'Leary (2024)
• Buttondown with 11ty on Netlify with GitHub — Jay Cuthrell (2024)
• How I deploy my Eleventy site to Neocities — Sophie Koonin (2024)
• Cloudflare Pages Cron Deploys — Jeff Sheets (2024)
• Cloudflare _redirects — Jeff Sheets (2024)
• A Simple Guide to Redirects on Neocities with Eleventy — fLaMEd (2024)
• Deploy 11ty Site Using Rsync — Moritz Giessmann (2024)
• Deploying my website — Tobias Fedder (2023)
• ELEVENTY V3 WITH ESM SUPPORT NOW ON THE CANARY CHANNEL — Zach Leatherman (2023)
• Automating my site update with gitlab ci/cd — Grigør (2023)
• Migrating from WordPress to Eleventy (part 4) — Carlos Araya (2023)
• How to schedule posts in Eleventy — Sophie Koonin (2023)
• My Neocities workflow: using Eleventy and the CLI to speed up development — Whiona (2023)
• Seven Million npm Downloads — 11ty (2023)
• TinaCMS + 11ty — Clayton Errington (2023)
• Speed up your CloudCannon Builds with Preserved Paths — CloudCannon (2023)
• Scheduling Automatic Builds with Static Site Generators — Clayton Errington (2023)
• CloudCannon + Eleventy — Clayton Errington (2023)
• From Zero to CMS in 2 Minutes with CloudCannon and Eleventy — CloudCannon (2023)
• Deploying an 11ty Site to GitHub Pages Using GitHub Actions — Jonathan Snook (2023)
• Fetching webmentions with Netlify and Eleventy Edge — Martin Schneider (2023)
• Remove trailing slash on 11ty S3 hosted sites using Cloudfront function — Martin Hicks (2023)
• Cloudflare Pages error with 11ty build — Simon Cox (2023)
• Blogging on the Jamstack with Netlify & Eleventy — David Darnes (2023)
• GitLab CI Pipeline for Eleventy — Aaron Goldenthal (2023)
• Netlify Eleventy Build Failire — John M. Wargo (2023)
• Scheduled Eleventy builds on Vercel with cron-triggered GitHub actions — Cory Dransfeldt (2023)
• Using the Codeberg CI — Clayton Errington (2023)
• Rebuilding 11ty on a schedule — James Doc (2023)
• Setup GitLab Review Apps with Eleventy — Aaron Goldenthal (2023)
• Hassle-free internationalization with Eleventy 2.0 and Netlify — Lene Saile (2023)
• Cheaply Rebuilding an 11ty site on Netlify — Benny Powers (2023)
• Post previews with Ghost, Eleventy & Netlify — David Darnes (2023)
• Letting Eleventy Schedule Its Own Builds — Luke Bonaccorsi (2022)
• Testing the Netlify Cache Plugin with Eleventy — Raymond Camden (2022)
• Static site delivery automation with Eleventy & Buddy — Buddy (2022)
• Add Build Info to an 11ty Site — Aleksandr Hovhannisyan (2022)
• Hosting Eleventy on GitHub Pages — Quinn Dombrowski (2022)
• Building blocks for my first Eleventy site — Sami Määttä (2022)
• Automatic Eleventy (11ty) Site Updates with Github Hooks — Joonas Pihlajamaa (2022)
• How to Create and Deploy Your First Eleventy Website — Ayooluwa Isaiah (2021)
• Turn static HTML/CSS into a blog with CMS using the JAMStack — Kevin Powell (2021)
• Deploying an 11ty Site to Azure Static Web Apps — Chad Schulz (2021)
• Get your Eleventy Site into the real world using a hosting provider like Netlify or Git pages — Mike Street (2021)
• Using Cloudflare workers to publish your scheduled 11ty posts — Mike Street (2021)
• Quick Tips for Eleventy and Vercel — Raymond Camden (2021)
• Trigger a Netlify build every day with IFTTT — 11ty (2021)
• How To Deploy an Eleventy Site to Github Pages with a Custom Domain — Justus Grunow (2020)
• Testing my Eleventy-website with Cypress and Netlify — Martin Schneider (2020)
• Building a website with a static site generator, part 1: Setup — Juha-Matti Santala (2020)
• Using eleventy — Carlos Araya (2019)
• Deploying an 11ty Site to GitHub Pages — Jonathan Snook (2019)
• Deploy a free Gatsby, Hugo, or Eleventy website template in 30 seconds — Phil Hawksworth (2018)

---

Other pages in Getting Started:

• 在命令行下使用
  • 调试模式
• Glossary
• 来自社区的教程
• 项目模板
• Performance
• 编程式 API
• 部署网站
• Using a CMS