Lesson 29 - Add a contact page

Learn Eleventy From Scratch
Front-End Build

We’ve got most our front-end now, so let’s see how flexible it is by quickly adding our contact page.

If you click around the site now, you’ll see that the front-end is pretty much done. Yes, we’ve still got the work pages to do, but even they look pretty darn good.

One page that is very missing, though, is the contact page. So let’s demonstrate how flexible our Eleventy site really is, and put a contact page together in under 3 minutes.

Ready. Steady. Go!

Adding the template permalink

Create a new file in your layouts folder called page.html and add the following to it:

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

{% set pageHeaderTitle = title %} 
{% set pageCriticalStyles = ['css/page.css'] %}

{% block content %}
  {% include "partials/page-header.html" %}
  <div class="panel dot-shadow bg-tertiary-glare">
    <div class="[ page-content ] [ flow wrapper ] [ flow-space-700 ]">
      {{ content | safe }}
{% endblock %}

Now create another file in your src folder called contact.md and add the following to it:

Code language
title: 'Contact us'
layout: 'layouts/page.html'

This is a made up agency that is being used as a context for the project that you build when you [learn Eleventy from scratch](https://piccalil.li/course/learn-eleventy-from-scratch/), so ideally, you shouldn’t try to contact us.

You can go ahead and purchase the course to build this page—amongst [the rest of the site](/)—by visiting [Piccalilli](https://piccalil.li/course/learn-eleventy-from-scratch/).

Now, if you go to http://localhost:8080/contact you’ll see that it’s good to go!

Wrapping up permalink

Because we’ve built everything in such a modular way, adding a page that looked good was trivial. Pretty cool, right?

I’ll bring your attention back to the work section, too. Really, when you look around, it looks pretty good already, thanks to our flexible codebase. All we’re going to do in the next lesson is dot the i’s and cross the t’s.

Let’s do it.

Next up: Lesson 30 - Styling the work section

The last bit of front-end work is to make the work section look awesome by adding some compositional blocks.

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 & visually stunning websites.

I am currently setting up a new creative agency called Set Creative Studio and we are taking on projects for 2022, so if you have a project in mind, get in touch.