An intro to the JAMStack and Eleventy

AN INTRO TO
THE JAMSTACK & ELEVENTY
Luciano Mammino ( )
@loige
loige.link/11ty-jam
May 18, 19, 20 - 2021
1

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

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
4

LET ME INTRODUCE MYSELF...
@loige
5

I'm Luciano ( 🍕🍝) 👋
@loige
5

Senior Architect
@loige
5

Senior Architect
nodejsdp.link
Co-Author of Node.js Design Patterns 👉
@loige
5

Senior Architect
nodejsdp.link
Co-Author of Node.js Design Patterns 👉
Connect with me:

(blog)
(twitter)
(github)
loige.co
@loige
lmammino
@loige
20% eBook discount on Packt
20NODEMAY
5

WE ARE BUSINESS FOCUSED TECHNOLOGISTS THAT DELIVER.
| |
Accelerated Serverless AI as a Service Platform Modernisation
Do you want to ?
work with us
loige 6

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

fastify.io
METALSMITH
open source!
@loige
8

nodejsdp.link
open source!
@loige
9

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
11

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

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
13

OK. NOW, LET'S PLAY WITH ELEVENTY!
Install + Hello world
Custom conﬁg
Templates, frontmatter & Layouts
Live reload
Copying static ﬁles
Custom global data
Collection API
Using dynamic data
Pagination API
@loige
14

mkdir 11ty-sample-project
cd 11ty-sample-project
npm init -y
npm i --save-dev @11ty/eleventy
echo "# My sample Eleventy website" > index.md
node_modules/.bin/eleventy --watch --serve
1
2
3
4
5
6
7
8
9
@loige
PROJECT SCAFFOLD
15

npm init -y
1
2
3
4
5
6
7
8
9
npm init -y
1
2
3
4
5
6
7
8
9
@loige
PROJECT SCAFFOLD
15

npm init -y
1
2
3
4
5
6
7
8
9
npm init -y
1
2
3
4
5
6
7
8
9
1
2
npm init -y
3
4
5
6
7
8
9
@loige
PROJECT SCAFFOLD
15

npm init -y
1
2
3
4
5
6
7
8
9
npm init -y
1
2
3
4
5
6
7
8
9
1
2
npm init -y
3
4
5
6
7
8
9
1
2
npm init -y
3
4
5
6
7
8
9
@loige
PROJECT SCAFFOLD
15

npm init -y
1
2
3
4
5
6
7
8
9
npm init -y
1
2
3
4
5
6
7
8
9
1
2
npm init -y
3
4
5
6
7
8
9
1
2
npm init -y
3
4
5
6
7
8
9 node_modules/.bin/eleventy --watch --serve
1
2
npm init -y
3
4
5
6
7
8
9
@loige
PROJECT SCAFFOLD
15

npm init -y
1
2
3
4
5
6
7
8
9
npm init -y
1
2
3
4
5
6
7
8
9
1
2
npm init -y
3
4
5
6
7
8
9
1
2
npm init -y
3
4
5
6
7
8
9 node_modules/.bin/eleventy --watch --serve
1
2
npm init -y
3
4
5
6
7
8
9
npm init -y
1
2
3
4
5
6
7
8
9
@loige
PROJECT SCAFFOLD
15

// .eleventy.js
module.exports = function (config) {
return {
dir: {
input: './src', // default: `.`
output: './build' // default: _site
}
}
}
1
2
3
4
5
6
7
8
9
10
@loige
CUSTOM CONFIG
17

// .eleventy.js
return {
dir: {
}
}
}
1
2
3
4
5
6
7
8
9
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
@loige
CUSTOM CONFIG
17

// .eleventy.js
return {
dir: {
}
}
}
1
2
3
4
5
6
7
8
9
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
@loige
CUSTOM CONFIG
17

// .eleventy.js
return {
dir: {
}
}
}
1
2
3
4
5
6
7
8
9
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
return {
dir: {
}
}
// .eleventy.js
1
2
3
4
5
6
7
8
9
}
10
@loige
CUSTOM CONFIG
17

