/DemoBlog

Tech Talk Rehearsal for VTCC & BOSCC

Primary LanguageNunjucksMIT LicenseMIT

layout title
default-layout.njk
ReadMe

Checklist for 11ty & Netlify presentation

Netlify Status

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
  • 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