Basic 11ty Tutorial
Aug 25, 2022
2 minutes
Begin the project
- install NPM
- initialising
npm init -y
npm install @11ty/eleventy
- 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
- Create .eleventy.js at the root
- 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
npm start
error message as no index file
Create index file
a. create src/
b. create src/index.md
Create the base layout
- create _includes/base.njk inside src.
- 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>
- Ignore Hyphens(-).
- Manually refresh and let Browsersync do the rest.
