title: How can I set the index page of my Gatsby site to be one of the dynamically generated pages?
body: <p>I have a Gatsby site that queries information from a Wordpress REST API with GraphQL to dynamically create the site pages. I'd like to set my index page to be the homepage that is being created dynamically i.e <code>home.html</code> </p>
  
  <p>I saw this post that was similar
  <a href="https://stackoverflow.com/questions/52592681/on-gatsby-cms-how-can-i-set-the-about-page-as-a-index-page">On Gatsby CMS how can i set the about page as a index page</a></p>
  
  <p>However, they have an <code>about.js</code> file that corresponds to their about page, meaning they can export it as a component and use it in index or they can even just copy the contents of that file over to <code>index.js</code>. The homepage that I want to set as my index is being generated dynamically and using a GraphQL query that can't be used outside of the <code>page.js</code> template. So I don't see an easy way to copy that over to another file. </p>
  
  <p>I guess my last option would be to set my server to point to the static file in <code>public/home.html</code> and serve that as the site root, but the person in that posting tries to deter people from doing that. </p>
  
  <p>Any ideas? </p>
  
  <p>Here is page.js template that generates the pages of the site: </p>
  
  <pre><code>const PageTemplate = ({ data }) =&gt; (
      &lt;Layout&gt;
          {&lt;h1 dangerouslySetInnerHTML={{ __html: data.currentPage.title }} /&gt;}
          {
             renderBlocks(gatherBlocks(data.currentPage.acf.page_blocks, data))
          }
      &lt;/Layout&gt;
  );
  
  export default PageTemplate;
  
  export const pageQuery = graphql`
      query ($id: String!) {
          currentPage: wordpressPage(id: {eq: $id}) {
              title
              id
              parent {
                  id
              }
              template
              acf {
                  page_blocks {
                  block_type {
                      acf_fc_layout
                      cs_title
                      cs_text
                  }
                  wordpress_id
                  }
              }
          }
      }
  `;
  </code></pre>
  
  <p>And here is my index page: </p>
  
  <pre><code>import React from "react"
  
  import Layout from "../components/global/Layout"
  
  const IndexPage = () =&gt; (
    &lt;Layout&gt;
      &lt;h1&gt;Hi people&lt;/h1&gt;
      &lt;p&gt;Welcome to the Tank Gatsby site.&lt;/p&gt;
      &lt;p&gt;Now go build something great.&lt;/p&gt;
    &lt;/Layout&gt;
  )
  
  export default IndexPage
  </code></pre>