TechLifeWeb

Exploring the digital life

11ty Notes and Links


Published by 
 on 

Notes and links that relate to 11ty: Eleventy, a simpler static site generator

How to get started with 11ty: https://www.11ty.dev/docs/getting-started/

A Complete Guide to Building a Blog with Eleventy https://cfjedimaster.github.io/eleventy-blog-guide/guide.html

Has a nice series that was very helpful for me to get me started with 11ty. YouTube: Eleventy Crash Course #1 - Setting up a new 11ty project, creating Layouts, using Nunjucks templates - YouTube https://www.youtube.com/watch?v=uzM5lETc6Sg&list=PLtLXFsdHI8JTwScHvB924dY3PNwNJjjuW

YouTube: Build an 11ty Site in 3 Minutes - YouTube https://www.youtube.com/watch?v=BKdQEXqfFA0

Formatting dates nicely in 11ty with Luxon | Al Power https://www.alpower.com/blog/formatting-dates-in-eleventy

Notes on getting things set up

node Node.js — Download ''

Run the following commands. This installs 11ty, the luxon date formatter and the rss plugin

npm init -y
npm install --save-dev @11ty/eleventy
npm install luxon --save-dev
npm install @11ty/eleventy-plugin-rss --save-dev

Create these folders

md src
md src\assets
md src\css
md src\_includes
md src\_includes\components
md src\_includes\layouts
md _site

Create an .eleventy.js file and add the following

module.exports = function(eleventyConfig) {
    eleventyConfig.addPassthroughCopy("src/assets");
    eleventyConfig.addPassthroughCopy("src/css/");

    eleventyConfig.addWatchTarget("src/css/");
  
    return {
        dir: {
            input: 'src',
            includes: '_includes',
            output: '_site',  
        },
    templateFormats: ['md','njk','html'],
    markdownTemplateEngine: 'njk',
    htmlTmeplateEngine: 'njk',
    dataTemplateEngine: 'njk',
    };
}