Category: Gatsby.js

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Install the Gatsby CLI

We run:

npm install -g gatsby-cli

to install the Gatsby CLI.

Create a New Site

Once we installed the Gatsby CLI, we run:

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

to let Gatsby CLI create a project.

Then we can start developing by running the dev server:

cd gatsby-site
gatsby develop

When we make changes, we’ll see the latest changes displayed.

Create a Production Build

To create a production build, we run:

gatsby build

And to serve the production build locally, we run:

gatsby serve

Pages

We add pages with into the src/pages folder.

And we can link between pages with the Link component.

For example, we can write:

src/pages/foo.js

import { Link } from "gatsby"
import React from "react"

export default function Foo() {
  return <>
    <Link to='/foo'>foo</Link>
    <Link to='/bar'>bar</Link>
    <div>foo</div>
  </>
}

src/pages/bar.js

import React from "react"
import { Link } from "gatsby"

export default function Bar() {
  return <>
    <Link to='/foo'>foo</Link>
    <Link to='/bar'>bar</Link>
    <div>bar</div>
  </>
}

We add the Link component and the links to the pages will be added.

The URL path is determined by the file name.

So foo.js maps to /foo , and bar.js maps to /bar .

Layout

We can create a layout component with Gatsby to add shared markup, styles, and functionality across multiple pages.

To do this, we write:

src/components/layout.js

import { Link } from "gatsby"
import React from "react"

export default function Layout({ children }) {
  return (
    <div style={{ margin: `0 auto`, maxWidth: 650, padding: `0 1rem` }}>
      <Link to='/foo'>foo</Link>
      <Link to='/bar'>bar</Link>
      {children}
    </div>
  )
}

src/pages/foo.js

import React from "react"
import Layout from "../components/layout"

export default function Foo() {
  return <Layout>
    <div>foo</div>
  </Layout>
}

src/pages/bar.js

import React from "react"
import Layout from "../components/layout"

export default function Bar() {
  return <Layout>
    <div>bar</div>
  </Layout>
}

We moved the Link components to layout.js so we can reference everything in one place.

In the Layout component, we have the children prop to render the child components that wrapped inside the Layout component.

Creating Pages Programmatically with createPage

We can create pages programmatically.

To do this, we write:

gatsby-node.js

exports.createPages = ({ actions }) => {
  const { createPage } = actions
  const dogData = [
    {
      name: "fido",
      breed: "Sheltie",
    },
    {
      name: "sparky",
      breed: "Corgi",
    },
  ]
  dogData.forEach(dog => {
    createPage({
      path: `/${dog.name}`,
      component: require.resolve(`./src/templates/dog-template.js`),
      context: { dog },
    })
  })
}

src/templates/dog-template.js

import React from "react"

export default function DogTemplate({ pageContext: { dog } }) {
  return (
    <section>
      {dog.name} - {dog.breed}
    </section>
  )
}

We export the createPages function.

Inside the function, we call the actions.createPage function with the path to the page.

component has the template we want to render the data in.

The context has the data we want to render.

Then in dog-template.js , we get the data from the pageContext prop and render them.

Now when we go to http://localhost:8000/fido, we see:

fido - Sheltie

And when we go to http://localhost:8000/sparky, we see:

sparky - Corgi

Conclusion

We can add pages manually and automatically with Gatsby.js