Lesson 14 - Adding our about page

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

A nice straightforward page build using some of the knowledge we’ve already learned.


One thing that helps me to learn is repetition, so that’s what we’re going to do now by creating our ‘about’ page. This lesson features loads of stuff we already know. It’s time to commit it to memory.

Add about page layout permalink

First up: our layout. Create a new file in your layouts folder called about.html and add the following to it:

Code language
HTML
{% extends "layouts/base.html" %} 

{% set pageHeaderTitle = title %} 
{% set pageHeaderSummary = content %} 
{% set peopleItems = collections.people %} 

{% block content %}
  <article>
    {% include "partials/page-header.html" %} 
    {% if peopleItems %} 
      <div class="[ no-js-hidden ] [ panel dot-shadow ] [ bg-light-glare ]">
        <div class="[ wrapper ] [ flow flow-space-700 ]">
          <h2 class="[ headline ] [ measure-micro color-quinary ]" data-highlight="dark">Meet the team</h2>
          {% include "partials/people.html" %}
        </div>
      </div>
    {% endif %}
  </article>

  {% include "partials/cta.html" %} 
{% endblock %}

We start off by setting content for our page header. The pageHeaderTitle is the page title—just like with our blog post—and the pageHeaderSummary is the markdown content.

We then look for our agency’s people, by querying a people collection. Those eagle-eyed amongst you will have noticed that this collection doesn’t exist yet—we’ll make that next. We take that collection and pass it into a new partial called people.html, which will be used elsewhere on the site, too.

We set the data for our upcoming partial using peopleItems. The people.html partial will be able to access that data.

I tend to keep to this style when it comes to setting variables for partials, by using the partial name, then the data name. It keeps things nice and consistent.

Create a people partial permalink

Create a new file in your partials folder called people.html and add the following:

Code language
HTML
{% if peopleItems %}
<div class="people">
  <ol class="auto-grid">
    {% for item in peopleItems %}
    <li>
      <figure class="[ person ] [ frame ]" data-frame="quaternary">
        <img
          class="[ person__image ] [ radius ]"
          src="{{ item.data.image }}"
          alt="Image of {{ item.data.name }}"
          draggable="false"
        />
        <figcaption class="[ person__details ] [ leading-tight ]">
          <span class="[ person__name ] [ font-sans weight-bold ]"
            >{{ item.data.name }}</span
          >
          <span class="person__title">{{ item.data.title }}</span>
        </figcaption>
      </figure>
    </li>
    {% endfor %}
  </ol>
</div>
{% endif %}

We all hopefully know what’s going on in here. We check to see if the peopleItems variable is set, then loop through it, creating a list of <figure>s for each person. Job done!

Create a people collection permalink

Open up eleventy-from-scratch/.eleventy.js and on line 30 create a new line and add the following:

Code language
JavaScript
// Returns a list of people ordered by filename
config.addCollection('people', collection => {
  return collection.getFilteredByGlob('./src/people/*.md').sort((a, b) => {
    return Number(a.fileSlug) > Number(b.fileSlug) ? 1 : -1;
  });
});

This is another collection added by looking up markdown files in the people directory. We then sort them numerically by fileSlug, which is the filename without the extension.

If you look in eleventy-from-scratch/src/people, you’ll notice that they are all numbered files instead of named files. This is a pretty handy way of maintaining content in an SSG like Eleventy because if stuff changes, you can switch out the content without breaking URLs. Consider that Andy’s Tip Of The Day™.

Add an about page permalink

Lastly, we need some content. Create a new file called eleventy-from-scratch/src/about.md and add the following to it:

Code language
text
---
title: 'About Issue 33'
layout: 'layouts/about.html'
permalink: '/about-us/index.html'
---

Wanna see our foosball table? Nah, only kidding. We’re a made-up
agency being used as an example for the Piccalilli course,
[Learn Eleventy From Scratch](https://piccalil.li/course/learn-eleventy-from-scratch/).

Pretty standard stuff here. All I’ll do is remind you that if you set a custom permalink, you need to add index.html at the end, or Eleventy will create a plain text file called about-us!

Wrapping up permalink

Right, if you open up http://localhost:8080/about-us it should look like this.

The about page featuring a title, summary and a list of people figures

That was pretty cool, right? I hope you just rattled through that lesson without much of a headache. If that’s the case: you’re learning really well. If not: don’t sweat. We’ve got plenty more time to practice ahead of us!


Comments

Next up: Lesson 15 - Adding our work landing page

Another quick and (hopefully) easy lesson to give you a chance to practice your new skills.

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