{jamstack}
Developing modular source code with eleventy
# ELEVENTY
SSG - Static Site Generator
11ty (eleventy): a tool we can use to make our code nice and tidy and avoid merge conflicts.
11ty takes our modular code and outputs a "normal" website.
Process
Install tooling
We use a package manager to install all the bits of 11ty that will process our code.
1.
2.
Build
Write tidy and modular code using templating language (on its own it would not run in a browser).
3.
Serve
Run the templates through 11ty and serve our site in the browser for testing.
# ELEVENTY
# ELEVENTY
What's a package manager?
npm
node package manager
Installs all the tools that 11ty needs and keeps them up to date.
<!-- HTML has to repeat the same code on each page
It's not DRY -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
</head>
<body>
<p>The only thing different is the content...</p>
</body>
</html># ELEVENTY
Templating
<!-- With a few changes we can turn this into a layout
It's reusable over and over -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
{{ content }}
</body>
</html># ELEVENTY
Templating
// Templating allows us to reuse all the common stuff
// replacing it with front matter
---
title: My Webpage // This is a variable
layout: default // This brings in the layout code
---
<h1>My content page</h1>
<p>The file for this page can just contain the content.
Many pages can use the same layout by calling it above.
Eleventy sticks it all together again as a website.</p>Templating
# ELEVENTY
# ELEVENTY
What about...?
So we can reuse the main repeated parts of an HTML page, but what about our navigation, banner image and footer?
<!-- We could add other reused code in here too...
... or go even more modular... -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
<nav><a href="/">Home</a><a href="/about">About</a></nav>
{{ content }}
<footer>This is the footer for every page</footer>
</body>
</html># ELEVENTY
Templating
<!-- We can break bits of code out into other files
and bring them in using includes -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
{% include 'navigation' %}
{{ content }}
{% include 'footer' %}
</body>
</html># ELEVENTY
Templating
Serve to view in the browser (locally)
# ELEVENTY
layout
nav
footer
content
npx @11ty/eleventy --serve
index.html
Visit localhost:8080 in browser to view
What next? More content!
# ELEVENTY
layout
nav
footer
index content
npx @11ty/eleventy --serve
index.html
Visit localhost:8080 in browser to view
about content
detail content
faq content
index.html
detail.html
faq.html
about.html
Ok! But how...?
Google it
Pro tips! (actually noob tips...)
# ELEVENTY
- Eleventy is not opinionated
- Every tutorial will be very different
- I like this one https://rphunt.github.io/eleventy-walkthrough/
- Start with defaults at first
- Use an initial / in paths (root-relative paths)
- Pass through your CSS, JS and images (look it up)
- Use official docs (even though they're tricky)
- Avoid copying code if you don't know what it does
- JS mostly just works as normal (script tags)
- Remember your .gitignore!
- Write quality code at all times
- Refactor as you go: you'll never be back
- Talk to each other!
Eleventy
By Elise Allen
