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?

score 1 · Accepted Answer · answered Oct 01 '18 at 18:25

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.

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.
Replace pages/index.js with the content of your pages/about.js file.
Export the top-level component from pages/about.js from pages/index.js as the default

answered Oct 01 '18 at 18:25

coreyward

77,547
20
137
166

If the about page was being generated programmatically using a page template and a graphQL query, then I wouldn't be able to just export the page template into index.js, correct? Then the only option would be for me to set the server to serve the programmatically created page as the root directory index. – user2030942 Jan 22 '20 at 21:35
@user2030942 All you need to do is change the path you pass to `createPage` in gatsby-node.js. E.g. `createPage({ path: "/index/", component: "./src/templates/anything.jsx" })` – coreyward Jan 22 '20 at 23:19
My createPage function looks as follows: allWordpressPage.edges.forEach(edge => { if (edge.node.status === 'publish') { createPage({ path: edge.node.slug, component: slash(pageTemplate), context: { id: edge.node.id, parent: edge.node.wordpress_parent, wpId: edge.node.wordpress_id, } }) } }); – user2030942 Jan 23 '20 at 19:54
Are you suggesting that I call createPage again after the first call to create the /index/ path, passing in the id of the homepage? – user2030942 Jan 23 '20 at 19:55
@user2030942 No I'm saying that if you want the slug `about` to be `index` you can just override it. If you have a different question you should open a separate question though. – coreyward Jan 23 '20 at 20:25
I did. Please take a look https://stackoverflow.com/questions/59868720/how-can-i-set-the-index-page-of-my-gatsby-site-to-be-one-of-the-dynamically-gene – user2030942 Jan 23 '20 at 22:04

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

1 Answers1

Linked