Eleventy Project for JS Marathon

Brought to you by This Dot Labs

Check out our live eleventy website

Video Tutorials

• Part 1 on 10/28/2020
• Part 2 on 12/9/2020

Links

• 11ty
• Nunjucks
• Node
• Netlify
• GitHub

Part 1

Quickstart

# setup
npm init -y
git init
npx gitignore node
npm install @11ty/eleventy

# run
eleventy --serve

Create Some Content

• about.njk
• contact.md
• index.md

Create a Layout

• Create _includes/defaultLayout.njk

• Inject {{content | safe}}

• Add frontmatter to point to layout

  ---
  layout: defaultLayout.njk
  ---

Create Eleventy Config

• Create .eleventy.js
• Add addPassthroughCopy
• Add some styles

Create / Consume Properties

• Add title property to frontmatter
• Consume {{title}} elsewhere (in layout)

Push to Netlify

• Commit changes
• Push to Github
• New Site From Git

Templating

• Condition blocks with if...then

Add Global Data

• Create _data/cats.json global data file
• Output with {{cats | dump}}

Part 2

The Cat API

Data Stage 1 - Hard Coded

Data Stage 2 - Live Pull

Data Stage 3 - Pull + Cache