Layouts

Let’s install a new starter provided by the Gatsby.

Open your terminal and run below commands.

gatsby new my-starter
cd my-starter // changing the directory to my-starter
gatsby develop

It might look like the below image.

gatsby layouts

Open the project folder in your favorite code editor have you seen layouts and components folder is there inside the src folder.

If you define anything inside the layouts file it might be shared across to all pages.

If you have any shared feature that might be used across in your website you can create components for that example buttons, header, footer.

Open layouts file

const Layout = ({ children, data }) => (
  <div>
    <Header siteTitle={data.site.siteMetadata.title} />
    <div
      style={{
        margin: '0 auto',
        maxWidth: 960,
        padding: '0px 1.0875rem 1.45rem',
        paddingTop: 0,
      }}
    >
      {children()}
    </div>
  </div>
)

There is a header component which is imported from the components folder.

children property: everything you defined inside the pages folder goes here.