Let's Learn 11ty Part 6: Plugins
Tags: eleventy, ssg, webdev, tutorial
Published: 2022-06-14 16:13:06

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:

```js
const Image = require("@11ty/eleventy-img");
```

The rest of the plugins can be viewed on this page [here](https://www.11ty.dev/docs/plugins/)

---
## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akagh2ghzwr54isagsi7.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m53pnnqx99l0sw2v9hxw.png)


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

At the top of the file, do this: 

```js
const { DateTime } = require("luxon");
```
Then

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcosanf1d6dorsr62gly.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tn6ewos63a3cel2xfmfe.png)

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:

![post date filter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/et3my4gnbp1nxy29yn3q.png)


The change `blog.njk` to look like this:

![blog home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rnbq5w8sg1gisprecav.png)

---

>![Blog home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uq94m991bofhtd2tc7e7.png)
> 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: https://github.com/Psypher1/learneleventy
- 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**](https://twitter.com/Psypher1), [**Polywork**](https://www.polywork.com/psypher1) and [**LinkedIn**](https://www.linkedin.com/in/jamesmidzi/)