robloranger.ca

Basic Gatsby

- 2 min read

When I say basic, I mean bare minimum.

When I first started looking at Gatsby.js I wanted to know how to start from scratch. Like starting with an empty directory and writing everything by hand. As it turns out, you need very little.

So if you have been searching for things like the following, keep reading:

  • Bare Gatsby site
  • Gatsby basics
  • How to create a Gatsby starter

Still here? Cool. Let's start.

Starting with an empty directory. You need only a package.json and src/pages/index.js, in the later case I prefer .jsx because that's how I am. So your directory might look like this:

/- myProject
 |
 - package.json
 / src
   / pages
   |
   - index.jsx

package.json could be empty, but I started with:

{
  "title": "my-awesome-project",
  "description": "This is freaking awesome!",
  "private": true
}

src/pages/index.jsx just needs to export a React component:

import React from 'react'

export default () => (
  <h1>Woohoo!</h1>
)

Then you need to have installed the Gatsby cli tool:

npm i -g gatsby-cli

Or you can just run it using npx if you prefer.

Now lastly install React, ReactDom and Gatsby in your app. These are the minimum dependencies for a Gatsby application.

npm i --save react react-dom gatsby

Your package.json should now look something like this:

{
  "title": "my-awesome-project",
  "description": "This is freaking awesome!",
  "private": true
  "dependencies": {
    "gatsby": "^2.1.19",
    "react": "^16.8.3",
    "react-dom": "^16.8.3"
  }
}

That's it, run your new app using:

gatsby develop

Open your browser and navigate to the URL printed in your console. This is typically http://localhost:8000. You should now see your Woohoo!.

Screenshot of a basic website that reads 'Woohoo!'

This is of course the extremely basic version of a Gatsby application, the easiest way to get a nice app up and running is to use one of the amazing Starters the community has built. Check them out here