Week 10

Static Site Generators (I)

Intro

This week, you’ll follow a tutorial to understand the capabilities of static site generators and start to transform your Project 4 designs into HTML.

Sync Up

• Look over your whole-site mock-ups with a non-stakeholder partner of your choosing

Activities

• Read about static site generators
• Follow the Eleventy Tutorial
  1. Remix this Glitch project
  2. Follow along with the tutorial videos below to modify your Glitch project and learn about the powers of Eleventy.
     • Tutorial introduction
     • Layout files: Basics
     • Layout files: Advanced
     • Includes: Basics
     • Sass partials
     • Using dynamic logic
     • Collections
     • Includes: Advanced
     • Troubleshooting Eleventy + Glitch
• Complete steps 1-2 under “Develop” for Project 4

Note that this tutorial uses Sass rather than Less as its CSS preprocessor. For your final project you should feel free to use either one, but for now the main difference to keep in mind is that Sass uses the $ character at the beginning of variable names while Less uses @. Also note that Sass’s @import statement works a little differently than Less’s @import.

Also note that Glitch has its own Eleventy Starter Project Template that you can look at (and/or remix) if you want to consider other approaches to setting up a project directory.