Gatsby Layouts

Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps. Gatsby sites are fully functional React apps, so you can create dynamic web applications that are fast, responsive, and secure.

Create a new Gatsby Application

Step 1: Run the below code in the terminal to create a new gatsby site.

npm init gatsby

Give the name ‘gfg’ to the application project.

Step 2: Move to the new ‘gfg’ folder using the below command.

cd gfg

Project Structure:

What are Layouts?

In graphic design, page layout is the arrangement of visual elements on a page. When it comes to creating a website, one of the most important aspects is the layout. The layout of your website will determine how easy it is for visitors to navigate and find the information they are looking for. 
No matter which type of layout you choose, it is important to remember that your goal is to make it easy for visitors to find the information they are looking for. By using a clear and easy-to-navigate layout, you can ensure that your website is successful.

Shared Page Layout

In Gatsby, you can easily create a page layout and use it on different pages. This will help developers to work fast without repeating the same code over and over again.

To create a shared layout, we will create a new folder named ‘components’ inside our src directory. Inside the ‘components’ folder, create a new file named ‘layout.js’ with the below content.

Layout.js

import React from "react"

export default function Layout({ children }) {
  return (
    <div>
        <h3>This is the content of the shared layout file.</h3>
        {children}
    </div>
  )
}

Now we will use this layout on our homepage. So add the below content in the ‘index.js’ file.

index.js

import * as React from "react"
import Layout from "../components/Layout"

const IndexPage = () => {
  return (
    <main >
      <Layout>
        <h3>GeeksforGeeks - This is page content</h3>
      </Layout>
    </main>
  )
}

export default IndexPage

Run the application: Use the below code in the terminal to start the application.

npm run develop

Output: