Get started quickly with Eleventy, while using modern JS & CSS workflows. Tools used: webpack, babel, PostCSS and Tailwind.
The focus is to have a minimal setup that allows modern JS & CSS features and a performant build output, with bundling and cache busting for the assets. Here's a quick list of features:
- standard structure for new projects (check out the
- basic initial layout (
- JS & CSS bundling through webpack
- cache busting for production deployments
- modern JS support through Babel
- modern CSS support through PostCSS (
- the Tailwind library is included by default
- Vendor assets: anything in the src/vendor folder will be copied through to the output folder.
This repository is automatically published on Netlify at https://elevenpack.netlify.com/.
Contributions are welcome!
git clone email@example.com:deviousdodo/elevenpack.git mysite cd mysite yarn yarn dev # ... edit anything in src, yarn add other packages, etc
To publish your website, run
yarn build and the output will be in the
src/site will be converted by Eleventy - this is the input folder. The ouput folder is
src/vendor folders will be copied verbatim and you can reference any file by using the direct path, eg.
<img src="/img/example.png"> <link rel="stylesheet" href="/vendor/example.min.css">
src/vendor folder is meant for external assets that you don't want to bundle (because they change rarely compared to your own source or for performance reasons).
src/css folders will be bundled. The
index.css files are the entry points and thus required.
If you'd like to try other starter projects then check out https://www.11ty.dev/docs/starter/