Lesson 17 - Meta info, RSS feeds and module recap

Course
Learn Eleventy From Scratch
Module
Let’s build a website

Let’s wrap up our HTML-only build of the website and recap on where we’ve got to.


With that work item in the last lesson, we’ve nearly finished our HTML-only build of this website. In fact, right now, you have a fully functional website that you could comfortably push live. Nice work!

To wrap up this first module of the course, we’re going to dot the i’s and cross the t’s by adding some meta info and an RSS feed.

Adding meta info permalink

What we mean by meta info is stuff that lives in the HTML <head> element. This <head> element usually contains a combination of <meta> and <link> elements that provide information about the page. They also tell social networks like Facebook and Twitter how to preview the content of your page if it’s shared on one of those platforms.

We’re going to be smart about this and create a partial that does all of the heavy lifting for us.

Create a new file in your partials folder called meta-info.html and add the following to it.

Code language
HTML
{% set pageTitle = title + ' - ' + site.name %}

{# We don't want any duplication. This is likely for the home page. #}
{% if site.name === title %} 
  {% set pageTitle = title %}
{% endif %}

{% set siteTitle = site.name %}
{% set currentUrl = site.url + page.url %}

{# If the page’s Front Matter has specific metaTitle and/or metaDesc items, switch 
  them into the mix. #}
{% if metaTitle %}
  {% set pageTitle = metaTitle %}
{% endif %}

{% if not metaDesc %}
  {% set metaDesc = summary %}
{% endif %}


<title>{{ pageTitle }}</title>
<link rel="canonical" href="{{ currentUrl }}" />

<meta property="og:site_name" content="{{ siteTitle }}" />
<meta property="og:title" content="{{ pageTitle }}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ currentUrl }}" />

{% if socialImage %}
  <meta name="twitter:card" content="summary_large_image" />
  <meta property="og:image" content="{{ socialImage }}" />
  <meta name="twitter:image" content="{{ socialImage }}" />
  <meta property="og:image:alt" content="Page image for {{ site.name }}" />
  <meta name="twitter:image:alt" content="Page image for {{ site.name }}" />
{% endif %}

{% if metaDesc %}
  <meta name="description" content="{{ metaDesc }}" />
  <meta name="twitter:description" content="{{ metaDesc }}" />
  <meta property="og:description" content="{{ metaDesc }}" />
{% endif %}

What we’ve done here is conditionally render various <meta> elements based on the information we have. For example, we’ll only render a socialImage, which displays in social media cards, if that’s set in the Front Matter of the current page. The same goes for the metaDesc.

If a metaTitle is set, we override the default value for pageTitle, which is the current page’s title.

The <meta> elements that have an og: prefix to their name are for the Open Graph protocol, which is most commonly used by Facebook.

The twitter: prefixed items are for Twitter cards.

Let’s add this new partial to our base layout. Open up eleventy-from-scratch/src/_includes/layouts/base.html. Inside the <head>, delete this: <title>{{ title }}</title>, and add the following in its place:

Code language
HTML
{% include "partials/meta-info.html" %}

Let’s now set some meta info on our home page. Open up eleventy-from-scratch/src/index.md and add the following Front Matter just under the title:

Code language
text
metaDesc: 'A made up agency site that you build if you take Learn Eleventy From Scratch, by Piccalilli'

If you open up your browser at http://localhost:8080 and view source, in the <head> you should spot that the meta description looks like this:

Code language
HTML
<meta name="description" content="A made up agency site that you build if you take Learn Eleventy From Scratch, by Piccalilli" />

Adding an RSS feed permalink

An RSS feed is a way for users to subscribe to updates from your website. Specifically—in our case—the blog. This means that when we write a new post, their RSS reader will grab it and present it to them. RSS can also be used to post content to social networks, using tools like IFTTT.

Essentially, providing this structured data from our website gives us lots of opportunities, so it would be silly not to add one.

We’ve got a few things to add, so let’s work through them.

First of all, we’re going to add some more data to our global site.json file. Hopefully you’ll remember that we’re using this throughout the site because it helpfully serves as a central store of information that we can access in our templates with site.

Open up eleventy-from-scratch/src/_data/site.json and add the following data to it, before the closing }:

Code language
json
"authorName": "Issue 33",
"authorEmail": "hi@piccalil.li"

You'll need to add a comma after "url": "https://issue33.com" to stop your build from breaking.

Now that we have that info, we’re going to install a plugin that provides a lot of the tools we need to create our RSS.

Open up your terminal, stop Eleventy (ctrl and c), and run the following command:

Code language
bash
npm install @11ty/eleventy-plugin-rss

With that installed, open up eleventy-from-scratch/.eleventy.js and add the following right at the top of the file:

Code language
JavaScript
const rssPlugin = require('@11ty/eleventy-plugin-rss');

Now, with the plugin imported, add the following to an empty line around line 16:

Code language
JavaScript
// Plugins
config.addPlugin(rssPlugin);

Now that’s all setup, open up your terminal and run npm start.

We need to generate the actual feed now, so create a new file in your src folder called rss.html and add the following to it:

Code language
HTML
---
title: 'Issue 33 Blog'
summary: 'A feed of the latest posts from our blog.'
permalink: '/feed.xml'
---
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>{{ title }}</title>
	<subtitle>{{ summary }}</subtitle>
	<link href="{{ site.url }}{{ permalink }}" rel="self"/>
	<link href="{{ site.url }}/"/>
	<updated>{{ collections.blog | rssLastUpdatedDate }}</updated>
	<id>{{ site.url }}</id>
	<author>
    <name>{{ site.authorName }}</name>
    <email>{{ site.authorEmail }}</email>
	</author>
	{% for post in collections.blog %}
    {% set absolutePostUrl %}{{ site.url }}{{ post.url | url }}{% endset %}
    <entry>
      <title>{{ post.data.title }}</title>
      <link href="{{ absolutePostUrl }}"/>
      <updated>{{ post.date | rssDate }}</updated>
      <id>{{ absolutePostUrl }}</id>
      <content type="html"><![CDATA[
        {{ post.templateContent | safe }}
      ]]></content>
    </entry>
	{% endfor %}
</feed>

Let’s break down what’s happening here.

  1. We use XML for RSS feeds, so in our permalink we create feed.xml.
  2. After that, we set some information about our website, which we added in site.json earlier on.
  3. We then tell the feed reader (or whatever consumes this feed) when it was last updated. We do that with the rssLastUpdatedDate filter, provided by the RSS plugin by Eleventy. We pass the entire blog collection in there to do that.
  4. Then, we loop the blog collection and create an <entry> for each one. That entry contains links to the post. Because the post lives on the live site, we generate an absolutePostUrl, mixing the post’s URL with the site.url.

You probably noticed that weird <![CDATA[ ]]> setup. This tells the XML parser not to treat whatever’s in there as XML. This is because there will be HTML in there. You can read more about CDATA here, if you fancy being bored out of your mind!

With our RSS template complete, if you open http://localhost:8080/feed.xml, it should look like this:

An RSS feed in the browser

Adding the RSS meta tag permalink

The last thing to do is to add a link to our RSS feed in the <head> of every page. Open up eleventy-from-scratch/src/_includes/layouts/base.html and just before the closing </head>, at around line 8, add the following:

Code language
HTML
<link rel="alternate" type="application/rss+xml" href="{{ site.url }}/feed.xml" />

The handy thing about this is that someone can add any page on your site to their RSS reader and it will pick up the link to your feed automatically.

Wrapping up and recap permalink

You made it to the end of this module. You should be super proud of yourself because you’ve learned a hell of a lot of stuff.

Think back to lesson one for a moment. All you had was an empty folder. Now, in lesson 17, you have a fully functional website built with Eleventy. Friend, you’ve just learned Eleventy from scratch.

That’s not the end, though. Now, we’re going to introduce some more technology to our setup to make this site look awesome. As promised when you bought this course, we’re not just learning Eleventy—we’re learning how to build a kickass website!

So, with that in mind, make yourself a drink, have a stretch and get ready to learn how to build a slick asset pipeline.


Comments

Next up: Lesson 18 - Setting up Gulp

Now that we have an HTML-only site, it’s time to start making it look good, and that starts with an asset pipeline.

Get started

Help! My version of this lesson isn’t working.

Don’t panic, you can download the working project here! Once they are downloaded: replace your project with these files and run npm install. You can read more information here.

Download project files

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me