Deploying Eleventy Sites
Zero-config static site generator for JavaScript, deploy _site output to any CDN.
PlatformsBeginner
Why
Eleventy is a zero-dependency SSG that supports 11 template languages (Nunjucks, Liquid, Markdown). It produces pure static HTML with no client JS, making sites extremely fast and easy to deploy.
Platform-as-a-Service adoption grew 24% in 2024 as teams shift from VM management to git-push deploys. the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research), and PaaS layers capture the majority of new workloads.
When
Use Eleventy for blogs, docs, and content sites where you want zero JS and multiple template options. Avoid for apps needing interactivity.
How
1. Build — npx @11ty/eleventy outputs _site/
2. Deploy — upload _site/ to any static host
3. Config — .eleventy.js for collections, filters, passthrough
4. Data — _data/ directory for global data files
5. Templates — any of 11 languages, configure in .eleventy.js
Example
// .eleventy.js
module.exports = (eleventyConfig) => {
eleventyConfig.addFilter("date", (d) => new Date(d).toLocaleDateString());
return { dir: { input: "src", output: "_site" } };
};
// Deploy to Netlify
[build]
command = "npx @11ty/eleventy"
publish = "_site"
Common Problems
- ⚠Templates not rendering — wrong template language extension or config dir mismatch
- ⚠Assets not copied — forgot passthrough copy in .eleventy.js
- ⚠Configuration drift between environments — use infrastructure-as-code (Terraform/Pulumi) to keep dev/staging/prod identical
Best Practices
- ✓Use passthrough copy for static assets — eleventyConfig.addPassthroughCopy('img')
- ✓Leverage collections for tagged content — eleventyConfig.addCollection for reusable queries
- ✓Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit