On Gatsby CMS how can i set the about page as a index page

Question

Hi I installed the gatsby cms starter with netlify, this project came with a started template called kaldi that have a basic post and pages, is easy to create fields and build the grapql data, but Im confuse the way that the route works, for example I can`t found the way to put the abot page as a index page

this the index page that came ith the data info from the post fields

 import React from 'react' import PropTypes from 'prop-types' import { Link, graphql } from 'gatsby' import Layout from '../components/Layout' export default class IndexPage extends React.Component { render() { const { data } = this.props const { edges: posts } = data.allMarkdownRemark return ( <Layout> <section className="section"> <div className="container"> <div className="content"> <h1 className="has-text-weight-bold is-size-2">Latest Stories</h1> </div> {posts .map(({ node: post }) => ( <div className="content" style={{ border: '1px solid #eaecee', padding: '2em 4em' }} key={post.id} > <p> <Link className="has-text-primary" to={post.fields.slug}> {post.frontmatter.title} </Link> <span> &bull; </span> <small>{post.frontmatter.date}</small> </p> <p> {post.excerpt} <br /> <br /> <Link className="button is-small" to={post.fields.slug}> Keep Reading → </Link> </p> </div> ))} </div> </section> </Layout> ) } } IndexPage.propTypes = { data: PropTypes.shape({ allMarkdownRemark: PropTypes.shape({ edges: PropTypes.array, }), }), } export const pageQuery = graphql` query IndexQuery { allMarkdownRemark( sort: { order: DESC, fields: [frontmatter___date] }, filter: { frontmatter: { templateKey: { eq: "blog-post" } }} ) { edges { node { excerpt(pruneLength: 400) id fields { slug } frontmatter { title templateKey date(formatString: "MMMM DD, YYYY") } } } } } ` 

I changed the filter to refer the about-page ans this bring me all the data form about fields, but in the netlify content manager is no showing the preview page

any idea?

Answer 1

Gatsby, by default, will generate a path based on the file name. So if you have a file at pages/index.js it will generate a file named public/index.html which is typically going to be served as the root directory index.

To change this page, you have a few options.

1. Configure your server to serve public/about.html as the root directory index, though this is uncommon and likely to be hard to debug later.
2. Replace pages/index.js with the content of your pages/about.js file.
3. Export the top-level component from pages/about.js from pages/index.js as the default