Basic 11ty Tutorial

Published on 2022-09-16
by Saksham Alok
#11ty #WebDev

Begin the project

  1. install NPM
  2. initialising
npm init -y

npm install @11ty/eleventy
  1. open package.json and update scripts section to
"scripts": {
    "start": "npx @11ty/eleventy --serve",
    "build": "npx @11ty/eleventy"
  },

This enables a start command to run 11ty with hot-reload, which is provided by Browsersync that comes bundled as part of 11ty's --serve directive.

Add Eleventy Config

  1. Create .eleventy.js at the root
  2. add
module.exports = function (eleventyConfig) {
  return {
    dir: {
      input: "src",
      output: "public",
    },
  };
};

The first change here is setting the input directory to src - as in, the directory 11ty will watch for changes and use to build for production. Then, we change the output directory to public which means that's where our production-ready files for use by localhost and a hosting server will be published.

Run the develop Server

  1. npm start

  2. error message as no index file

  3. Create index file

    1. create src/
    2. create src/index.md

Create the base layout

  1. create _includes/base.njk inside src.
  2. use the double-curly format to access the title Frontmatter variable, like so: {-{ title }} and in order to allow rendering of any HTML tags from the page content, we also use the built-in filter called safe which is added after placing a pipe - | - character.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{-{ title }}</title>
  </head>
  <body>
    <header>{-{ title }}</header>
    <main>{-{ content | safe }}</main>
  </body>
</html>
  1. Manually refresh and let Browsersync do the rest.