Eleventy configuration

You can customize Eleventy starting file as you see fit.

The Eleventy JavaScript file

Eleventy uses a simple file, named by default .eleventy.js because of the leading dot it’s an hidden file , to define the settings of the building environment. This file is, by default, located at the root of the source folder but it can be put anywhere. The name itself can also be changed, if you see fit. 11tyTips modifies both the name, calling it make.js, and the location, putting it in the source/make/11ty directory.

This file defines the settings of the main resources used in the building process: libraries, shortcodes, filters, plugins, etc. 11tyTips fragments this monolithic file in specific modules, each devoted to a part of the configuration, all located in the source/make/11ty/ directory. The configuration object returned by the configuration/make file is important because it defines the location of the main components of the building process: the input and output directories, the templates processors, etc.

11tyTips declares its own set of directories, modifying some of the default names and locations for instance, the leading underscore character is suppressed for output, lib and matrix directories, in lieu of _output, _data and _includes; static directory is named assets, etc.

11tyTips/source/make/11ty/make.js
Prism

const MAKE_o =
{
  markdownTemplateEngine: 'njk',
  htmlTemplateEngine:     'njk',
  dataTemplateEngine:     'njk',
  templateFormats:        [ 'njk', 'md' ],
  passthroughFileCopy:    true,
  pathPrefix:             '/',
  dir:
  {
    input:    '.',
    output:   '../site',
    data:     'matter/assets/scripts/js/lib',
    includes: 'matrix',
  },

  tag_a:    //: to create collections
  [
    { tag_s: 'tip', sort_f: 'sortByRank__a' },
  ],
  static_o: { "matrix/assets/static": "assets" },    //: static files
  dirs_o:
  {
    makeDir_s:  './',
    pagesPartsDir_s: './matter/pages/parts',
  }
}

module.exports = make_o =>
{
  make_o.tag_a = MAKE_o.tag_a
  make_o.matrixDir_s = MAKE_o.dir.includes
  make_o.pagesPartsDir_s = MAKE_o.dirs_o.pagesPartsDir_s
  make_o.addPassthroughCopy( MAKE_o.static_o )
; [ 'libraries',
    'shortcodes',
    'filters',
    'plugins',
    'collections'
  ].forEach( make_s => require( `${MAKE_o.dirs_o.makeDir_s}${make_s}.js` )( make_o ) )
  return MAKE_o    // : return the configuration object for further customization
}

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