text: import * as React from "react"
  import { Link } from "gatsby"
  import { StaticImage } from "gatsby-plugin-image"
  import Navigation from "../components/navigation"
  import BackgroundImage from "gatsby-background-image"
  import graphql from "gatsby"
  import Layout from "../components/layout"
  import Seo from "../components/seo"
  
  const IndexPage = (props) => (
    <Layout>
      <Seo title="Home" />
      {/* <Navigation /> */}
      <BackgroundImage
          fluid={props.data.indexImage.childImageSharp.fluid}
          >
              test
      </BackgroundImage>
  
      <h1>Hi people</h1>
      <p>Welcome to your new Gatsby site.</p>
      <p>Now go build something great.</p>
      <p>This is cool. Howdy from the cPanel.</p>
      <p id='toyellow'>this is the 7th commit.</p>
     
      <p>
        <Link to="/page-2/">Go to page 2</Link> <br />
        <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
      </p>
    </Layout>
  )
  
  export default IndexPage
  
  export const pageQuery = graphql `
  query{
      indexImage:file(relativePath:{
          eq:"../images/gatsby-astronaut.png"
      }){
          childImageSharp{
              fluid(maxWidth:1800){
                  ...GatsbyImageSharpFluid
              }
          }
      }
  }
  `;