Let's Learn 11ty Part 6: Adding Plugins

Let's Learn 11ty Part 6: Adding Plugins

Extending the functionality of our site

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:

robots file

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:

robots pass through

Sitemap

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

At the top of the file, do this:

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

Then

Image description

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

sitemap

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 DateTimeonce more, but a bit differently:

post date filter

The change blog.njk to look like this:

blog home


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