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.js at the top:

const Image = require("@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:

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.js, add this:

Sitemap

While we’re still in this file, let’s add some code for out sitemap.

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

const { DateTime } = require("luxon");

Then within our function:

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

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:

The change blog.njk to look like this:

---

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. Let’s connect on Twitter, Polywork and LinkedIn