Adding blog functionality to a static Eleventy (11ty) website
Tags: tutorial, eleventy, webdev
Published: 2020-08-05 03:09:52

In a previous article I covered [setting up a simple site with Eleventy](https://w3collective.com/add-blog-functionality-eleventy/).

This article will show you how to add blog functionality (display a list of posts in reverse chronological order).

Let’s get started by creating a project folder and installing Eleventy if you haven’t already done so:

```
mkdir eleventy-blog
cd eleventy-blog
npm init -y
npm install --save-dev @11ty/eleventy
```

Next we’ll setup the default layout by creating an `_includes` folder with a `default-layout.njk` file:

```html
---
title: Eleventy Blog
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
  </head>
  <body>
    {{ content | safe }}   
  </body>
</html>
```

Each of the blog posts will be saved as a individual markdown file in a folder called `blog`.

Here is an example of a blog post markdown file for reference saved as `/blog/hello-world.md`:

```html
---
layout: default-layout.njk 
tags: ['blog']
title: Hello World
date: 2020-01-01
teaser: This is the first blog post titled "Hello World"!
---

# Hello World

This is the first blog post!
```

- `layout:` – Specifies the layout file to be used.
- `tags:` – Creates a content collection with all other files that also contain a `blog` tag.
- `title:` – Displayed in the list of blog posts we’ll create next and in the `<title>` tag.
- `date:` – Will be used to sort the blogs posts from newest to oldest.
- `teaser:` – Optional short teaser text that will be displayed underneath the title in the blog feed.

Blog posts can also be created in HTML markup instead of markdown if you prefer `/blog/hello-world.html`:

```html
---
layout: default-layout.njk 
tags: ['blog']
title: Hello World
date: 2020-01-01
teaser: This is the first blog post titled "Hello World"!
---

<h1>Hello World</h1>

<p>This is the first blog post!</p>.
```

Now we can create a `index.njk` file that will load our collection of blog posts:

```html
---
layout: default-layout.njk
pagination:
  data: collections.blog
  size: 10
  alias: blog
---

<ul>
  {%- for post in collections.blog | reverse -%}
    <li>
      <h3><a href="{{ post.url | url }}">{{ post.data.title }}</a> | {{ post.date }}</h3>
      {% if post.data.teaser %}
        <p>{{ post.data.teaser }}</p>
      {% endif %} 
    </li>
  {%- endfor -%}
</ul>
```

- `data:` – Get’s all posts in the blog collection (`tags: ['blog']`).
- `size:` – Limits the number of blog posts displayed to 10.
- `alias:` – Used to construct the URL for individual blog posts e.g: `/blog/hello-world/`.

Let's run Eleventy and check that everything is working as expected:

```
npx @11ty/eleventy --serve
```

In the browser you should see a list of the blog posts you created:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lktnoojyjgdvvi0gatrv.png)

You’ll notice the date isn’t formatted in a way that is particularly easy to read.

To format the date in a more readable format we’ll install the [eleventy-plugin-date](https://github.com/NotWoods/11ty-plugins/tree/main/packages/date) plugin:

```
npm install --save-dev eleventy-plugin-date
```

We then need to load the plugin in the config file `.eleventy.js` (create in the project root if you haven’t already):

```javascript
const pluginDate = require("eleventy-plugin-date");
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(pluginDate);
};
```

Then change the date output in `index.njk` as follows and it will be displayed in a more readable format:

```
{{ post.date | readableDate }}
```

That concludes the setup of basic blog functionality with Eleventy – I hope you found it useful.