VT Code Camp Website

• Production site: https://www.vtcodecamp.com/
• Deploy Previews: https://deploy-preview-{PR#}--vtcodecamp.netlify.com/
• Branch Deploys: https://{branch-name}--vtcodecamp.netlify.com/

Built With

• 11ty/Eleventy - static site generation
• nunjucks - templating
• netlify - building / hosting
• google fonts - fonts
• fontawesome icons - svg icons
• unDraw -- illustrations

Project Setup

• Install Node.js & NPM
• Run npm install in the project directory to install local dependencies
• Run npm run serve to run a local dev environment
• Access dev copy of the site at localhost:8080

NPM Scripts

npm run build             # runs `npx eleventy` to build the site
npm run serve             # builds site + serves `_site` directory
npm run update-data       # gets sessionize data and updates _data directory
npm run update-and-build  # gets new sessionize data and builds site

Build Workflow / Interface Diagram

Site Winterization

Leading up to, and for a while after the event, we set the Netlify build command to npm run update-and-build in the netlify.toml file. This pulls the latest data from Sessionize at build time since the schedule, session descriptions, and speaker info can change. We also set up a Zapier job to rebuild the site on a schedule via webhook. Sessionize data stops changing once the event has been over for a little while. At that point we stop the scheduled, live rebuilds. Since we do this in the fall, we call it winterization 😉. Here are the steps:

1. Run npm run update-data and commit all data file changes
2. Change build command in netlify.toml to npm run build so Netlify will no longer update data from Sessionize
3. Disable the Zapier task

File Structure

2019.vtcodecamp
├── _site/                # generated site output
├── .vscode/              # vs code editor configs
├── .netlify/             # netlify dev settings
├── node_modules/         # created by npm install
├── src
│   ├── _data             # data directory for 11ty (json + js)
│   │   ├── config.js     # environment settings
│   │   └── sponsor.js    # data driving sponsor section
│   ├── _includes         # template directory for 11ty
│   │   └── defaultLayout # parent template layout page
│   ├── assets            # static assets to build into site
│   │   └── sponsorLogos/ # sponsor logos
│   ├── [PageName].md     # any .md files will be built into html
│   ├── [PageName].njk    # any .njk files will be built into html
│   ├── favicon.ico       # favicon needs to be in root dir
│   └── index.njk         # home page
├── package.json          # lists npm modules, package, and scripts
├── .eleventy.js          # config information for 11ty
├── .gitignore            # ignored files in git
├── netlify.toml          # deploy settings for netlify
├── resources.md          # helpful links
└── readme.md             # 🟊 [You Are Here]

YAML FrontMatter

Data can be added to the beginning of a page and leveraged in the templating process. The following fields are commonly used by the layout page:

---
layout: default-layout.njk
title:  page title and header element
meta_description: description will show up in meta tags
---

Sponsor Logo Workflow

• Add sponsor info to sponsors.json
• Start with scale:100 and run project locally, value can be adjusted (70...150) to maintain consistent visual weight in each category
• Logo should have an transparency channel for non-design elements (background)
  • If it doesn't, add an alpha channel, and remove background with magic selector using any of the following programs:
    • paint.net
    • gimp
    • affinity designer
    • any other tools (lots available)
• Compress Image
  • Raster
    1. Whatever the screen resulting resolution, the logo should be resized down to double that resolution for retina displays
    2. Use ImageOptim, Compressor.io, or Squoosh
  • SVG
    • Use SVGOmg
  • Note: At some point we may try to bake this into the build process if we can get node based CLIs for each optimization. Netlify is setup to perform non-lossy asset optimization, but there's still a lot of other more opinionated optimizations.

Resources

Checkout resources.md for a bunch of docs, links, google search results that helped get us to the point where we are today. Often each resource links lives within the same commit where that feature was being worked on, so you can see a real example of how that snippet was actually implemented.

Contributing

Thanks for your interest in contributing! There are many ways to contribute to this project.

Get started with contributing.md