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)

An intro to Eleventy - MancJS

By Luciano Mammino

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!

  • 235
Loading comments...

More from Luciano Mammino