How to Deploy an Eleventy (11ty) Static Site

Eleventy (11ty) is a refreshingly simple static site generator: no required client-side JavaScript, no opinionated framework, and support for a dozen templating languages (Nunjucks, Liquid, Markdown, plain HTML, and more). It produces lean, fast sites — ideal for blogs, marketing pages, and docs. Here's how to deploy one.

How Eleventy builds

Eleventy transforms your templates and content into a static _site/ directory by default:

npx @11ty/eleventy

Most projects wrap this in an npm script:

{
  "scripts": {
    "build": "eleventy",
    "start": "eleventy --serve"
  }
}

The default output directory is _site — note that underscore, which differs from the dist/public/build you see elsewhere. You can change it in config, but if you don't, point your host at _site.

Configuration in .eleventy.js

Eleventy's config is a plain JavaScript file. A typical production config sets input/output directories and copies static assets through untouched:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy('css');
  eleventyConfig.addPassthroughCopy('images');

  return {
    dir: {
      input: 'src',
      output: '_site',
    },
    pathPrefix: '/',
  };
};

addPassthroughCopy is important — without it, Eleventy doesn't copy your CSS, images, or other assets to the output, and you'll deploy an unstyled site. This is the #1 Eleventy deployment surprise.

The path prefix

If your site is served from a subpath, set pathPrefix and use the url filter on your links so they resolve correctly:

<a href="{{ '/about/' | url }}">About</a>
<link rel="stylesheet" href="{{ '/css/style.css' | url }}">

The url filter prepends your pathPrefix automatically. Serving from the root of your own domain? pathPrefix: '/' and you're done.

Pin your Node version

Eleventy is distributed as an npm package and recent major versions require modern Node. Pin your Node version (via .nvmrc or an environment setting) so local and CI builds match. Eleventy 3.x, for instance, expects a current LTS Node.

Keep it lean

Eleventy's whole appeal is that it ships nothing you don't ask for. Resist adding heavy client-side JavaScript unless you need it — the result is a site that loads almost instantly and aces Core Web Vitals. For the occasional interactive widget, add a small script only on the pages that need it.

Deploying on PandaStack (free)

1. 1Connect your Git repository as a static site.
2. 2PandaStack auto-detects the framework and runs your build (eleventy).
3. 3Set the output directory to _site (or whatever you configured).
4. 4Add your custom domain — automatic SSL is issued.
5. 5Push — it rebuilds and redeploys with live build logs.

Builds run in fast microVMs. The free tier includes 5 static sites with 100 GB/month bandwidth (Pro and above are unlimited static) — more than enough for an Eleventy site.

Common pitfalls

• Forgetting addPassthroughCopy — CSS and images don't make it to the output; the site looks broken.
• Wrong output directory — it's _site by default, not dist.
• Hardcoded links without the url filter — break when served from a subpath.
• Node version mismatch — pin it so CI matches local.

References

• Eleventy deployment guide: https://www.11ty.dev/docs/deployment/
• Eleventy configuration: https://www.11ty.dev/docs/config/
• Eleventy passthrough copy: https://www.11ty.dev/docs/copy/
• Eleventy path prefix & url filter: https://www.11ty.dev/docs/plugins/html-base/
• Eleventy getting started: https://www.11ty.dev/docs/getting-started/

---

Eleventy sites are tiny and lightning fast, and PandaStack hosts them from the edge for free — connect your repo, point the output at _site, and get automatic SSL. Deploy at https://dashboard.pandastack.io