# Set the index page of my Gatsby site to be one of the dynamically generated pages?

**URL:** <https://community.prismic.io/t/set-the-index-page-of-my-gatsby-site-to-be-one-of-the-dynamically-generated-pages/8692>\
**Category:** Developing with Prismic\
**Tags:** gatsby\
**Created:** [January 17, 2022, 5:28pm UTC](https://community.prismic.io/t/set-the-index-page-of-my-gatsby-site-to-be-one-of-the-dynamically-generated-pages/8692 "2022-01-17T17:28:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kris](https://avatars.discourse-cdn.com/v4/letter/k/82dd89/32.png) [@kris](https://community.prismic.io/u/kris)\
**Post date:** [January 17, 2022, 5:28pm UTC](https://community.prismic.io/t/set-the-index-page-of-my-gatsby-site-to-be-one-of-the-dynamically-generated-pages/8692/1 "2022-01-17T17:28:41Z")

</div>

This might be one for @angeloashmore

I have a repeatable `Landing Page` custom type and I'd like to use it to generate my homepage. In order to do that, I can update:

1. my linkResolver to

```auto
if (doc.type === 'landing_page') {
    if (doc.uid === "homepage") {
      return "/"
    } else {
      return `/${doc.uid.replace('__', '/')}/`;
    }
  }

```

1. Delete pages/index.js

2. Create the page within gatsby-node.js

However, I don't think that that `public/index.html` will be generated (source [no index.html file in public folder after building · Issue #21843 · gatsbyjs/gatsby · GitHub](https://github.com/gatsbyjs/gatsby/issues/21843)) which might cause problems when building the website.

* * *

Another approach is to copy the query of templates/landing.js into pages/index.js and hardcode the uid query to `"homepage"`. I can then skip the creation of `/homepage` in gatsby-node

However, this causes several problems:

1. I can't preview the page due to how Prismic preview works

```auto
export const repositoryConfigs = [
  {
    repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
    linkResolver,
    componentResolver: componentResolverFromMap({
      landing_page: LandingPageTemplate,
    }),
  },
];

```

1. I need to remember to keep pages/index.js and templates/landing.js query in sync

* * *

The final solution is to create a single type custom type called "Homepage" which is identical to my repeatable Landing Page custom type, but once again I need to keep both in sync.

Any help will be greatly appreciated!

PS: relevant stack-overflow ticket without a solid answer -\> [javascript - How can I set the index page of my Gatsby site to be one of the dynamically generated pages? - Stack Overflow](https://stackoverflow.com/questions/59868720/how-can-i-set-the-index-page-of-my-gatsby-site-to-be-one-of-the-dynamically-gene)

---

<div class="post-metadata">

**Author:** ![angeloashmore](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/angeloashmore/32/2685_2.png) [@angeloashmore](https://community.prismic.io/u/angeloashmore)\
**Post date:** [January 18, 2022, 12:38am UTC](https://community.prismic.io/t/set-the-index-page-of-my-gatsby-site-to-be-one-of-the-dynamically-generated-pages/8692/2 "2022-01-18T00:38:57Z")

</div>

Hey @kris!

Your first strategy is what I use: create a page with path `/` in `gatsby-node.js`. This will generate the index page without hard-coding a `pages/index.js` file.

I tested this just now with a Gatsby + Prismic site and it built a `public/index.html` file as expected. In this test project, the `pages` directory only contains `404.tsx` and `preview.tsx`.

For reference, this is what my `gatsby-node.js` file looks like in the test project:

```auto
// gatsby-node.js
const path = require("path");

exports.createPages = async (gatsbyContext) => {
  const { actions, graphql } = gatsbyContext;
  const { createPage } = actions;

  {
    const queryResult = await graphql(`
      query {
        allPrismicPage {
          nodes {
            id
            url
          }
        }
      }
    `);

    for (const page of queryResult.data.allPrismicPage.nodes ?? []) {
      createPage({
        path: page.url,
        component: path.resolve(__dirname, "src/templates/page.tsx"),
        context: { id: page.id },
      });
    }
  }
};

```

And the Link Resolver provided to the plugin. Note that in my example, a Page document with the UID `home` will result in a `/` URL in a similar manner to your code.

```auto
// src/linkResolver.js

/** @type import('@prismicio/helpers').LinkResolverFunction */
exports.linkResolver = (doc) => {
  switch (doc.type) {
    case "page": {
      if (doc.uid === "home") {
        return "/";
      } else {
        return `/${doc.uid}`;
      }
    }

    default: {
      return "/";
    }
  }
};

```

And here's a quick screenshot of the `public` folder showing the generated `index.html` file:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/2/2e283eafaaf230dad7bbcaacaa3f39f308c84a0c.png)

* * *

Does you setup look similar to this? Can you confirm that an `index.html` file is or is not generated after running `gatsby clean`?

Thanks!