AliLynne

Making a Gatsby Hello World Starter From Scratch

2019-09-04

Tags:

Prerequisites

Required

Nice to have

  • Have created a Gatsby site with a starter

In this tutorial you will:

...build a very simple Gatsby Hello World starter from complete scratch. You will learn what bare minimum components are required for the simplest of Gatsby projects.

Getting Started

First, make a new directory for your project. I've gone with gatsby_playground for mine.

mkdir gatsby_playground
cd gatsby_playground

Create the Project

Now we're going to want to actually create our project. Run npm init in your console. You'll be asked a series of questions. You can just hit enter to accept all of the defaults.

npm init

This should be your result:

{
  "name": "gatsby_playground",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Required Packages

We only need three packages to get us started: Gatsby, React, & React-Dom.

Install all three.

npm install gatsby react react-dom

Start the Server

Now, if that went right, we should just need to start our development server in the console.

gatsby develop

Create Structure

It's all well and good to have a server running. But it isn't really doing much because we haven't added any sort of content yet. To do that we need to create a couple of folders and one file. We'll need a src folder and inside the src we need a pages folder. Inside the pages folder make a file called index.js. It must be called index.js. This is location and filename Gatsby looks for in order to serve your content.

mkdir src
cd src
mkdir pages
cd pages
touch index.js

Add Content

Inside index.js we need to create a React component.

// src/pages/index.js

import React from 'react'

const Index = () => {
  return (
    <div>
      Have a great day!
    </div>
  )
}

export default Index

Now, when we run our gatsby develop command in the terminal in the root directory of our project, we'll get "Have a great day!" in our browser.

That's it! We have a Gatsby site! Just one more thing and we're done.

Add Scripts

The Gatsby CLI comes with a few commands that we'll want to add to our package.json for convenience. You can learn more about these commands in the Gatsby Docs.

// package.json
...

"license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
  },
  "dependencies": {

...

Now we can start our development server with the following terminal command:

npm run start

Final code for this project can be found on Github

Hire Me!

I'm looking for a new position. Please check out my projects page, my technologies and skills and contact me at ali@alilynne.com if you're interested.

Support My Work

or

Buy Me a Coffee at ko-fi.com