How to properly set the Gatsby.js homepage?

Question

I am building a multi-page website (so, multi Component) with Gatsby. On the official documentation it says that in the Layouts folder I should have the file index.js which stores the components common to the other pages (such as the navbar and the footer, acting like a react Router, here named MainNavBar and MainFooter). Now, the index.js file is also the homepage and the landing page, when you reach out the localhost:8000 location (once uploaded will be www.mywebsite.com). The problem is that right now this page is empty, rendering only the children() stored in the pages folder after selecting a page in the website. If I create a component inside of it, though, such as the home page (which is now stored as home.js in the pages folder), the other pages are rendered below the homepage and the home page itself will be common to all the other pages, making impossible to display correctly the components. How to properly create an home page which will be also the landing page keeping this configuration?

this is the index.js component

import Helmet from 'react-helmet'
import MainNavBar from '../components/navbar.js';
import Footer from '../components/footer';
import React, { Component } from 'react';
import logo from '../images/recsenz.png';
import tile1 from '../images/tile_imgs/prova(m).png';
import tile2 from '../images/tile_imgs/prova(d).png';
import tile3 from '../images/tile_imgs/prova(x).png';
import { Card, CardImg, CardText, CardBody,
   CardTitle, CardSubtitle, Button, Col, Row, Container } from 'reactstrap';
import PropTypes from 'prop-types';
import 'bootstrap/dist/css/bootstrap.min.css';


import './index.css'


const Layout = ({ children, data }) => (
  <div>
    <Helmet
      title={data.site.siteMetadata.title}
      meta={[
        { name: 'description', content: 'Sample' },
        { name: 'keywords', content: 'sample, something' },
      ]}
    />
    <MainNavBar />
      {children()}
    <Footer />      
  </div>
)

Layout.propTypes = {
  children: PropTypes.func,
}

export default Layout

export const query = graphql`
  query SiteTitleQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`

Answer 1

Here's how Gatsby (v2) recommends you set up your work directory:

- src
 - components
  - layout.js
  - header.js
  - footer.js
 - pages
  - index.js
  - about.js

Naming of your components is totally down to you. However, in the pages directory, Gatsby will automatically create pages based on the names of the files in there. In the example above, Gatsby will create your homepage using index.js and a "/about" page using about.js .

What is recommended you do, is use the layout.js component to wrap things like the header & footer. Here's an exemple:

layout.js

import React from "react"
import Header from "./header"
import Footer from "./footer"

export default ({ children }) => {
  return (
    <div id="main-content">
      <Header />
      {children}
      <Footer />
    </div>
  )
}

index.js

import React from "react"
import Layout from "../components/layout"

export default () => {
  return (
    <Layout>
      <h1>Welcome to my home page</h1>
    </Layout>
  )
}

about.js

import React from "react"
import Layout from "../components/layout"

export default () => {
  return (
    <Layout>
      <h1>Welcome to my about page</h1>
    </Layout>
  )
}