Eleventy

Eleventy (11ty) is a simple, flexible static site generator for Node.js. It outputs a fully static site to _site/ by default. pageflare integrates as a post-build step via npm scripts.

Eleventy has a plugin system with an eleventy.after event, but the simplest approach is chaining pageflare in your build command.

Install

npm install -D @pageflare/cli

Usage

Chain pageflare after eleventy in your npm scripts:

package.json

{
  "scripts": {
    "build": "eleventy && pageflare _site/ --in-place"
  }
}

Every npm run build now optimizes the output automatically.

Configuration

Create a pageflare.jsonc in your project root:

pageflare.jsonc

{
  "minify_html": true,
  "minify_css": true,
  "minify_js": true,
  "js_defer": true,
  "lazy_images": true,
  "img_dimensions": true,
  "font_swap": true,
  "preconnect_hints": true
}

If you use a custom output dir (via --output or .eleventy.js config), pass the same path:

eleventy --output=dist && pageflare dist/ --in-place

What pageflare Adds

Eleventy focuses on templating and content — it does not minify or optimize output. pageflare adds:

• HTML, CSS, and JS minification
• Lazy loading and image dimension inference
• JavaScript defer and loader injection
• Font display swap and self-hosting
• Preconnect hints for third-party origins
• Critical CSS extraction (Pro)
• Responsive image srcset generation (Pro)

Replacing plugins

Eleventy’s ecosystem uses plugins for optimization. After adding pageflare, you can remove:

Package	pageflare equivalent
@11ty/eleventy-img	Keep if using shortcodes in templates; pageflare handles images in the output
eleventy-plugin-lazyimages	Lazy loading with loading="lazy" and dimension inference
html-minifier-terser / eleventy-plugin-html-minifier	HTML minification
clean-css / cssnano	CSS minification
terser	JS minification

Tip

pageflare is a single binary — no npm packages to install per optimization. If you’re running html-minifier, clean-css, and terser as separate build steps, replace all three with one pageflare call.

CI/CD Integration

GitHub Actions

.github/workflows/build.yml

- name: Build Eleventy
  run: npx eleventy

- name: Optimize with pageflare
  uses: getappz/pageflare-cli@v1
  with:
    args: "_site/ --in-place"

Netlify

netlify.toml

[build]
  command = "eleventy && pageflare _site/ --in-place --no-progress"
  publish = "_site"

Vercel

vercel.json

{
  "buildCommand": "eleventy && pageflare _site/ --in-place --no-progress"
}

Pro License

Set the PAGEFLARE_LICENSE environment variable to unlock Pro optimizations:

PAGEFLARE_LICENSE=your-key npm run build

Deploying

Eleventy static output works with any hosting provider:

• Vercel — automatic Vercel Image Optimization
• Netlify — automatic Netlify Image CDN
• Cloudflare Pages — Cloudflare Image Resizing
• Self-hosted — any static file server

Troubleshooting

pageflare processes 0 files Verify the output directory — Eleventy defaults to _site/ but this can be changed in .eleventy.js or eleventy.config.js via dir.output. Use && to ensure Eleventy finishes before pageflare runs.

Images not found Eleventy does not copy images by default. Make sure you have passthrough file copy configured for your image directories in .eleventy.js:

eleventyConfig.addPassthroughCopy("src/images");

Build takes too long For large sites, run with --log info to see per-phase timing. Eleventy’s own build is fast, but pageflare’s image processing scales with the number of images. Use --force in CI to skip incremental caching.