11ty is a static website generation tool used to create websites from markdown files and style them using predefined templates.
I really don't want to invent the wheel here. Please refer to the official documentation for more and up to date information.
I cannot include examples on this page. I couldn't work out how to ignore the templating engine on particular lines. (Parts of the page were becoming my navbar. etc etc etc.)Other useful pages:
I would seriously recommend you set this up in a git repository. Not only does it make things easier for you, it allows you to more easily deploy your website.
Go into your git repo, then initalise your npm package.json
Install 11ty. Refer to the Official Instructions
Create an .eleventy.js file in your src directory
This file is where you configure 11ty with its various features and plugins. In the example below. 11ty is configured to read from src and output the generated files to www.
module.exports = function (config) {
// Return your Object options:
return {
markdownTemplateEngine: 'njk',
dataTemplateEngine: 'njk',
htmlTemplateEngine: 'njk',
dir: {
input: "src",
output: "www"
}
}
};
// Add config.addPassthroughCopy(dir) to this to allow you to copy other files to the dist directory
// config.addPassthroughCopy('./www_src/images/');
// config.addPassthroughCopy('./www_src/css/');
// config.addPassthroughCopy('./www_src/js/');
_includes
layouts
base.html
page.html
index.md
---
title: 'Home'
layout: 'layouts/page.html'
---
# Hello World!
Hello!
## Hello again!
Before we go trying to look at our content. We need to define our template/layout files.
reference the existing 11ty documentation here. I would include the base templates here, but it would mess with this page's layout.
Run npx eleventy --serve to automatically generate your website whenever you save a file in the src directory
Open http://localhost:8080/ in your browser to view your page
Just copy your output (www) folder and place it on your webhost!