11ty Starter

Overview

11ty-starter is a static site example that utilizes Eleventy as a comprehensive build system for HTML, CSS, JavaScript, and image optimization. It showcases various features of Eleventy and provides a solid foundation for developing static websites.

Features

• Markdown content and front-matter: Allows easy creation and management of content using markdown syntax and front-matter metadata.
• Custom Nunchucks templates: Utilizes custom Nunchucks templates for styling and layout customization.
• Pages and article posts: Facilitates the creation of both static pages and dynamic article posts.
• Draft and future articles: Allows the creation of draft articles or scheduling of articles for future publishing.
• Article indexes: Provides the functionality to create indexes or lists of articles for improved navigation and organization.
• Filters for dates and word count: Offers filters to manipulate and format dates as well as count words in the content.
• Shortcode for generating navigation menus: Provides a shortcode for generating navigation menus, enhancing site navigation.
• Transformations for HTML and CSS: Supports transformations for HTML and CSS to optimize the output and improve performance.
• Image optimization: Includes image optimization capabilities to ensure efficient and optimized loading of images.
• Post CSS SCSS processing: Enables the use of SCSS with Post CSS processing for efficient CSS styling.
• Rollup.js JavaScript processing: Utilizes Rollup.js for processing JavaScript files, enhancing productivity and performance.

Installation

To install 11ty-starter, follow these steps:

1. Ensure that Node.js v12 or above is installed on your system.
2. Clone the repository to your local machine.
3. Install all required modules by running the following command:

npm install

Development mode build

To enable development mode on Linux/macOS, set the ELEVENTY_ENV environment variable to “development”:

export ELEVENTY_ENV=development

On Windows cmd:

SET ELEVENTY_ENV=development

Or on Windows PowerShell:

$env:ELEVENTY_ENV = "development"

Launch the Eleventy build process and server by running the following command:

npx eleventy --serve

Navigate to http://localhost:8080 in your browser to access the development build.

Production mode build

To enable production mode on Linux/macOS, set the ELEVENTY_ENV environment variable to “production”:

export ELEVENTY_ENV=production

On Windows cmd:

SET ELEVENTY_ENV=production

Or on Windows PowerShell:

$env:ELEVENTY_ENV = "production"

Run the Eleventy build process by executing the following command:

npx eleventy

The generated files in the build folder can be uploaded to any web host for deployment.

Summary

11ty-starter is an example static site that demonstrates the capabilities of Eleventy as a powerful build system for creating static websites. Its features include markdown content management, custom templates, article post management, navigation menu generation, and various optimization options for HTML, CSS, and images. With easy installation and production-ready builds, it provides a solid foundation for developing static sites efficiently.