eleventy-webpack

A barebone eleventy and webpack template. Fork and go.

Features

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 and noreferrer)
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

Usage

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

Make sure you use the correct node.js version:

# with bash nvm 
nvm use `cat .nvmrc`
# with windows nvm
nvm use $(cat .nvmrc)
# or just install the version specified inside `.nvmrc`

Webpack

A very simple webpack.config.js is included. Feel free to change it.

Shortcodes

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.

html
<!-- 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.

html
<!-- 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.

html
{% markdown %}
Let's you use **Markdown** like _this_.
Or with includes {%- include 'content.md' -%}.
{% endmarkdown %}

Filters

All filters can be used inside .md or .njk files.

format

Format the passed date with date-fns:

html
<!-- 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:

html
<!-- Assuming page.date is a javascript date -->
{{ page.date | formatISO }}
<!-- Will be rendered as -->
2020-09-18T19:00:52Z