An intro to Eleventy

Static Site generation made fun again!

Luciano Mammino (@loige)

2020-12-09

Static Site generators... wait, what?!

content & templates

static HTML pages & assets

This is the core of a static site generator!

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!

Let me introduce myself...

I'm Luciano (🇮🇹🍕🍝) 👋

Fullstack Web & Cloud Developer (Dublin) 👨‍💻

Co-Author of Node.js Design Patterns  👉

Connect with me:
 

  loige.co (blog)

  @loige (twitter)

  lmammino (github)

Some static sites I built

METALSMITH

A Java API client!

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

Which tool should I use?

+350 tools listed!

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 many if you want)

Fast & lightweight

Not opinionated

Simple to build incrementally on top of it

Makes me feel productive...

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

live coding time! 👨‍💻

BONUS! Automate deployment

Example using GitHub actions:

loige.link/11ty-ci-example

Thanks!

Cover Photo by Anthony Cantin on Unsplash

Icons by Freepik and Zlatko Najdenovski on Pixelbuddha

If you enjoyed this talk, you might also enjoy nodejsdp.link 😛

Let's connect!

  loige.co (blog)

  @loige (twitter)

  lmammino (github)