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