Slide 1

Slide 1 text

Static Site Generators And Eleventy

Slide 2

Slide 2 text

About This Talk 1. Brief overview of Static Site Generators (SSGs) 2. Make a website using Eleventy (11ty) 3. Answer questions

Slide 3

Slide 3 text

Static vs Dynamic Websites Static Websites Dynamic Websites ? ? ? Generally speaking, there are two types of sites: ■ Static sites ■ Dynamic sites

Slide 4

Slide 4 text

Static vs Dynamic Websites Static Website Dynamic Website http://info.cern.ch/hypertext/WWW/TheProject.html https://www.facebook.com/bsweedle

Slide 5

Slide 5 text

Static vs Dynamic Websites Static Website

Slide 6

Slide 6 text

Static vs Dynamic Websites Dynamic Website

Slide 7

Slide 7 text

Static vs Dynamic Websites WordPress Site

Slide 8

Slide 8 text

Static Site Generators SSGs: Static Site Generators. The thing that generates the site. SSG sites: Static Site Generator-generated Sites. The sites that are generated. https://tatianamac.com/posts/beginner-eleventy-tutorial-parti/

Slide 9

Slide 9 text

Static Site Generators Generates a static site by doing all the heavy lifting up front.

Slide 10

Slide 10 text

Static Site Generators Generates a static site by doing all the heavy lifting up front. All this happens at build time This is all that happens at runtime

Slide 11

Slide 11 text

Static Site Generators ● SSG Pros: ○ Fast load speed for users ○ Scales well ○ Secure ○ Good developer experience ■ (for frontend developers)

Slide 12

Slide 12 text

Static Site Generators ● SSG Cons: ○ Usability for non-developers ○ Choice-overload ○ Limitations of static sites

Slide 13

Slide 13 text

Eleventy Let’s make a website using 11ty ● It’s a JavaScript based static site generator ● Calls itself the “simpler static site generator” ● People seem to really like it

Slide 14

Slide 14 text

Eleventy Live Code Demo! Let’s make a website for my band! We already have a Facebook page... But it would nice to have something more! https://github.com/pharaxe/hotclub.band

Slide 15

Slide 15 text

Hot Club of Urbana ● How can we get more gigs? ○ Contact information ○ Pictures of the band ○ A way to listen to us ○ List of upcoming shows 1. Pages and Layouts 2. Images 3. Components: Make a component that shows a Youtube Video 4. Use the Facebook API to get events from our Facebook page ● What We’ll Do

Slide 16

Slide 16 text

Final Thoughts ● Generating a static site happens at build time. ○ The trick is figuring out what sort of things you can do during that time. ● People are utilizing the resources of other dynamic sites to make powerful static sites. ○ The JAM Stack! ● The possibilities of static sites keep expanding because the technology keeps getting more advance.

Slide 17

Slide 17 text

Questions? @fairaxe bensweedler.com