⚠️ This lesson is retired and might contain outdated information.

Create Gatsby Static Pages Manually

Khaled Garbaya
InstructorKhaled Garbaya

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 2 years ago

Gatsby pages are created in different ways:

  • Automatically turns React components in src/pages into pages
  • Programatically using the createPages API in your site's gatsby-node.js
  • Using a Plugin That implements the createPages API

How to list all the pages in a Gatsby site

Gatsby will spawn a GraphQL server along with your dev server and you can use that to list all pages. Navigate to HOST:PORT/___graphql e.g localhost:8000/___graphql and past the following query.

{
  allSitePage {
    edges {
      node {
        path
        component
        pluginCreator {
          name
          pluginFilepath
        }
      }
    }
  }
}

In this lesson you will learn how to add React Components inside the src/pages folder for Gatsby to create pages from them automatically

Instructor: [0:00] Let's go to our project. Inside of pages, let's create a new file, and call it about.js. Here, we would import React and export component.

[0:18] Let's hit save. Let's run our server, and go to /above. You can see here our new created page. Gatsby would automatically create pages from components inside of the pages folder.