Slide 1

Slide 1 text

AN INTRO TO ELEVENTY Static Site generation made fun again! Luciano Mammino ( ) @loige 2020-12-09 loige.link/11ty-mancjs MancJS

Slide 2

Slide 2 text

@loige loige.link/11ty-mancjs

Slide 3

Slide 3 text

STATIC SITE GENERATORS... WAIT, WHAT?! content & templates static HTML pages & assets This is the core of a static site generator! @loige

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

LET ME INTRODUCE MYSELF... @loige

Slide 6

Slide 6 text

LET ME INTRODUCE MYSELF... I'm Luciano ( ) @loige

Slide 7

Slide 7 text

LET ME INTRODUCE MYSELF... I'm Luciano ( ) Fullstack Web & Cloud Developer (Dublin) @loige

Slide 8

Slide 8 text

LET ME INTRODUCE MYSELF... I'm Luciano ( ) Fullstack Web & Cloud Developer (Dublin) nodejsdp.link Co-Author of Node.js Design Patterns @loige

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

SOME STATIC SITES I BUILT loige.co open source! @loige

Slide 11

Slide 11 text

fastify.io METALSMITH open source! @loige

Slide 12

Slide 12 text

nodejsdp.link open source! @loige

Slide 13

Slide 13 text

@loige A Java API client!

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

WHICH TOOL SHOULD I USE? jamstack.org/generators/ +350 tools listed! @loige

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

LIVE CODING TIME! github.com/lmammino/11ty-sample-project @loige

Slide 19

Slide 19 text

BONUS! AUTOMATE DEPLOYMENT Example using GitHub actions: loige.link/11ty-ci-example @loige

Slide 20

Slide 20 text

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