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
src
folder) - basic initial layout (
src/site/_includes/layouts/default.njk
) - JS & CSS bundling through webpack
- cache busting for production deployments
- modern JS support through Babel
- modern CSS support through PostCSS (
postcss-import
,postcss-preset-env
andcssnano
plugins included) - 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 git@github.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 dist
directory.
Everything in src/site
will be converted by Eleventy - this is the input folder. The ouput folder is dist
.
The src/img
and 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">
The 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).
The src/js
and src/css
folders will be bundled. The index.js
& 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/