Deployment

Now that you’ve built a web site with Eleventy (even if it’s one HTML page!) you might be ready to put it on the web for everyone to see! There are a bunch of different ways to do it!

A standard Eleventy build (e.g. running npx @11ty/eleventy) is a production-ready build by default. Eleventy doesn’t change its build behavior internally for development versus production.

If you want to customize Eleventy to do your own local development/production optimizations, environment variables are a common solution to accomplish that goal.

Providers

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

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.

Azure Static Web Apps

Netlify

Sourcehut Pages

Kinsta

DeployHQ

Git-based deployment platform that runs your Eleventy build on its servers and transfers the <code>_site/</code> output to your own server via SSH/SFTP/FTP (or to S3, Azure Blob, or Rackspace Cloud Files). Supports multiple environments with branch-to-server mapping, config-file injection, atomic releases, one-click rollback, and pre/post deploy hooks.

Stormkit

GitLab Pages

Codeberg Pages

Cloudflare Pages

Vercel

GitHub Pages

CloudRay

Render

CloudCannon

Digital Ocean

Use an npm Script

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

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).

Tiiny Host

NearlyFreeSpeech

xmit

Cloudflare Direct Upload

Neocities

Vercel CLI

Orbiter

Netlify Drop

Edit on the Web

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

Stackblitz

Persisting Cache

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:

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

Speed up Eleventy Image

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.

• Write images to .cache to reuse Persisted Cache (see above) (2025)
• Source example on GitHub for Netlify (2022)
• CloudCannon Tutorial on YouTube (2023)

Mini-Tutorials

Deploy an Eleventy project to GitHub pages

Includes persisted cache across builds.

1. Create a new file in your repository at .github/workflows/deploy-gh-pages.yml. Copy and paste the contents from the eleventy-base-blog sample YAML configuration for GitHub Actions.
2. Go to your repository’s Settings on GitHub and find the GitHub Pages subsection. Under the Build and Deployment on the GitHub Pages settings, find the Source option and select GitHub Actions
3. In your project’s package.json, make sure the build-ghpages script has the --pathprefix= parameter set to your repository name.

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

4. Exception: When using a Custom domain (example.com) with GitHub Pages, deploying to example.com/ instead of *.github.io/YOUR_REPO_NAME/ make sure to remove the --pathprefix parameter entirely. e.g. "build-ghpages": "npx @11ty/eleventy",
5. Commit this new .github/workflows/deploy-gh-pages.yml file and push it upstream to GitHub.

Using netlify-plugin-cache to persist cache

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" ]
   

Related

From the Community

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

×134 resources via 11tybundle.dev curated by Bob Monsour.

• How I build a website for Frank — Štěpán Žák (2026)
• Create A Static Site Using 11ty & Deploy to Neocities (2026 Refresh) — fLaMEd (2026)
• Automating Blog Posts to Mastodon From My Website — Kyle Reddoch (2026)
• Rebuilding lucascantor.com — Lucas Cantor (2026)
• Changing how I deploy my Eleventy sites — Bob Monsour (2026)

Other pages in Services

• Deployment & Hosting
• Using a CMS
• Runtime APIs
  • Screenshots
  • OpenGraph Image
  • IndieWeb Avatar
  • Generator Image
  • Hosting Image
  • Sparklines