layout	title
default-layout.njk	ReadMe

Checklist for 11ty & Netlify presentation

Demo of 11ty & Netlify on YouTube

Mini site available at https://demoblog.netlify.com/

Before Presentation

Delete old Github repo
Delete old Netlify site
Delete old local folder
Set zoom on Chrome and VS Code
Chrome Dev tools in Docked to bottom
Set visible monitor as main display to capture Alt + Tab
Open Github and Netlify - Log in to both
Disable notifications / sound
One trial run on conference WiFi

Presentation Steps

Introduce Agenda

Repo Setup

0:15 Create github Repo - "Demo Blog"
- Select Gitignore - Node
0:48 Clone Locally
- Copy Github URL
- Switch to VS code terminal
- Clone locally git clone url
- cd into folder
1:09 Open vs code in folder code . -r
1:30 Add npm npm init -y
1:40 Add eleventy npm i @11ty/eleventy (note: org/repo)
- this will take a minute
- start on content or give more overview

11ty Setup

1:55 Add Markdown content
- index.md - (note: lowercase important)
- about.md
3:40 Build site locally npx eleventy
- look at build folder and generated html
- introduce folder/index.html structure
4:44 Run site locally npx eleventy --serve
- Open browser
- Manually navigate to /about/ page
Achieved minimum viable site! 🎉

Git Push

5:38 add _site to .gitignore
6:05 git commit and push
6:33 Confirm commit made it to GitHub

Netlify Setup

6:49 Create netlify site
- pick repo
- pick eleventy defaults
7:38 View build process
7:52 Change site name
- [http://demoblog.netlify] if it's available - or audience suggestion
8:14 View site
8:25 Make one minor change and push
- Look at build process and look at new site
- Production site served off master
  - For SDLC, netlify also has feature branch deploys and PR deploys
  - Automic, Immutable Deployments - restore back at any point

Site Layout

9:45 Add _includes folder
- Add nunjucks default-layout.njk
- Introduce nunjucks - html + curly brackets templating
11:00 Point content files at layout
- Add Yaml Frontmatter to both pages
- Introduce Yaml - key value pair surrounded by triple hyphens
- We don't need the _includes path, 11ty looks there by default
```
---
layout: default-layout.njk
---
```
11:47 Add content to body {{content | safe}}
12:23 Add html layout
- Add HTML structure <html>, <head>, <body>
- Add <h1> with site name like "VT CC Blog" (to prove we're on layout)
12:49 View Site - Site name should appear

Page Titles

13:10 Add title to each yaml block
13:41 Add {{title}} to <h2> and <title> elements
13:59 View Site - Head title should appear

Navigation

14:13 Add navigation to layout page

nav
  ul
    li a(href='/') home
    li a(href='/about/') about

14:48 View site - click between pages

Styles

15:20 Add styles in dev tools

body {
    max-width: 50rem;
    margin: 0 auto;
}
nav ul {
    list-style: none;
    display: flex;
    background:aliceblue
}

nav ul li {
    padding: 5px
}

Copy to clipboard

16:57 Introduce asset pipeline
- Now we need a way to get them into our site
- We could inline them into layout page, but let's say we want to author stylesheet externally
- By default, 11ty only puts built content into the output directory
17:28 Create assets folder
- Create styles.css and paste in styles

17:45 Add 11ty config

Create .eleventy.js

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy('assets')
}

18:41 Restart eleventy (config only read on startup)
- Confirm assets folder is built into _site
19:13 Add stylesheet to layout <link rel="stylesheet" href="/assets/style.css">
19:45 View Site - Styles are applied

Netlify Features

20:26 Push changes
20:42 Go to Netlify
- Post-Processing / Asset-Optimization
21:04 Buy domain

KyleMit / DemoBlog

Checklist for 11ty & Netlify presentation

Before Presentation

Presentation Steps

Repo Setup

11ty Setup

Git Push

Netlify Setup

Site Layout

Page Titles

Navigation

Styles

Netlify Features

About

Languages