Creating a personal site using Gatsby.js

Step by step

Taking on a new framework can be very nerve-wracking. I've experienced countless nights where I've read article after article thinking the writer skipped a step or jumped ahead (still do). If you're reading this hoping to get detailed instructions on how to get started with Gatsby.js you're in the right place.

Gatsby has great documentation and is very approachable even to a first-time user like myself. In this article, we will go over how to do a basic setup for a personal website using Gatsby.js.

Initial Setup

The Gatsby documentation recommends using Homebrew to install Gatsby and Node.js. The following instructions for this session will be the Mac instructions. Open your terminal with command + space and search terminal and press enter.

Check your version of homebrew with:

brew -v

If you don't have Homebrew installed check out the Homebrew install instructions --->HERE

Install Xcode:

xcode-select --install

Install Node:

brew install node

Gatsby Command Line Interface

We now have the prerequisites of getting started with Gatsby. It's installed and ready to rumble. What makes Gatsby so great (and rumble ready) is that it will guide you along the way to creating a static site with its CLI tool. A CLI, or command-line interface, allows developers to interact with programs through the command line. Install the Gatsby CLI with npm:

npm install -g gatsby-cli

There will be some WARNINGS pop-up in your terminal but don't be afraid that's all part of the show... I hope. After the warnings instill a little fear the Gatsby framework and command-line tools are now installed, which can only mean one thing... It's time to think of a project name because we're creating our first Gatsby site!

Gatsby Site time!

Note: You can create your own site with a Gatsby starter template which will have the foundation for a Gatsby site, so to speak. This command is for the hello-world starter: gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

For our instance lets use:

gatsby new our-world

Now open up your text editor and you should have some fancy-schmancy Gatsby files. Once you're there take a moment to see what Gatsby has created.

You should see something like this 👇🏽

To boot up your Gatsby development server use the command gatsby develop.

If you are new to localhost, no sweat! I got you! Within your terminal, you should see something like this 👇🏽

In your terminal, you will see that you can now visit your site locally at http://localhost:8000.

Hot tip: Copy http://localhost:8000 and paste it into your browser.
Hot tip #2: You can click the link within the terminal!

!(Gatsby Default Starter)[https://www.gatsbyjs.com/static/3833f4ebd008c83959677433b5672679/22f13/d1c71f638d7d35fc92aadba5fa13990c.png]

TADA! With the beginning stages of your very own Gatsby site, you can now "build something great!" (Extra credit if you know where that quote is from 😊)

Now if you go back to your code and go to the index.js file we can play with what this index page says locally.

project   
│
└───src
│   └───pages
│       │   404.js
│       │   index.js <---- This file
│       │   page-2.js
│       │   using-tyepscript.tsx

You will see within that code "Hi people" which reflects the header on the site that we see locally. If we change that to "What's up, everyone!", save our code (command + S in VS Code), and refresh the page we will see that it instantly changes with our new header. This is called 'hot reloading'.

Hot tip: Make sure your local server is still running. If nothing happened, you most likely need to run gatsby develop in your terminal again.

Let's take a moment to recognize how far we've come. Just a few minutes ago we had nothing, nada, and now were Gatsby moguls with our very own index page. Ok, great now let's delete everything.

Not everything, everything! Just the code within the index.js file so we can further learn and comprehend how Gatsby works.

To start off, at the top of the page, because Gatsby is built on top of React we need to import React from 'react'. The next thing we will do is define a constant variable that will be returned by the page. We then define a div and export the constant we have created. Your index.js file should now look like the following:

import React from 'react'
const Indexpage = () => {
  return (
    <div>
      <h1>Whats up, everyone 2.0!<h1>
    </div>
  )
}

export default IndexPage

If you refresh localhost you will now see "Whats up, everyone!" as a header. WHOA, COOL!

Quick challenge: Now that you have created your own index page try to make a blog page that says "This is a blog" as a header.

Hint: It is made the exact same way 👀 BUT the file name is now blog.js.

OK sick sick sick we have some new pages but we don't have a navbar to get to those pages, so let's make a navbar. We will make this nav bar within the header.js file within the components folder.

project   
│
└───src
│   └───components
│       │   header.js
│       │   image.js
│       │   layout.css
│       │   seo.js

In this file insert the following code to create a navbar.

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

const Header = () => {
    return (
      <header>
        <p>Here is a header</p>
        <nav>
          <ul>
            <li>
              <Link to="/blog">Blog</Link>
            </li>
            <li>
              <Link to="/about">About</Link> 
            </li>
            <li>
              <Link to="/">Home</Link> 
            </li>
          </ul>
        </nav>
      </header>
    )
  }

  export default Header

Great! Now that our navbar lives within the header component we can import it into our pages. Let's do that. Go to 'index.js' and import the header with the following:

import Header from '../components/header'

You also need to put the header object within your div, so your code within the index.js file should look like this:

import React from 'react' 
import Header from '../components/header'


const IndexPage = () => {
  return (
    <div>
      <Header/>
      <h1>Whats up, everyone!</h1>
    </div>
  )
}

export default IndexPage

Whoa! We have a header! We have a header, we have a header, we have a header I wonder who its from! Please excuse the Blues Clues reference but we did it! Now that you're familiar with importing components and have new pages try to incorporate the nav bar on every page.

You will notice that if we had more than a couple of pages to work with adding the header and nav bar to every page would be very taxing. This is where another level of abstraction comes into play - layout.js!

Check out my Twitch channel - muydanny to learn alongside me!