The JAMstack architecture

The principles of JAMstack static site.

What is JAMstack?

Eleventy, as most static sites, relies on an architectural paradigm called JAMstack, an acronym meaning: a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. see Mathias Biilmann & Phil Hawksworth book: Modern Web development on the JAMstack. .

In the JAMstack architecture, JavaScript is used not only in the browser for interactivity and presentation but also to build all the files of the site this is the case of Eleventy. Other generators use different languages: Go, Python, etc. ; the APIs are the programming interfaces to Node packages Eleventy itself is a Node package. or other frameworks used as a back end; Markdown is used to set the content of each page of the site, with a settings part (front matter) using either JavaScript or a description language like YAML or TOML and a template part there are many templating systems: Liquid, Nunjucks, Hanbdlebars, Pug, etc. .

11tyTips architecture

Trying to stay as simple as possible, 11tyTips is built using a minimal set of the JAMstack architecture: JavaScript, backed by the Node ecosystem, Nunjucks, as templating system, and Markdown as content markup language. It doesn’t follow the canonical dispatching of files promoted by Eleventy and most satic site generators (data, templates, contents), but follows a pattern examplifying the JAMstack paradigm.

The source directory design reflects the JAMstack categories:

I sometimes like to call it the 3M directory all of its subdirectory having names begining with an m letter, enumerating these directory names sounds like a slogan: make matrix matter(s)! . All subdirectories of the three first level directories follow a consistent naming scheme:

This structure departs deliberately from what is generaly adopted by static sites built with Eleventy see, for instance, Eleventy base blog structure , examplifying the versatility of the tool Eleventy configuration object has two properties allowing this precious flexibility: dir.data and dir.includes. : Eleventy doesn’t lock you into a predefined scheme and let you express your specific needs with ease.

11tyTips has been designed to offer the maximum of flexibility and consistency in the development phase, keeping a strong separation of concerns as to ease any needed refactoring and modification of the code. The site source tree gives an overview of the source directory hierarchy.

Following these configuration options leads to a command line requiring the --config argument:

npx eleventy --config=make/11ty/make.js

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