// .eleventy.js
return {
dir: {
}
}
}
1
2
3
4
5
6
7
8
9
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
return {
dir: {
}
}
// .eleventy.js
1
2
3
4
5
6
7
8
9
}
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
@loige
CUSTOM CONFIG
17

// .eleventy.js
return {
dir: {
}
}
}
1
2
3
4
5
6
7
8
9
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
return {
dir: {
}
}
// .eleventy.js
1
2
3
4
5
6
7
8
9
}
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
@loige
CUSTOM CONFIG
17

// .eleventy.js
return {
dir: {
}
}
}
1
2
3
4
5
6
7
8
9
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
return {
dir: {
}
}
// .eleventy.js
1
2
3
4
5
6
7
8
9
}
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
// .eleventy.js
1
2
3
return {
4
dir: {
5
6
7
}
8
}
9
}
10
// .eleventy.js
return {
dir: {
}
}
}
1
2
3
4
5
6
7
8
9
10
@loige
CUSTOM CONFIG
17

@loige
TEMPLATES
markdown (.md), Nunjucks (.njk) and
are called templates
These ﬁles can be used as a skeleton to generate
pages
Eleventy will automatically search for them in our
source folder and, by default, it will generate a
page for each and every one of them
many other
ﬁle types
18

@loige
FRONTMATTER
frontmatter is an optional section at the top of a
template that can be used to deﬁne additional
contextual metadata.
---
name: someone
age: 17
---
Rest of the file
19

@loige
FRONTMATTER
Data in the frontmatter can be referenced in the
templates
---
name: someone
age: 17
---
{{ name }} is {{ age }} years old!
20

@loige
LAYOUTS
Layouts are used to wrap the generated pages in a
common HTML structure
Especially useful for Markdown ﬁles
Layouts can also have a frontmatter
21

---
title: My default title
---
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>{{ title }}</title>
</head>
<body>
<main>
{{ content | safe }}
</main>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@loige
src/_includes/base.njk
22

---
---
<!DOCTYPE html>
<head>
</head>
<body>
<main>
</main>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
---
1
2
3
<!DOCTYPE html>
4
<head>
5
6
7
8
</head>
9
<body>
10
<main>
11
12
</main>
13
</body>
14
</html>
15
@loige
22

---
---
<!DOCTYPE html>
<head>
</head>
<body>
<main>
</main>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
---
1
2
3
<!DOCTYPE html>
4
<head>
5
6
7
8
</head>
9
<body>
10
<main>
11
12
</main>
13
</body>
14
</html>
15
---
1
2
---
3
<!DOCTYPE html>
4
<head>
5
6
7
8
</head>
9
<body>
10
<main>
11
12
</main>
13
</body>
14
</html>
15
@loige
22

---
---
<!DOCTYPE html>
<head>
</head>
<body>
<main>
</main>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
---
1
2
3
<!DOCTYPE html>
4
<head>
5
6
7
8
</head>
9
<body>
10
<main>
11
12
</main>
13
</body>
14
</html>
15
---
1
2
---
3
<!DOCTYPE html>
4
<head>
5
6
7
8
</head>
9
<body>
10
<main>
11
12
</main>
13
</body>
14
</html>
15
---
1
2
---
3
<!DOCTYPE html>
4
<head>
5
6
7
8
</head>
9
<body>
10
<main>
11
12
</main>
13
</body>
14
</html>
15
@loige
22

---
---
<!DOCTYPE html>
<head>
</head>
<body>
<main>
</main>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
---
1
2
3
<!DOCTYPE html>
4
<head>
5
6
7
8
</head>
9
<body>
10
<main>
11
12
</main>
13
</body>
14
</html>
15
---
1
2
---
3
<!DOCTYPE html>
4
<head>
5
6
7
8
</head>
9
<body>
10
<main>
11
12
</main>
13
</body>
14
</html>
15
---
1
2
---
3
<!DOCTYPE html>
4
<head>
5
6
7
8
</head>
9
<body>
10
<main>
11
12
</main>
13
</body>
14
</html>
15
---
---
<!DOCTYPE html>
<head>
</head>
<body>
<main>
</main>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@loige
22

