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