VT Code Camp Blog

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 ``
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 ReadMe 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