| layout | title |
|---|---|
default-layout.njk |
ReadMe |
Demo of 11ty & Netlify on YouTube
Mini site available at https://demoblog.netlify.com/
- 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
- Introduce Agenda
- 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 cdinto 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
- 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! 🎉
- 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
-
9:45 Add
_includesfolder- Add nunjucks
default-layout.njk - Introduce nunjucks - html + curly brackets templating
- Add nunjucks
-
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
_includespath, 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)
- Add HTML structure
-
12:49 View Site - Site name should appear
- 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
-
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
-
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
assetsfolder- Create
styles.cssand paste in styles
- Create
-
17:45 Add 11ty config
- Create
.eleventy.js
module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy('assets') }
- Create
-
18:41 Restart eleventy (config only read on startup)
- Confirm assets folder is built into
_site
- Confirm assets folder is built into
-
19:13 Add stylesheet to layout
<link rel="stylesheet" href="/assets/style.css"> -
19:45 View Site - Styles are applied