layout: base
---
1
2
---
3
4
# Hello from Eleventy
5
6
This is a simple Eleventy demo
7
@loige
To use a layout you can use the special frontmatter property "layout" in a
template:
23

@loige
Eleventy uses to give you live-reload 🚀
BrowserSync
24

@loige
COPYING STATIC ASSETS
src/_includes/style.css
html, body {
background-color: #eee;
margin: 0;
}
main {
box-sizing: border-box;
max-width: 1024px;
min-height: 100vh;
padding: 2em;
margin: 0 auto;
background: white;
}
25

@loige
// .eleventy.js
config.addPassthroughCopy({
'./src/_includes/style.css': 'style.css'
})
// ...
}
1
2
3
4
5
6
7
8
9
26

@loige
// .eleventy.js
})
// ...
}
1
2
3
4
5
6
7
8
9
// .eleventy.js
1
2
3
4
5
})
6
7
// ...
8
}
9
26

@loige
// .eleventy.js
})
// ...
}
1
2
3
4
5
6
7
8
9
// .eleventy.js
1
2
3
4
5
})
6
7
// ...
8
}
9
// .eleventy.js
1
2
3
4
5
})
6
7
// ...
8
}
9
26

@loige
// .eleventy.js
})
// ...
}
1
2
3
4
5
6
7
8
9
// .eleventy.js
1
2
3
4
5
})
6
7
// ...
8
}
9
// .eleventy.js
1
2
3
4
5
})
6
7
// ...
8
}
9
// .eleventy.js
})
// ...
}
1
2
3
4
5
6
7
8
9
26

@loige
GLOBAL DATA FILES
// src/_data/site.js
module.exports = {
author: 'Luciano Mammino',
copyrightYear: (new Date()).getFullYear()
}
Deﬁne globally available data
JavaScript code that gets executed before templates are
rendered
Can be static or dynamic (e.g. fetch data from an API or a DB)
28

@loige
GLOBAL DATA FILES
A website by {{ site.author }}
- © {{ site.copyrightYear }}
<main>
1
2
<hr/>
3
<small>
4
5
6
</small>
7
</main>
8
The ﬁlename deﬁnes how you access the data in templates
29

@loige
COLLECTION API
tags: ["posts", "javascript"]
---
1
2
---
3
4
## An introduction to the spread syntax
5
6
**Spread syntax** (`...`) allows an iterable such as an array
7
expression or string to be expanded in places where zero or
8
more arguments (for function calls) or elements
9
(for array literals) are expected, or an object expression
10
to be expanded in places where zero or more
11
key-value pairs (for object literals) are expected.
12
You can tag a template to be part of one or more collections
Use the special frontmatter entry "tags"
30

@loige
COLLECTION API
---
title: "All posts"
layout: base
---
<h1>All posts</h1>
<ul>
{% for post in collections.posts %}
<li>
<a href="{{ post.url }}">
{{ post.data.title }}
</a>
</li>
{% endfor %}
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Eleventy allows you to access all the metadata of templates for a
given tag using the special collections.tagName global data
31

@loige
COLLECTION API
---
title: "All posts"
layout: base
---
<h1>All posts</h1>
<ul>
<li>
</a>
</li>
{% endfor %}
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
1
title: "All posts"
2
layout: base
3
---
4
5
<h1>All posts</h1>
6
7
<ul>
8
9
<li>
10
11
12
</a>
13
</li>
14
{% endfor %}
15
</ul>
16
31

