Creating Your First Gatsby Site

By shane
Tue, 2019-09-03 08:56
Daily Dose of Drupal Episode #1

Share with Others

In this episode, we introduce the Daily Dose of Gatsby and walk through spinning up a new Gatsby site. We go over some important Gatsby concepts and files to provide an overview of how the Gatsby build process works. Some of the topics we cover in this episode include:

  1. Creating a new Gatsby Site
  2. Learning about JSX
  3. Overview of page components

Here is a link to the Gatsby Docs page on getting your development environment set up.

The first thing to do is to make sure you have everything installed that you will need. This includes installing Node.js, npm, Git, and the Gatsby CLI (gatsby-cli). You can review the GatsbyJS documentation for help getting all of the tooling installed.

Open up a command line window and run (replacing project name with the name of the project folder you want to create):

gatsby new [project-name]

Now change into that directory by typing (replace project name with what you used in the step above):

cd [project-name]

Now start your Gatsby development server by running:

gatsby develop

You can now open a browser and navigate to http://localhost:8000 to view the Gatsby default starter homepage.

Gatsby Default Starter Site

Open up a code editor. You can use any code editor, but if you are not sure which one to use, I would recommend using VSCode.

Open up the project folder and take a look at all of the files that were created for you when you ran the gatsby new command.

Gatsby Project Structure

In the src > pages folder, open up index.js.

index.js code

You will that this is the content of your homepage. Go ahead and change some of the HTML on this page and click save. Your Gatsby website will change without you even having to refresh the page!

What we are looking at in this file is a Page Component. Notice how the HTML uses some tags that are not actually HTML tags? This HTML-in-Javascript syntax actually called JSX and is part React. JSX allows you to create your own tags which can become components in your webpages. We will cover this more in the future, but don’t be thrown off by the HTML tags you don’t understand.

That import React line is important as it is what allows this JSX syntax to work. Essentially, the markup inside that IndexPage variable will be converted to source code that browsers can interpret.

Any Javascript file created in the pages directory will end up it’s own page on your Gatsby site. For instance, open the page-2.js file in your code editor. You can navigate to http://localhost:8000/page-2 to see the page.

That’s it for this time. Next time we will talk about components, sub-components, and props.