Bienvenue

Welcome to 11tyTips,
a site to magnify the power of Eleventy static site generator.

It's Eleventy time!

Eleventy (11ty for short) is a static site generator rapidly gaining popularity among JAMstack developers. Its learning curve is short and it offers the largest choice of templating languages compared with others popular SSG SSGs usually provide only one templating option: React, Liquid, Go, Jinja2, etc. Hexo is the most notable exception, but 11ty has even more options. .

11ty can be used without any configuration it is zero-config out-of-the-box! , but its power comes from the fact that it is backed by the huge Node.js ecosystem. Therefore, when building your static site with 11ty, you can do anything Node is able to do.

Tips for newbies and advanced users

11tyTips will provide useful tips and tricks to unleash the power of 11ty. If you’ve never built a static site, thanks to the simplicity of this generator, you will be able to install your site, by cloning the Github repository of this site, replacing its content files with your own Markdown content follow the site cloning page instructions to start with a clean site skeleton.

11tyTips styles have been carefully designed to give you a nice and simple presentation while offering advanced capabilities for a responsive layout with fluid typography applying Michael Riethmuller formula. , inline notes with full Markdown content, styling, linking, code blocks, etc. , an Atom RSS feed, a sitemap for search engines, as well as a good commenting system using the Github utteranc.es repository. and a full color theme with dark & light mode with a single click on the page banner area! .

Have a look at the site source tree and styles guide pages.

Comments

Home

Github

Twitter

RSS

All tips

  1. ...1 Site structure Site structure and directories
  2. ...2 Cloning 11tyTips site Start bloging with a clean site structure
  3. ...3 Source tree A bird's-eye view of the site
  4. ...4 Eleventy settings The main components of an Eleventy site build
  5. ...5 Global settings Global data for frequent use
  6. ...6 Styles guide Styles listing
  7. ...7 Names guide How variable identifiers are forged
  8. ...8 Front matter Accessing front matter data in Markdown and templates
  9. ...9 Shortcodes Processing Markdown content with shortcodes
  10. ..10 Minifying styles and script Generate minified CSS and JavaScript as inline blocks or files
  11. ..11 Using shorthands Use shorthand notation to simplify and clean your markdown
  12. ..12 Front matter post processing function A front matter function can be invoqued to modify the global or partial output of the template engine
  13. ..13 Processing before and after the template engine Add any kind of processing before and after your templating engine has done its work
  14. ..14 Variables scope and templates inheritance Take care of scope rules when using template inheritance
  15. ..15 Creating a menu A smart menu of posts is hard to create
  16. ..16 CSS mixins Filters ala SASS
  17. ..17 Light(ning) images How to slim overweight images