GatsbyJS - Static Website Generator: Part3 - Gatsby Basics


30 September 2018

Last Edited: 30 September 2018


Open up your terminal and code editor at the project folder and fire up a Gatsby server by using the command:

gatsby develop

We can now navigate to our app at localhost:8000.

1 - Part3

If we go to our code editor we can see that Gatsby has created a bunch of assets and folders used by the app. However most of these we can just leave alone for the time being, the only folders we need worry about are src and the project root.

Navigate to the src/pages folder and open up index.js, we can see here that this is the information that is displayed on the home page.

2 - Part3

GatsbyJS uses ReactJS components to render its pages, we can see that the IndexPage simply exports an arrow function with some HTML inside.

This is not in fact HTML but JSX, which is essentially just some syntactic sugar to make the code more readable and will compile down to pure JavaScript at build time.

I would recommend taking a basic ReactJS course if this is new to you as I will not go into React any further throughout this Gatsby blog.

Now we know what a page looks like, let’s make a new one.

Create a new file in the src/pages folder called about.js and insert the following code.

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

import Layout from '../components/layout'

const AboutPage = () => (
    <p>Hey! This is ALL ABOUT ME!!!</p>
    <Link to="/">Home</Link>

export default AboutPage

3 - Part3

Cool, a new page...but how do we tell Gatsby that our new page exists, I mean we just stuck a new file in a folder, surely we need to code something to include it?

Well that’s the Gatsby magic! Go to your browser again and go to localhost:8000/about

4 - Part3

Woah! WTF Just happened?! MIND BLOWN!

Gatsby detects a new page in the pages folder, uses it's file name as a URL slug and creates a new path for it. That's handy eh?

Hit the back button to go back to the homepage.

It's great being able to type in the URL but let’s make a link to the about page on the homepage.

Open up index.js and add a new Link tag below the one to page-2.

<Link to="/about/">About</Link>

5 - Part3

The gatsby Link tag, essentially creates a standard HTML anchor tag but with some special routing magic sprinkled in. (NB I have stuck a line break in to split the tags up).

6 - Part3

Cool, we now have a working link to our about page!

Things are looking good so far, but it’s still a bit...templatey, lets personalise it a wee bit.

We will start with the website title "Gatsby Default Starter". This is no name for an awesome blog site!.

Should just be a case of changing some text in the header right? Well let's open the header, found in src/components/header.js.

Right, where is that text? Ermmmm! Wait....I'm not sure.

As the header is a React component, like all React components we can pass data to them. We do this to make them more dynamic and reusable, we can store the data in one location and update all components at once if we need to change it.

If you scroll down, you will see:


7 - Part3
This is telling the header, "see that object I passed to you, well you will find the title under the keys, site and title".

So where do we store the data?

Open up the gatsby-config.js file located in the project root. Here we can set up some of the sites configuration options, including..you guessed it the site title.

9 - Part3

10 - Part3

11 - Part3

BOOM! And the title is updated. There is a little bit more to it between updating the text and it getting into the component, namely a little tool called GraphQL, which I will get into in a later part.

To finish off, lets clean up the site a touch. Delete the page-2.js file and also the link to it in the index.js component. Then update the text in the index file to change the gatsby boiler plate.

12 - Part3

13 - Part3

Looking gooood!

Next we will look at how to create some data for our site using a service called Contentful.