@loige
COLLECTION API
---
title: "All posts"
layout: base
---
<h1>All posts</h1>
<ul>
<li>
</a>
</li>
{% endfor %}
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
1
title: "All posts"
2
layout: base
3
---
4
5
<h1>All posts</h1>
6
7
<ul>
8
9
<li>
10
11
12
</a>
13
</li>
14
{% endfor %}
15
</ul>
16
</a>
---
1
title: "All posts"
2
layout: base
3
---
4
5
<h1>All posts</h1>
6
7
<ul>
8
9
<li>
10
11
12
13
</li>
14
{% endfor %}
15
</ul>
16
31

@loige
COLLECTION API
---
title: "All posts"
layout: base
---
<h1>All posts</h1>
<ul>
<li>
</a>
</li>
{% endfor %}
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
1
title: "All posts"
2
layout: base
3
---
4
5
<h1>All posts</h1>
6
7
<ul>
8
9
<li>
10
11
12
</a>
13
</li>
14
{% endfor %}
15
</ul>
16
</a>
---
1
title: "All posts"
2
layout: base
3
---
4
5
<h1>All posts</h1>
6
7
<ul>
8
9
<li>
10
11
12
13
</li>
14
{% endfor %}
15
</ul>
16
---
title: "All posts"
layout: base
---
<h1>All posts</h1>
<ul>
<li>
</a>
</li>
{% endfor %}
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
31

@loige
USING DYNAMIC DATA
npm i --save-dev @11ty/eleventy-cache-assets
What if we want to build a website using data from an API?
For instance this one: https://ghibliapi.herokuapp.com/ﬁlms/
We don't want to fetch the data after every single change!
33

@loige
USING DYNAMIC DATA
// src/_data/movies.js
const Cache = require('@11ty/eleventy-cache-assets')
module.exports = async function () {
return Cache(
'https://ghibliapi.herokuapp.com/films/',
{ type: 'json' }
)
}
1
2
3
4
5
6
7
8
9
10
34

@loige
USING DYNAMIC DATA
return Cache(
{ type: 'json' }
)
}
1
2
3
4
5
6
7
8
9
10
return Cache(
{ type: 'json' }
)
1
2
3
4
5
6
7
8
9
}
10
34

@loige
USING DYNAMIC DATA
return Cache(
{ type: 'json' }
)
}
1
2
3
4
5
6
7
8
9
10
return Cache(
{ type: 'json' }
)
1
2
3
4
5
6
7
8
9
}
10
return Cache(
{ type: 'json' }
)
}
1
2
3
4
5
6
7
8
9
10
34

@loige
USING DYNAMIC DATA
---
layout: base
title: Studio Ghibli movies
---
<h1>Studio Ghibli movies</h1>
<ul>
{% for movie in movies %}
<li>
<a href="/movie/{{ movie.title | slug }">
{{ movie.title }}
</a>
</li>
{% endfor %}
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 35

@loige
USING DYNAMIC DATA
---
layout: base
---
<ul>
<li>
{{ movie.title }}
</a>
</li>
{% endfor %}
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% endfor %}
---
1
layout: base
2
3
---
4
5
6
7
<ul>
8
9
<li>
10
11
{{ movie.title }}
12
</a>
13
</li>
14
15
</ul>
16 35

@loige
USING DYNAMIC DATA
---
layout: base
---
<ul>
<li>
{{ movie.title }}
</a>
</li>
{% endfor %}
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% endfor %}
---
1
layout: base
2
3
---
4
5
6
7
<ul>
8
9
<li>
10
11
{{ movie.title }}
12
</a>
13
</li>
14
15
</ul>
16
{{ movie.title }}
</a>
---
1
layout: base
2
3
---
4
5
6
7
<ul>
8
9
<li>
10
11
12
13
</li>
14
{% endfor %}
15
</ul>
16 35

