Gatsby Layouts
Last Updated :
31 Mar, 2022
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:
Share your thoughts in the comments
Please Login to comment...