How to Deploy an Eleventy (11ty) Static Site

Why Eleventy is great to host

Eleventy (11ty) is a refreshingly simple static site generator: it takes templates and data and produces plain HTML with no client-side framework forced on you. The output is just files — which means hosting is cheap, fast, and dead simple. This is the ideal candidate for free static hosting. Let's deploy one.

Step 1: Confirm your build output

Eleventy builds to _site/ by default. Your package.json should have a build script:

// package.json
{
  "scripts": {
    "build": "eleventy",
    "serve": "eleventy --serve"
  }
}

Check your config for a custom output directory:

// .eleventy.js (or eleventy.config.js)
export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("assets");
  return {
    dir: { input: "src", output: "_site" },
  };
}

addPassthroughCopy ensures static assets (images, CSS, fonts) get copied to the output untouched.

Step 2: Set the canonical URL for production

Eleventy doesn't need a base path for most setups, but if you generate absolute URLs (sitemaps, RSS, Open Graph tags), wire your production URL through global data:

// src/_data/site.js
export default {
  url: process.env.SITE_URL || "http://localhost:8080",
  title: "My 11ty Site",
};

Then reference site.url in your templates so canonical links and feeds point at your real domain.

Step 3: Deploy as a static site

Connect your Git repo to PandaStack and choose a static site. It auto-detects Eleventy, runs npm run build, and serves _site/. If detection needs help, set explicitly:

• Build command: npm run build
• Output directory: _site
• Install command: npm install (or pnpm/yarn/bun — overridable)

git push origin main
# Static build runs in a pandastack.ai microVM, output served globally

Static builds run in isolated microVMs and the result is distributed to the global edge. You get live build logs, so if a template errors you'll see it immediately.

Step 4: Custom domain and SSL

Add your domain in the dashboard. SSL provisions automatically (Cloudflare DNS), so https://yourdomain.com works with no cert management. Point your DNS at the provided target and you're live.

Step 5: Caching and performance

Static HTML is already fast, but a few wins:

• Fingerprint your CSS/JS filenames so you can cache them aggressively (Eleventy plugins or a build step can hash them).
• Keep images optimized — the @11ty/eleventy-img plugin generates responsive, modern formats at build time.
• Because there's no server, there's no cold start and nothing to scale — it's pure edge-served files.

Step 6: Rebuilds on content changes

Every git push triggers a rebuild and redeploy. For content-heavy sites that pull from a CMS or external data, Eleventy's data cascade fetches at build time — so a push (or a scheduled rebuild via a cronjob hitting your deploy) regenerates the site with fresh content.

Free hosting math

The PandaStack free tier includes 5 static sites, 100GB bandwidth/month, and 300 build minutes/month — comfortably enough for personal sites, docs, blogs, and small business sites. Pro and Premium make static sites unlimited with more bandwidth and build minutes if you outgrow free.

Quick checklist

• [ ] Build command eleventy / npm run build
• [ ] Output directory _site
• [ ] Production URL wired via global data
• [ ] Passthrough copy for assets configured
• [ ] Custom domain added, SSL automatic

References

• [Eleventy documentation](https://www.11ty.dev/docs/)
• [Eleventy — data cascade](https://www.11ty.dev/docs/data-cascade/)
• [eleventy-img plugin](https://www.11ty.dev/docs/plugins/image/)
• [Eleventy — passthrough file copy](https://www.11ty.dev/docs/copy/)

---

Eleventy plus free static hosting is about as low-friction as the web gets — push your repo, get a globally served site with automatic SSL. Deploy yours on PandaStack's [free tier](https://dashboard.pandastack.io): 5 static sites, 100GB bandwidth, $0/mo.