Overview
Twelvety is a pre-configured Eleventy starter project that is designed to be fast. It includes a component architecture, CSS pipeline using Sass, PostCSS, and CleanCSS, JS pipeline using Browserify, Babel, and Uglify, page-specific CSS and JS, inline critical CSS, deferred non-critical CSS, minified HTML, CSS, and JS, a responsive picture shortcode with AVIF and WebP support, and content-hash of assets. It allows users to easily deploy their own instance of Twelvety to Netlify and provides instructions for running it locally.
Features
- Component architecture
- CSS pipeline using Sass, PostCSS, and CleanCSS
- JS pipeline using Browserify, Babel, and Uglify
- Page-specific CSS and JS
- Inline critical CSS and defer non-critical CSS
- Minified HTML, CSS, and JS
- Responsive picture shortcode with AVIF and WebP support
- Content-hash of assets
Installation
To install Twelvety, you will need to follow these steps:
- Click the “Use this template” button at the top of the Twelvety repository to create your own Twelvety repository in your GitHub account.
- Clone or download your new Twelvety repository onto your computer.
- Make sure you have Node.js and npm installed. These are included with Node.js.
- Open a terminal or command prompt and navigate to the Twelvety repository directory.
- Run the following commands:
npm install
to install the required packagesnpm run serve
to run a development server with live-reloadnpm run build
to build for productionnpm run clean
to clean the output folder and Twelvety cache
Summary
Twelvety is a pre-configured Eleventy starter project that offers a range of features to help developers build fast websites. It has a component architecture, a CSS pipeline using Sass, PostCSS, and CleanCSS, a JS pipeline using Browserify, Babel, and Uglify, and many other useful features. The installation process is straightforward and can be done by following a few simple steps. Overall, Twelvety provides a solid foundation for building performant websites using Eleventy.