A barebone eleventy and webpack template. Fork and go.
- ๐ฅ Barebone 11ty (literally ๐ฑ)
- โก Fast build with per env configs (babel-env, postcss-preset-env, webpack...)
.js
(ES6, Babel, Polyfills).css
(Sass, PostCSS, Autoprefixer)- โ Optimized for production (source maps, headers, minified code...)
- ๐ธ Responsive images and cached remote images (@11ty/eleventy-img)
- ๐ฆ SVG icon sprite generation
- ๐ค SEO metadata and Open Graph tags
- ๐ Safe external links (
noopener
andnoreferrer
) - ๐ Useful shortcodes and filters (date, markdown, sprite icons, responsive images...)
Neat error overlay (eleventy-plugin-error-overlay)
- ๐จ Prettier for formatting
Live demo https://eleventy-webpack.netlify.app
First install the dependencies:
npm install
Then you can:
Command | Description |
---|---|
npm run start |
Run your website on http://localhost:8080 |
npm run build |
Build your production website inside /_site |
npm run format |
Run prettier on all filles except /_site |
npm run analyze |
Output info on your bundle size |
A very simple webpack.config.js
is included. Feel free to change it.
All shortcodes can be used inside .md
or .njk
files.
icon
Any SVG added to src/assets/icons
is bundled into a symbol sprite file and made available through this shortcode.
<!-- Assuming `src/assets/icons/github.svg` exist -->
{% icon "github" %} Github icon
<!-- Will be rendered as -->
<svg class="icon icon--github" role="img" aria-hidden="true">
<use xlink:href="/assets/images/sprite.svg#github"></use>
</svg>
image
Creates a WebP version of the image and the corresponding optimized JPEG / PNG. Images will be created in multiple sizes. See utils/shortcodes.js
for default values.
<!-- Assuming `src/assets/images/image.jpeg` of width 330px exist -->
{% image "image.jpeg", "Image alt" %}
<!-- Will be rendered as -->
<picture>
<source type="image/webp" srcset="/assets/images/678868de-320.webp 320w, /assets/images/678868de.webp 330w" sizes="90vw">
<source type="image/png" srcset="/assets/images/678868de-320.png 320w, /assets/images/678868de.png 330w" sizes="90vw">
<img loading="lazy" src="/assets/images/678868de.png" alt="Image alt" width="330" height="580">
</picture>
<!-- If a title is passed the shortcode will output a <figure> with <figcaption> -->
{% image "image.jpeg", "Image alt", "Image title" %}
<!-- Will be rendered as -->
<figure>
<picture>
<source type="image/webp" srcset="/assets/images/678868de-320.webp 320w, /assets/images/678868de.webp 330w" sizes="90vw">
<source type="image/png" srcset="/assets/images/678868de-320.png 320w, /assets/images/678868de.png 330w" sizes="90vw">
<img loading="lazy" src="/assets/images/678868de.png" alt="Image alt" width="330" height="580">
</picture>
<figcaption>Image title</figcaption>
</figure>
<!-- Additional options -->
{% image [100,100], "image.jpeg", "Image alt", "Image title", "my-class", false, "90vw" %}
<!-- Will be rendered as -->
<figure class="fig-my-class">
<picture>
<source type="image/webp" srcset="..." sizes="90vw">
<source type="image/png" srcset="..." sizes="90vw">
<img class="img-my-class" loading="eager" src="..." alt="Image alt" width="100" height="100">
</picture>
<figcaption>Image title</figcaption>
</figure>
markdown
Embed markdown easily.
{% markdown %}
Let's you use **Markdown** like _this_.
Or with includes {%- include 'content.md' -%}.
{% endmarkdown %}
All filters can be used inside .md
or .njk
files.
format
Format the passed date with date-fns:
<!-- Assuming page.date is a javascript date -->
{{ page.date | format("yyyy") }}
<!-- Will be rendered as -->
2020
formatISO
Format the passed date according to ISO format:
<!-- Assuming page.date is a javascript date -->
{{ page.date | formatISO }}
<!-- Will be rendered as -->
2020-09-18T19:00:52Z
markdown
Parse the passed string with markdown:
<!-- Assuming page.title is `# My header` -->
{{ page.title | markdown }}
<!-- Will be rendered as -->
<h1>My header</h1>
- https://github.com/gregives/twelvety
- https://github.com/hankchizljaw/hylia
- https://github.com/MadeByMike/supermaya
- https://github.com/jeromecoupe/webstoemp
- https://github.com/maxboeck/eleventastic
- https://github.com/deviousdodo/elevenpack
- https://github.com/ixartz/Eleventy-Starter-Boilerplate
- https://github.com/google/eleventy-high-performance-blog
- https://github.com/danurbanowicz/eleventy-netlify-boilerplate