An intro to Eleventy - MancJS

Static site generators and the JAMStack are all the rage right now. After trying several different tools to generate Static Sites, I recently discovered Eleventy and after building a few websites with it I feel like I am in love! In this presentation, I will try to explain why is that!

Transcript

1. AN INTRO TO ELEVENTY Static Site generation made fun again! Luciano Mammino ( ) @loige 2020-12-09 loige.link/11ty-mancjs MancJS
2. @loige loige.link/11ty-mancjs
3. STATIC SITE GENERATORS... WAIT, WHAT?! content & templates static HTML pages & assets This is the core of a static site generator! @loige
4. WHAT ARE WE TALKING ABOUT? I NEED EXAMPLES! A programming blog A recipes website A movie reviews website A photo book An online portfolio A podcast website ... And even single-page applications! @loige
5. LET ME INTRODUCE MYSELF... @loige
6. LET ME INTRODUCE MYSELF... I'm Luciano ( ) @loige
7. LET ME INTRODUCE MYSELF... I'm Luciano ( ) Fullstack Web & Cloud Developer (Dublin) @loige
8. LET ME INTRODUCE MYSELF... I'm Luciano ( ) Fullstack Web & Cloud Developer (Dublin) nodejsdp.link Co-Author of Node.js Design Patterns @loige
9. LET ME INTRODUCE MYSELF... I'm Luciano ( ) Fullstack Web & Cloud Developer (Dublin) nodejsdp.link Co-Author of Node.js Design Patterns Connect with me: (blog) (twitter) (github) loige.co @loige lmammino @loige
10. SOME STATIC SITES I BUILT loige.co open source! @loige
11. fastify.io METALSMITH open source! @loige
12. nodejsdp.link open source! @loige
13. @loige A Java API client!
14. WHY DO WE CARE? It's easy It's generally cheap It can scale easily It can be more secure We can build fast websites We can still use dynamic data (API, CMS, etc.) We can still add dynamic features @loige
15. WHICH TOOL SHOULD I USE? jamstack.org/generators/ +350 tools listed! @loige
16. WHY DO I LIKE ELEVENTY? It's written in Node.js It's so simple that you don't need a "starter" (but there are if you want) Fast & lightweight Not opinionated Simple to build incrementally on top of it Makes me feel productive... many @loige
17. OK. NOW, LET'S PLAY WITH ELEVENTY! Install + Hello world Custom config Templates, frontmatter & Layouts Live reload Copying static files Custom global data Collection API Using dynamic data @loige
18. LIVE CODING TIME! github.com/lmammino/11ty-sample-project @loige
19. BONUS! AUTOMATE DEPLOYMENT Example using GitHub actions: loige.link/11ty-ci-example @loige
20. THANKS! Cover Photo by on Icons by and on Anthony Cantin Unsplash Freepik Zlatko Najdenovski Pixelbuddha If you enjoyed this talk, you might also enjoy nodejsdp.link @loige Let's connect! (blog) (twitter) (github) loige.co @loige lmammino loige.link/11ty-mancjs