How to build a Jamstack website using Eleventy

Eleventy logo from 11ty.dev

If you are already familiar with Jamstack then you can jump directly to building a site using 11ty.

Ok, so let's understand what is JamStack.

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale.

Source: jamstack.org

When implemented correctly, frameworks implementing Jamstack highly optimizes the websites by prebuilding the pages and assets during build-time. These highly optimized websites can be served from a CDN or even from free hosting services like GitHub Pages. This reduces the cost as well as the complexity of managing the dynamic servers.

Websites that correctly implements Jamstack are generally faster, more secure that dynamic sites and are easily scalable.

Jamstack architecture consists of client-side JavaScript, reusable APIs, and prebuilt Markup.

Jamstack architecture

JavaScript handles the dynamic functionalities on client-side. There is no restriction on which framework or library you must use
APIs allows your website to perform server-side operation using Javascript HTTP requests
Markup on the client-side is in HTML language but it can also be generated by a static site generator using Markdown, JSON, Nunjucks, or any other language

Getting Started with 11ty

Eleventy is a simple and scalable static site generator. Before we proceed, first make sure you have Node 8 or newer installed. Eleventy v0.11.1 requires Node 8 or newer.

Check Node version

node --version

Now let's setup the 11ty project.

Create a new folder for your project

mkdir my-blog
cd my-blog

Initialize Node project by creating a package.json file

npm init -y

Install 11ty

npm install --save-dev @11ty/eleventy

Setup master layout

Layouts allows us to create reusable templates that can be consumed by one or more pages We will create the master layout that will store the root layout of out HTML, like the <head> tag.

mkdir _includes
mkdir _includes/layouts
touch _includes/layouts/master-layout.njk

Note that we use kebab-case for naming files in 11ty

Update the content of master layout

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
    <body>
        <div>
          { { content | safe } } 
          <!-- Note: Remove space between braces (curly brackets) -->
          </div>
    </body>
</html>

Create home page

touch index.njk

Update the content of home page and use master layout

---
title: My First 11ty website
layout: layouts/master-layout.njk
---

<h1>My First 11ty website!!!</h1>

Run the Eleventy project to make sure things are working

npx @11ty/eleventy --serve

Use --serve to start up a hot-reloading local web server.

Go to http://localhost:8080/ in your browser to see your live website!

Add first blog page

mkdir blog
touch first-post.md

Add some markdown and link the master layout

---
title: First Blog Post
description: This is my fist post!
layout: layouts/master-layout.njk
date: 2021-01-01
tags:
  - post
  - tag1
  - tag2
---

## Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla ante, molestie eget congue ut, varius id mi. Quisque non rhoncus nibh, sit amet semper ante. Mauris at sapien quis tortor accumsan laoreet vitae ut magna. Vivamus scelerisque et magna id vehicula. Etiam elementum nisl vestibulum turpis congue, hendrerit volutpat justo placerat. Ut a sodales erat. Suspendisse non quam varius, elementum velit ac, sollicitudin nunc.

Cras euismod maximus ex, ut malesuada erat malesuada sit amet. Etiam at dictum odio. Praesent id rhoncus justo, sit amet lacinia eros. Vestibulum accumsan velit id velit auctor viverra. Aenean nec nunc neque. Vivamus posuere sollicitudin ante nec pharetra. Curabitur orci erat, consequat eu leo sed, luctus pulvinar risus. In blandit diam ut mauris bibendum, nec ultrices tortor dictum. Fusce commodo purus ac velit tincidunt pulvinar. Sed vestibulum eleifend lorem, at condimentum odio sollicitudin a. Curabitur elit velit, sagittis ac ante non, dapibus tristique quam. Aenean a nibh urna. Praesent id molestie ipsum. Nullam in leo quam.

If your 11ty live server is still running then your first blog page should be available at http://localhost:8080/blog/first-post/!

You can now customize the site content and add more posts to it.

Feel free to reach out to me on Twitter or Instagram if you need more help with Eleventy.

If this post was helpful then share it with others.