Ecosystem

Design

Building nested layouts in Gatsby

Welcome to part three!

What’s in this tutorial?

In this part, you’ll learn about how Gatsby lets you create “layout components”. Layout components are
sections of your site that you want to share across multiple pages. For example,
Gatsby sites will commonly have a layout component with a shared header and
footer. Other common things to add to layouts are a sidebar and navigation menu.

On this page, the sidebar to the left (assuming you’re on a larger device) and
the header at the top are part of gatsbyjs.org’s layout component.

Let’s dive in and explore Gatsby layouts.

Install a starter

As we mentioned in Part Two, at this point it’s probably a good idea to close the terminal window(s) and project files from previous parts of the tutorial, to keep things clean on your desktop. Then, open a new terminal window and run the following commands to create a new Gatsby site in a directory called tutorial-part-three and then move to this new directory:

Once the site is finished installing, install gatsby-plugin-typography. For a reminder of how to do this, see Part Two of the tutorials. For
the Typography.js theme, let’s try the “Fairy Gates” typography theme this time:

Now, let’s add a few different pages: a front page, an about page, and a contact
page.

src/pages/index.js

import React from"react";exportdefault()=>(<div><h1>Hi!I'm building a fake Gatsby site as part of a tutorial!</h1><p>
What doI like to do? Lots of course but definitely enjoy building
websites.</p></div>);

But there are a few problems. First, it’d be nice if the page content was
centered on the screen like in part two of the tutorial. And second, we should
really have some sort of global navigation so it’s easy for visitors to find and
visit each of the sub-pages.

Let’s tackle these problems by creating our first layout component.

Our first layout component

First, create a new directory at src/layouts. All layout components have to be
in this directory.