Your First React Gatsby Site

Gatsby makes some juicy looking promises. With it's main slogan being blazing fast websites and apps it has developers flocking to try it out. And if you're anything like me, migration season is the only season you know.

So put down that plain html file, drop that image resizing tool and throw out everything you know about JavaScript!.. Wait. Too far. Go pick that back up. We need that. Let's get started with Gatsby.

Gatsby is a breeze to work with and getting your first site setup is no exception.

You will need to have node and npm installed. If you don't, take a quick detour through google and come back to us.

Once you do, navigate to the folder you keep the rest of your projects in. Open a terminal window (if you ever shut them) and run

npx gatsby new my-first-gatsby-site

This will create a new folder containing a freshly made and fully functional (but simple) gatsby site.

Let's navigate in.

cd my-first-gatsby-site

Have gatsby create an optimized production build by bundling up all of the source code into static html and javascript.

npm run build

And then take a look at it!

npm run serve

Now we can visit http://localhost:9000/ to see our new site.

bon appetit

As you can see, getting set up with a Gatsby site is a piece of cake!

But you are probably going to want to accomplish more than a starter template site, sooo, let's take a look around!

Inside the my-first-gatsby-site folder that was created we have a number of important files and folders.

What we are going to take a look at for now is my-first-gatsby-site/src/pages. This folder contains all of the pages for our app. Shocking I know. If you create a js file here it will automatically be added as a route to your site! So if we created site-sent.js, it would be available at yourdomain.com/site-sent. In fact let's do that now.

Create our new file site-sent.js. Remember! It has to be in the my-first-gatsby-site/src/pages folder. Then paste in the following content:

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

import Layout from '../components/layout'
import SEO from '../components/seo'

const SiteSent = () => (
  <Layout>
    <SEO title="I Love Site Sent" />
    <h1>Wow thank you Joseph from Site Sent</h1>
    <p>This is great, I'm going to read every blog post you ever make.</p>
    <Link to="/">Please take me away from here, this is cringe</Link>
    <p style={{ margin: '2rem 0 0 0' }}>
      Hey! And Site Sent{' '}
      <span role="img" aria-label="Pointing down">
        👇
      </span>
    </p>
  </Layout>
)

export default SiteSent

But wait, how do we see our new page? It's not at http://localhost:9000/site-sent like you said it would be!

Ahh, but remember? When we built and served our site (with npm run build and npm run serve) we were creating static html and js for a production ready build. So it won't pick up our new changes.

If we want to see our changes we need a new command. Let's go back to the root of our folder and look inside a new file: /package.json.

Search for the scripts key and you will find all of the current commands for our site. You may notice a build script and a serve script. These were the very same ones we used before! Now what we want is start (or develop, start points to develop).

So then back in our terminal, terminate our previous command and execute:

npm run start

Now we can view our site with http://localhost:8000/. This command has started up a local development server for us, with guess what? Hot reloading!

Lets check it out by going back into the /src/pages folder and opening index.js. We are going to make an update. Make sure you are able to see both your site running at http://localhost:8000/ and your code editor at the same time. Keep your eyes on the link below the astronauts feet, and save the changes below.

// src/pages/index.js
import React from 'react'
import { Link } from 'gatsby'

import Layout from '../components/layout'
import Image from '../components/image'
import SEO from '../components/seo'

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/site-sent/">Go to my new page</Link>
  </Layout>
)

export default IndexPage

DID YOU SEE THAT!

Yea.. its called hot reloading, it's everywhere.
— SomeRandomBuzzKill69

It's not the first time I've worked with hot reloading but it just feels so good every. single. time.

Now you can click through and see the page we set up before.

Congratulations! You have now setup your first Gatsby site. If you want to learn more Gatsby has some great documentation over at https://www.gatsbyjs.org/docs/ or check back here for more articles on Gatsby in the future.