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!
3. STATIC SITE GENERATORS... WAIT, WHAT?!
content &
templates
static HTML
pages & assets
This is the core of a static site generator!
@loige
3
4. 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
7. LET ME INTRODUCE MYSELF...
I'm Luciano ( 🍕🍝) 👋
Senior Architect
@loige
5
8. LET ME INTRODUCE MYSELF...
I'm Luciano ( 🍕🍝) 👋
Senior Architect
nodejsdp.link
Co-Author of Node.js Design Patterns 👉
@loige
5
9. LET ME INTRODUCE MYSELF...
I'm Luciano ( 🍕🍝) 👋
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
10. WE ARE BUSINESS FOCUSED TECHNOLOGISTS THAT DELIVER.
| |
Accelerated Serverless AI as a Service Platform Modernisation
Do you want to ?
work with us
loige 6
15. 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
16. WHICH TOOL SHOULD I USE?
jamstack.org/generators/
+350 tools listed!
@loige
12
17. 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
18. 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
Pagination API
@loige
14
33. @loige
TEMPLATES
markdown (.md), Nunjucks (.njk) and
are called templates
These files 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
file types
18
34. @loige
FRONTMATTER
frontmatter is an optional section at the top of a
template that can be used to define additional
contextual metadata.
---
name: someone
age: 17
---
Rest of the file
19
35. @loige
FRONTMATTER
Data in the frontmatter can be referenced in the
templates
---
name: someone
age: 17
---
{{ name }} is {{ age }} years old!
20
36. @loige
LAYOUTS
Layouts are used to wrap the generated pages in a
common HTML structure
Especially useful for Markdown files
Layouts can also have a frontmatter
21
42. 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
50. @loige
GLOBAL DATA FILES
// src/_data/site.js
module.exports = {
author: 'Luciano Mammino',
copyrightYear: (new Date()).getFullYear()
}
Define 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
52. @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
53. @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
54. @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
{% for post in collections.posts %}
---
1
title: "All posts"
2
layout: base
3
---
4
5
<h1>All posts</h1>
6
7
<ul>
8
9
<li>
10
<a href="{{ post.url }}">
11
{{ post.data.title }}
12
</a>
13
</li>
14
{% endfor %}
15
</ul>
16
Eleventy allows you to access all the metadata of templates for a
given tag using the special collections.tagName global data
31
55. @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
{% for post in collections.posts %}
---
1
title: "All posts"
2
layout: base
3
---
4
5
<h1>All posts</h1>
6
7
<ul>
8
9
<li>
10
<a href="{{ post.url }}">
11
{{ post.data.title }}
12
</a>
13
</li>
14
{% endfor %}
15
</ul>
16
<a href="{{ post.url }}">
{{ post.data.title }}
</a>
---
1
title: "All posts"
2
layout: base
3
---
4
5
<h1>All posts</h1>
6
7
<ul>
8
{% for post in collections.posts %}
9
<li>
10
11
12
13
</li>
14
{% endfor %}
15
</ul>
16
Eleventy allows you to access all the metadata of templates for a
given tag using the special collections.tagName global data
31
56. @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
{% for post in collections.posts %}
---
1
title: "All posts"
2
layout: base
3
---
4
5
<h1>All posts</h1>
6
7
<ul>
8
9
<li>
10
<a href="{{ post.url }}">
11
{{ post.data.title }}
12
</a>
13
</li>
14
{% endfor %}
15
</ul>
16
<a href="{{ post.url }}">
{{ post.data.title }}
</a>
---
1
title: "All posts"
2
layout: base
3
---
4
5
<h1>All posts</h1>
6
7
<ul>
8
{% for post in collections.posts %}
9
<li>
10
11
12
13
</li>
14
{% endfor %}
15
</ul>
16
---
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
58. @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/films/
We don't want to fetch the data after every single change!
33
67. @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
68. @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
69. @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
permalink: /movie/{{ movie.title | slug }}/
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19 38
70. @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
permalink: /movie/{{ movie.title | slug }}/
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
pagination:
data: movies
size: 1
alias: movie
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
4
5
6
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19 38
71. @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
permalink: /movie/{{ movie.title | slug }}/
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
pagination:
data: movies
size: 1
alias: movie
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
4
5
6
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
data: movies
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
pagination:
4
5
size: 1
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19 38
72. @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
permalink: /movie/{{ movie.title | slug }}/
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
pagination:
data: movies
size: 1
alias: movie
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
4
5
6
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
data: movies
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
pagination:
4
5
size: 1
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
size: 1
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
pagination:
4
data: movies
5
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19 38
73. @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
permalink: /movie/{{ movie.title | slug }}/
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
pagination:
data: movies
size: 1
alias: movie
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
4
5
6
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
data: movies
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
pagination:
4
5
size: 1
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
size: 1
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
pagination:
4
data: movies
5
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
alias: movie
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
pagination:
4
data: movies
5
size: 1
6
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19 38
74. @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
permalink: /movie/{{ movie.title | slug }}/
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
pagination:
data: movies
size: 1
alias: movie
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
4
5
6
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
data: movies
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
pagination:
4
5
size: 1
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
size: 1
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
pagination:
4
data: movies
5
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
alias: movie
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
pagination:
4
data: movies
5
size: 1
6
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
<h2>{{ movie.title }}</h2>
<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>
<p>{{ movie.description }}</p>
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
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
<p><a href="/movies">See all movies</a></p>
19 38
75. @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
permalink: /movie/{{ movie.title | slug }}/
---
1
layout: base
2
3
pagination:
4
data: movies
5
size: 1
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
pagination:
data: movies
size: 1
alias: movie
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
4
5
6
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
data: movies
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
pagination:
4
5
size: 1
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
size: 1
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
pagination:
4
data: movies
5
6
alias: movie
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
alias: movie
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
3
pagination:
4
data: movies
5
size: 1
6
7
---
8
<h2>{{ movie.title }}</h2>
9
10
<ul>
11
<li>Released in <strong>{{ movie.release_date }}</strong></li>
12
<li>Directed by <strong>{{ movie.director }}</strong></li>
13
<li>Produced by <strong>{{ movie.producer }}</strong></li>
14
</ul>
15
16
<p>{{ movie.description }}</p>
17
18
<p><a href="/movies">See all movies</a></p>
19
<h2>{{ movie.title }}</h2>
<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>
<p>{{ movie.description }}</p>
---
1
layout: base
2
permalink: /movie/{{ movie.title | slug }}/
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
<p><a href="/movies">See all movies</a></p>
19
---
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
79. 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