11tyby screenshot

11tyby

Author Avatar Theme by Jahilldev
Updated: 3 Feb 2023
59 Stars

Simple 11ty setup using TypeScript, SASS, Preact with partial hydration, and other useful things. Aims to provide the DX of Gatsby, but using 11ty!

Categories

Overview:

11tyby is an organized boilerplate for 11ty, designed to help users quickly set up their 11ty projects. It includes features such as TypeScript, native JSX support via Preact, CSS Modules with SASS, and a well-defined webpack config for better developer experience and optimized performance. The project also includes partial hydration to reduce the amount of code shipped to users.

Features:

  • TypeScript: 11tyby supports TypeScript for better type checking and code organization.
  • Native JSX support via Preact: Users can use JSX syntax in their 11ty project by leveraging the power of Preact.
  • CSS Modules with SASS: 11tyby comes pre-setup with support for CSS Modules and SASS, allowing users to write modular and scoped styles.
  • Well-defined webpack config for great DX: The project includes a well-defined webpack configuration to enhance the developer experience and simplify the build process.
  • Partial hydration: 11tyby includes a dedicated package for partial hydration, reducing the amount of code shipped to users and improving performance.

Installation:

To install and use 11tyby, follow these steps:

  1. Clone the repository:
git clone <repository-url>
  1. Install the dependencies:
npm install
  1. Start the development server:
npm run serve
  1. Customize and build your project according to your needs.

Summary:

11tyby is a boilerplate for 11ty that aims to streamline the setup process for users. It provides features such as TypeScript, native JSX support via Preact, CSS Modules with SASS, and a well-defined webpack config. The project also includes partial hydration for improved performance. By using 11tyby, users can quickly set up and start working on their 11ty projects without spending time on configuring tooling and dependencies.