Pages

I. Create Gatsby pages

Firstly, we navigate to the /src/pages directory.

We already have an index.js, which is our Homepage.

import React from 'react'

const Home = () => {
  return (
    <div>
      <h2>Hello World</h2>
    </div>
  )
}

export default Home

Check React tutorial to learn how to make changes to the Homepage.

To create Gatsby pages, we can create new .js file in the /pages directory.

For example, we create a blog page.

src
└── pages
    ├── index.js
    └── blog.js
import React from 'react'

const Blog = () => {
    return (
        <div>
            <h1>This is our blog page</h1>
        </div>
    )
}

export default Blog

II. Creating a 404 page

To create a 404 page, we create a 404.js file in the /src/pages directory.

Users will see this page if they navigate a non-exist page in our Web app.

src
└── pages
    ├── 404.js
    ├── blog.js
    └── index.js
import React from 'react'

const Error = () => {
    return (
        <div>
            <h1>This is our error page</h1>
        </div>
    )
}

export default Error

III. Linking between pages

To have internal linking, we use the <Link /> component.

Example: Add a link to Blog on our Homepage.

  • Open the index page component (src/pages/index.js)
  • Import the <Link /> component from Gatsby
  • Add a component with a to property and a value of “/blog/” for the pathname
import React from 'react'
import { Link } from "gatsby"

const Home = () => {
  return (
    <div>
      <h2>Hello World</h2>
      <Link to="/blog/">Blog Page</Link>
    </div>
  )
}

export default Home

For external links, we still use <a href=""></a>