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