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
- We then output the URL of our site along with the particular page url -
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:
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
Top comments (0)