Minimalistic template for the awesome static site generator Eleventy/11ty, just
- Bootstrap 5 (via npm)
- Laravel Mix* for SCSS / JS compilation (incl. Autoprefixer)
* Laravel Mix is a wrapper around webpack, it is purely NodeJS, no PHP involved ;-)
Plugins used (you don't have to keep them):
- eleventy-navigation
- eleventy-img
- eleventy-rss (to get absolute URLs for social media open graph tags)
Install via:
npm install
Start local development with
npm run dev
Preview runs on http://localhost:8080/.
Where to edit?
- Work with files in
src/-folder - Homepage:
src/index.njk, Config:.eleventy.js - Don't edit
_site/folder (automatically generated)
Generate a static build with
npm run build
Advice: BASE_URL should be set as node env variable for open graph image support (they need full instead of relative URLs. You can strip them out as well in meta.njk. See .github/workflows/build-deploy.yaml for information. Currently it defaults to http://localhost:8080 if no env var is set.)
- Big thanks to bergwerk/11ty-mix by @marvinhuebner for example of using Laravel Mix!
- Some icons used of https://icons.getbootstrap.com/ (included via svg inline, MIT license)
- Inspired by https://github.com/maxboeck/eleventastic (MIT license)
- https://5balloons.info/setting-up-bootstrap-5-workflow-using-laravel-mix-webpack/
- Learned a lot from Eleventy (11ty) Static HTML Theme Conversion (YouTube)
- Layout based on official bootstrap Jumbotron Example
- https://11straps.com/
- https://github.com/mesinkasir/eleventyblog
- See all starters: https://www.11ty.dev/docs/starter/
Bootstrap information for npm/sass:
- https://getbootstrap.com/docs/5.2/getting-started/download/#source-files
- https://getbootstrap.com/docs/5.2/customize/sass/
Sustainable Web Design:
- Comment out not needed bootstrap components in
src/scss/app.scss
Roadmap:
- Add vite support (https://www.11ty.dev/docs/server-vite/), eleventy v2 needed, see e.g. https://github.com/matthiasott/eleventy-plus-vite
Ideas:
- Add support for Stackblitz (https://stackblitz.com/github/mandrasch/11ty-plain-bootstrap5)
- Add more demo content with image/gallery examples
- Add local google fonts example
- Improve handling of absolute URLs for open graph image information and BASE_URL settings
- Add sitemap.xml (See https://github.com/maxboeck/eleventastic)
- Add minimalistisc cache busting via timestamp https://rob.cogit8.org/posts/2020-10-28-simple-11ty-cache-busting/ or https://laravel.com/docs/9.x/mix#versioning-and-cache-busting (would require to read mix-manifest.json file in build step?)
- Check a11y with WAVE, aXe, etc. or use automated workflow, e.g. pa11y https://rodneylab.com/sveltekit-accessibility-testing
- Add PWA features (?)
MIT license
(License is for compatibility purposes with eleventys license only. You don't have to attribute my personal additions, I did mostly boring config stuff. Please be aware that Eleventy, Bootstrap, Bootstrap Icons, Laravel Mix and eleventy plugins used are licensed as MIT license.)