Creating Your First Gatsby Site
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:
- Creating a new Gatsby Site
- Learning about JSX
- 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):
Now start your Gatsby development server by running:
You can now open a browser and navigate to http://localhost:8000 to view the Gatsby default starter homepage.
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.
In the src > pages folder, open up index.js.
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!
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.
That’s it for this time. Next time we will talk about components, sub-components, and props.