11ty Essential CLI Reference

Project Setup

1. Initialize Project

npm init -y

Purpose: Creates the package.json file used to manage project information, dependencies, and npm scripts.

Example Generated File:

{
  "name": "mysite",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC"
}

Run: Once per project

This keeps it short while showing beginners what npm init -y actually creates.

2. Install 11ty

npm install @11ty/eleventy

Purpose: Installs Eleventy and adds it to project dependencies.

Development

3. Start Development Server

npx @11ty/eleventy --serve

Purpose:

• Builds the site
• Starts local server
• Watches file changes
• Auto reloads browser

Use: Daily development

Production

4. Build Static Website

npx @11ty/eleventy

Purpose: Generates the production-ready static website.

Output:

_site/

Use: Before deployment

Maintenance

5. Check Installed Version

npx @11ty/eleventy --version

Purpose: Displays the installed 11ty version.

6. Update 11ty

npm update @11ty/eleventy

Purpose: Updates 11ty to the latest compatible release.

7. Install Project Dependencies

npm install

Purpose: Installs all packages listed in package.json.

Use:

• After cloning a project
• After downloading a project

8. Clean Build Folder (Windows)

rmdir /s /q _site

Purpose: Removes generated build files.

Use: Troubleshooting only

Deployment

Upload Only

_site/

Do Not Upload

src/
node_modules/
.git/

Daily Workflow

cd mysite
npx @11ty/eleventy --serve

Develop your site.

npx @11ty/eleventy

Deploy the generated:

_site/

Important Project Files

package.json     → Project dependencies & scripts
.eleventy.js     → 11ty configuration
src/             → Source files
_site/           → Generated website
node_modules/    → Installed packages

Commands Used Most Often

npm install
npx @11ty/eleventy --serve
npx @11ty/eleventy
npx @11ty/eleventy --version

Conclusion

For most projects, you'll spend nearly all your time using just two commands:

npx @11ty/eleventy --serve
npx @11ty/eleventy

The first handles development, while the second generates the final static website ready for deployment. Everything else is occasional setup or maintenance.