Making a Gatsby Hello World Starter From Scratch
2019-09-04
Tags:
Prerequisites
Required
- Installed Gatsby CLI
Nice to have
-
Have created a Gatsby site with a starter
- Check out Gatsby's Docs and come back later if you need to.
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.