Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An intro to Eleventy - MancJS

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!

F3a6662b3cd161c3c2f13604965ed0f2?s=128

Luciano Mammino

December 09, 2020
Tweet

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