DEV Community

Cover image for Let's Learn 11ty Part 6: Plugins
James 'Dante' Midzi
James 'Dante' Midzi

Posted on Edited on

Let's Learn 11ty Part 6: Plugins

#ssg #eleventy #tutorial #webdev

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
Enter fullscreen mode Exit fullscreen mode

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

import Image from "@11ty/eleventy-img";
Enter fullscreen mode Exit fullscreen mode

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:

`txt

*

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:

js
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.

sh
pnpm install luxon

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

import { DateTime } from "luxon";

Then within our function:

js
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

`html

permalink: /sitemap.xml

eleventyExcludeFromCollections: true

<?xml version="1.0" encoding="utf-8"?>

{% for page in collections.all %}

https://learneleventy.netlify.app{{ page.url }}
{% currentDate date %}


`

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:

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

The change blog.njk to look like this:

`html

layout: base
title: Blog
tags: page

order: 3

Blog Home

`

post dates
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:

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:

Top comments (0)