Building an Eleventy Starter Template Series

In this series, let’s explore how to build a starter template for Eleventy projects and examine the difficult choices that we often face when starting new projects. The goal here is to make those tough choices early on so that when we use this template for any future project, we can get started right away.

Setting up Future Projects for Success with Template Repositories

Do you like to work on lots of side projects in your spare time? Do you wish you could skip the setup process and jump straight into the building? Learn how to construct your own starter template for Eleventy so you can start your future projects sooner.

Project Setup and Configuration

Set some goals for an ideal starter template using Eleventy. Learn how to set up the project structure and configuration and build an initial HTML page.

HTML

Now that we have a first HTML page, let's make the HTML layout more flexible and dynamic so we can modify it as needed on a page-by-page basis.

CSS

Learn how to create flexible CSS support for your template using SCSS that can handle both custom and third-party styles with ease.

JavaScript

After our HTML and CSS are added to our Eleventy template, learn how to add support for JavaScript with a modern bundling process, linting, and testing.

Legacy JS Builds and TypeScript Support

If you want to support both legacy and modern browsers without sacrificing performance you’ve got to get creative with legacy JavaScript builds and TypeScript support.

Progressive Web App Support

Learn how to include Progressive Web App (PWA) support in your Eleventy Starter template. By leveraging service workers, web manifests, and other best practices, PWAs are responsive, resilient, and installable.

Maintenance and Collaboration

Learn how to round out your project with maintenance and collaboration tools from building dependency updates and continuous integration checks to including pull requests and issue templates.