{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!