@loige
USING DYNAMIC DATA
---
layout: base
---
<ul>
<li>
{{ movie.title }}
</a>
</li>
{% endfor %}
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% endfor %}
---
1
layout: base
2
3
---
4
5
6
7
<ul>
8
9
<li>
10
11
{{ movie.title }}
12
</a>
13
</li>
14
15
</ul>
16
{{ movie.title }}
</a>
---
1
layout: base
2
3
---
4
5
6
7
<ul>
8
9
<li>
10
11
12
13
</li>
14
{% endfor %}
15
</ul>
16
---
layout: base
---
<ul>
<li>
{{ movie.title }}
</a>
</li>
{% endfor %}
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 35

@loige
PAGINATION API
Allows to split collections into multiple pages
But it can also be used to generate pages for dynamic content
For instance, a page for every single movie
37

@loige
PAGINATION API
---
layout: base
permalink: /movie/{{ movie.title | slug }}/
pagination:
data: movies
size: 1
alias: movie
---
<h2>{{ movie.title }}</h2>
<ul>
<li>Released in <strong>{{ movie.release_date }}</strong></li>
<li>Directed by <strong>{{ movie.director }}</strong></li>
<li>Produced by <strong>{{ movie.producer }}</strong></li>
</ul>
<p>{{ movie.description }}</p>
<p><a href="/movies">See all movies</a></p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 38

@loige
PAGINATION API
---
layout: base
pagination:
data: movies
size: 1
alias: movie
---
<ul>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19 38

@loige
PAGINATION API
---
layout: base
pagination:
data: movies
size: 1
alias: movie
---
<ul>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
pagination:
data: movies
size: 1
alias: movie
---
1
layout: base
2
3
4
5
6
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19 38

@loige
PAGINATION API
---
layout: base
pagination:
data: movies
size: 1
alias: movie
---
<ul>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
pagination:
data: movies
size: 1
alias: movie
---
1
layout: base
2
3
4
5
6
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
data: movies
---
1
layout: base
2
3
pagination:
4
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19 38

@loige
PAGINATION API
---
layout: base
pagination:
data: movies
size: 1
alias: movie
---
<ul>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
pagination:
data: movies
size: 1
alias: movie
---
1
layout: base
2
3
4
5
6
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
data: movies
---
1
layout: base
2
3
pagination:
4
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
size: 1
---
1
layout: base
2
3
pagination:
4
data: movies
5
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19 38

@loige
PAGINATION API
---
layout: base
pagination:
data: movies
size: 1
alias: movie
---
<ul>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
pagination:
data: movies
size: 1
alias: movie
---
1
layout: base
2
3
4
5
6
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
data: movies
---
1
layout: base
2
3
pagination:
4
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
size: 1
---
1
layout: base
2
3
pagination:
4
data: movies
5
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
alias: movie
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19 38

@loige
PAGINATION API
---
layout: base
pagination:
data: movies
size: 1
alias: movie
---
<ul>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
pagination:
data: movies
size: 1
alias: movie
---
1
layout: base
2
3
4
5
6
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
data: movies
---
1
layout: base
2
3
pagination:
4
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
size: 1
---
1
layout: base
2
3
pagination:
4
data: movies
5
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
alias: movie
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19 38

@loige
PAGINATION API
---
layout: base
pagination:
data: movies
size: 1
alias: movie
---
<ul>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
pagination:
data: movies
size: 1
alias: movie
---
1
layout: base
2
3
4
5
6
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
data: movies
---
1
layout: base
2
3
pagination:
4
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
size: 1
---
1
layout: base
2
3
pagination:
4
data: movies
5
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
alias: movie
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
9
10
<ul>
11
12
13
14
</ul>
15
16
17
18
19
---
layout: base
pagination:
data: movies
size: 1
alias: movie
---
<ul>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 38

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

THANKS!
Icons by and on
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-jam
20% eBook discount on Packt
20NODEMAY
42

An intro to the JAMStack and Eleventy

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to An intro to the JAMStack and Eleventy

Similar to An intro to the JAMStack and Eleventy (20)

More from Luciano Mammino

More from Luciano Mammino (20)

Recently uploaded

Recently uploaded (20)

An intro to the JAMStack and Eleventy