Eleventy and Static Site Generators

Static site generators are a hip new way to build a website - where nearly all the work is done at build time. It’s fast, fun, and a great option for side projects. This talk will explain what they are, and why they are gaining in popularity. Then, we’ll build a website live using my favorite static site generator - Eleventy.

Transcript

1. Static Site Generators And Eleventy
2. About This Talk 1. Brief overview of Static Site Generators (SSGs) 2. Make a website using Eleventy (11ty) 3. Answer questions
3. Static vs Dynamic Websites Static Websites Dynamic Websites ? ? ? Generally speaking, there are two types of sites: ▪ Static sites ▪ Dynamic sites
4. Static vs Dynamic Websites Static Website Dynamic Website http://info.cern.ch/hypertext/WWW/TheProject.html https://www.facebook.com/bsweedle
5. Static vs Dynamic Websites Static Website
6. Static vs Dynamic Websites Dynamic Website
7. Static vs Dynamic Websites WordPress Site
8. 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/
9. Static Site Generators Generates a static site by doing all the heavy lifting up front.
10. 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
11. Static Site Generators • SSG Pros: ◦ Fast load speed for users ◦ Scales well ◦ Secure ◦ Good developer experience ▪ (for frontend developers)
12. Static Site Generators • SSG Cons: ◦ Usability for non-developers ◦ Choice-overload ◦ Limitations of static sites
13. 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
14. 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
15. 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
16. 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.
17. Questions? @fairaxe bensweedler.com