AN INTRO TO ELEVENTY
Static Site generation made fun again!
Luciano Mammino ( )
@loige
2020-11-17
loige.link/11ty-corkdev
Slide 2
Slide 2 text
loige.link/11ty-corkdev
@loige
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 (
)
Principal Software Engineer at FabFitFun (Dublin)
@loige
Slide 8
Slide 8 text
LET ME INTRODUCE MYSELF...
I'm Luciano (
)
Principal Software Engineer at FabFitFun (Dublin)
Lived in Cork for 1 year (2015)!
@loige
Slide 9
Slide 9 text
LET ME INTRODUCE MYSELF...
I'm Luciano (
)
Principal Software Engineer at FabFitFun (Dublin)
Lived in Cork for 1 year (2015)!
nodejsdp.link
Co-Author of Node.js Design Patterns
@loige
Slide 10
Slide 10 text
LET ME INTRODUCE MYSELF...
I'm Luciano (
)
Principal Software Engineer at FabFitFun (Dublin)
Lived in Cork for 1 year (2015)!
nodejsdp.link
Co-Author of Node.js Design Patterns
Connect with me:
(blog)
(twitter)
(github)
loige.co
@loige
lmammino
@loige
Slide 11
Slide 11 text
SOME STATIC SITES I BUILT
loige.co
open source!
@loige
Slide 12
Slide 12 text
fastify.io
METALSMITH
open source!
@loige
Slide 13
Slide 13 text
nodejsdp.link
open source!
@loige
Slide 14
Slide 14 text
@loige
Slide 15
Slide 15 text
@loige
A Java API client!
Slide 16
Slide 16 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
We can still add dynamic features
@loige
Slide 17
Slide 17 text
WHICH TOOL SHOULD I USE?
jamstack.org/generators/
351 tools listed!
@loige
Slide 18
Slide 18 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 19
Slide 19 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 20
Slide 20 text
LIVE CODING TIME!
github.com/lmammino/11ty-sample-project
@loige
Slide 21
Slide 21 text
BONUS! AUTOMATE DEPLOYMENT
Example using GitHub actions:
loige.link/11ty-ci-example
@loige
Slide 22
Slide 22 text
THANKS!
Cover Photo by on
Icons by and on
Anthony Cantin Unsplash
Freepik Zlatko Najdenovski Pixelbuddha
loige.link/11ty-corkdev
If you enjoyed this talk, you
might also enjoy
nodejsdp.link
@loige
Let's connect!
(blog)
(twitter)
(github)
loige.co
@loige
lmammino