Let's Learn 11ty Part 6: Plugins

In our last article we deployed our site. At this point, it is working quite well for a site. There is however more we can do to improve how it functions - starting with Plugins

Plugins

Plugins are pieces of external code that can be imported into Eleventy to implement additional functionality.

Owing to Eleventy’s nature, there both official (under the @11ty prefix) and community contributed plugins.

Below are some official plugins:

• Edge: Allows you to run Eleventy in a Edge Function for dynamic addition of content to your Eleventy site.
• Image: To allow resizing and generation of images
• Syntax Highlighting: To permit code syntax highlighting without client-side JavaScript.
• Navigation: To create hierarchical navigation in your site.

To use a plugin, say for example the Image one:

npm install @11ty/eleventy-img

Then include it in your eleventy.config.js at the top:

import Image from "@11ty/eleventy-img";

The rest of the plugins can be viewed on this page here

---

Using A Plugin to Improve Our Site

Improve SEO

The SEO for our site is not that good currently. We can do a few steps to improve it.

Let’s use one of the built in plugins to help us create a robots.txt and `sitemap.xml

Robots

In our src , we’ll make a robots.txt file with this in it:

# *
User-agent: *
Allow: /

# Host
Host: https://learneleventy.netlify.app/

# Sitemaps
Sitemap: https://learneleventy.netlify.app/sitemap.xml

Just creating this file won’t do anything. Do you recall why?

NOTE: .txt is not part of the supported template languages, we have to add a PassThroughCopy for our file

In eleventy.config.js, add this:

eleventyConfig.addPassthroughCopy({ "src/robots.txt": "/robots.txt" });

Sitemap

While we’re still in this file, let’s add some code for out sitemap. For this, we will need luxon. It used to be bundled with Eleventy, but it is slated for removal.

pnpm install luxon

At the top of eleventy.config.js, do this:

import { DateTime } from "luxon";

Then within our function:

eleventyConfig.addShortcode("currentDate", (date = DateTime.now()) => {
  return date;
});

In the code above, we import DateTime from luxon - which is built in to Eleventy

We then create a shortcode for the current date and use DateTime to get the current date which we’ll use in our sitemap

Now we can make our sitemap file. In src create a sitemap.njk file

---
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
---

<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9%22%3E">
  {% for page in collections.all %}
  <url>
    <loc>https://learneleventy.netlify.app{{ page.url }}</loc>
    <lastmod>{% currentDate date %}</lastmod>
  </url>
</urlset>

Above:

• We used the permalink key to specify how we want this file to be rendered
• In addition, we exclude it from our collections
• We run a loop on all of our collections
  • We then output the URL of our site along with the particular page url - page.url
  • We use our currentDate shortcode to output the date when each page looped through was modified

NOTE: Make sure you replace the site url with your own deployed URL

Display Date on Posts

We will make use of DateTime once more, but a bit differently:

eleventyConfig.addFilter("postDate", (dateObj) => {
  return DateTime.fromJSDate(dateObj).toLocaleString(DateTime.DATE_MED);
});

The change blog.njk to look like this:

---
layout: base
title: Blog
tags: page
order: 3
---

<section class="">
  <h1 class="">Blog Home</h1>

  <ul class="blog-list">
    {% for post in collections.post %}
    <li class="blog-list-item ">
      <a href="{{ post.url }}" class=" blog-link">{{ post.data.title }}</a>
      <small class="blog-date">{{ post.date | postDate }}</small>
    </li>
    {% endfor %}
  </ul>
</section>

---

I have added more classes to make the blog home look better

---

Conclusion

Today we have learnt about Plugins in Eleventy. How they can help us accomplish several things on our Eleventy site.

We have used a plugin to:

• add a sitemap
• display the date of our posts

Not bad huh? Up until this point we hadn’t imported anything. And even now, what we have added is not that much

As always:

• The live site: https://learneleventy.netlify.app
• The working repo: Part 6: Plugins
• The docs: https://www.11ty.dev/docs/
• The discord: https://www.11ty.dev/blog/discord/**

---

Thank you for reading, let’s connect!

Thank you for visiting this little corner of mine. My email and DMs are always open; if you want to chat or collaborate on something, shoot me a email

Where you can get hold of me:

• Twitter
• Discord
• LinkedIn