illustration for Eject create-react-app and Use Gatsby for Advanced React App Development
Course

Eject create-react-app and Use Gatsby for Advanced React App Development

  2. 2
    Create Gatsby Static Pages Manually
    38s
⚠️ This lesson is retired and might contain outdated information.

Create Gatsby Static Pages Manually

Khaled Garbaya
InstructorKhaled Garbaya
Share this video with your friends

Social Share Links

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

View code on GitHub

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.

egghead
egghead
~ 39 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today