Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/clenemt/eleventy-webpack
A barebone Eleventy and Webpack boilerplate 🎈
https://github.com/clenemt/eleventy-webpack
babel eleventy prettier sass static-site template webpack
Last synced: about 2 months ago
JSON representation
A barebone Eleventy and Webpack boilerplate 🎈
- Host: GitHub
- URL: https://github.com/clenemt/eleventy-webpack
- Owner: clenemt
- License: mit
- Created: 2020-05-14T15:25:37.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-12T22:26:26.000Z (almost 4 years ago)
- Last Synced: 2024-10-31T11:51:28.504Z (about 2 months ago)
- Topics: babel, eleventy, prettier, sass, static-site, template, webpack
- Language: JavaScript
- Homepage: https://eleventy-webpack.netlify.app
- Size: 1.86 MB
- Stars: 142
- Watchers: 4
- Forks: 29
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# eleventy-webpack :balloon:
A barebone [eleventy](https://www.11ty.dev/) and [webpack](https://webpack.js.org/) template. Fork and go.
[](https://app.netlify.com/sites/eleventy-webpack/deploys)
[](https://eleventy-webpack.netlify.app)
## Features
- :fire: Barebone [11ty](https://www.11ty.dev/) (literally :scream:)
- :zap: Fast build with per env configs ([babel-env](https://babeljs.io/docs/en/babel-preset-env), [postcss-preset-env](https://github.com/csstools/postcss-preset-env), [webpack](https://webpack.js.org/configuration/#use-different-configuration-file)...)
- `.js` (ES6, Babel, Polyfills)
- `.css` (Sass, PostCSS, Autoprefixer)
- :white_check_mark: Optimized for production (source maps, headers, minified code...)
- :camera_flash: Responsive images and cached remote images ([@11ty/eleventy-img](https://github.com/11ty/eleventy-img))
- :package: SVG icon sprite generation
- :robot: SEO metadata and Open Graph tags
- :link: Safe external links (`noopener` and `noreferrer`)
- :memo: Useful shortcodes and filters (date, markdown, sprite icons, responsive images...)
- :shipit: Neat error overlay ([eleventy-plugin-error-overlay](https://github.com/stevenpetryk/eleventy-plugin-error-overlay))
- :art: [Prettier](https://prettier.io/) for formatting
Live demo https://eleventy-webpack.netlify.app
## Usage
First install the dependencies:
```sh
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:
```sh
# 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
{% icon "github" %} Github icon
```
___
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
{% image "image.jpeg", "Image alt" %}
{% image "image.jpeg", "Image alt", "Image title" %}
Image title
{% image [100,100], "image.jpeg", "Image alt", "Image title", "my-class", false, "90vw" %}
Image title
```
___
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](https://date-fns.org/v2.16.1/docs/format):
```html
{{ page.date | format("yyyy") }}
2020
```
___
formatISO
Format the passed date according to [ISO format](https://date-fns.org/v2.16.1/docs/formatISO):
```html
{{ page.date | formatISO }}
2020-09-18T19:00:52Z
```
___
markdown
Parse the passed string with markdown:
```html
{{ page.title | markdown }}
My header
```
___
## Thanks
- 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