An example static site which uses Eleventy as a complete build system for HTML, CSS, JavaScript, and image optimization.
The following Eleventy features are demonstrated:
- markdown content and front-matter
- custom Nunchucks templates
- pages and article posts
- draft and future articles
- article indexes
- filters for dates and word counts
- a shortcode to generate navigation menus
- transformations for HTML and CSS
- image optimization
- PostCSS SCSS processing
- Rollup.js JavaScript processing
Ensure Node.js v12 or above is installed, clone the repository, and install all modules:
git clone https://github.com/craigbuckler/11ty-starter
cd 11ty-starter
npm i
Set ELEVENTY_ENV
to development
to enable development mode on Linux/macOS:
ELEVENTY_ENV=development
Windows cmd:
set ELEVENTY_ENV=development
Or Windows Powershell:
$env:ELEVENTY_ENV="development"
Launch the Eleventy build process and server:
npx eleventy --serve
Navigate to http://localhost:8080 in your browser.
Set ELEVENTY_ENV
to production
to enable production mode on Linux/macOS:
ELEVENTY_ENV=production
Windows cmd:
set ELEVENTY_ENV=production
Or Windows Powershell:
$env:ELEVENTY_ENV="production"
Run the Eleventy build process:
npx eleventy
The files generated in the build
folder can be uploaded to any web host.