Beginner’s Guide: Building a Website with Gatsby (Windows) (2022)

Chances are if you found this article, you probably are at least a little familiar with what Gatsby.js is; however, just in case you aren’t here’s a little bit of info on it.

Gatsby.js is a free and open-source framework built on top of React that allows you to build websites and applications, specifically PWAs, or Progressive Web Apps. In simple terms, Gatsby is a set of tools (a framework) that allows you to build websites really quickly, these websites also run extremely fast, because Gatsby will generate a static page.

Wait a minute, did he just say static? I thought static sites were for the 1990's?

I did say static; however, this doesn’t mean that Gatsby.js can’t handle dynamic data, since it’s built on React you can also pull in dynamic data, we’ll look at how to do that later in another post. For now, just take comfort in the fact that we’re going to deploy our first website with Gatsby and set up our initial environment.

I’m an engineer with a passion that involves helping others to grow. I think the best way to do that is through teaching people new things that they are interested in. This article will get you started on learning a new skill that will easily allow you to quickly create and deploy websites. The nerd challenges provided throughout the article will help reinforce your newly acquired knowledge. So let’s skip all the small talk and get to business!

First, we need to install a couple of prerequisites so we can begin developing our site with Gatsby.js. We will need the following tools:

  • Visual Studio Code (or any Integrated Development Environment/Text Editor of your choosing)
  • A GitHub Account (or any git repository)
  • Install git Command Line Interface Tool
  • Node.js with Node Package Manager (npm)
  • Gatsby.js Command Line Interface Tool

Visual Studio Code is a lightweight but awesome source code editor what I love most about it though is that it works across a variety of different platforms, which means that you can install it on Windows, Linux, or macOS.

I work on a variety of systems so whenever I can find programs that work well across platforms I tend to lean in that direction. But if you don’t want to use VSCode you can always use your Javascript IDE of choice. You can find the download to VSCode at the following URL

For purposes of this guide, we’re assuming you know how to install apps into your OS.

GitHub is a development platform that allows you to store your source code in a repository and share it with others. So basically, you can store your code on GitHub and it will always be stored there. GitHub also stores all previous versions of your code, best of all for personal use it’s free! For larger teams or projects there is also a paid/subscription version.

You can signup for a GitHub account at the following URL

Now that we’ve created a GitHub account, we need to install the git command line interface tool or git CLI. Download the Git CLI for Windows using the URL. The 64-bit version should suffice for most versions of Windows.

Double click on the file once downloaded to begin installation. The installation GUI will walk you through the process. Keep default installation parameters. Once installation is complete Git is ready to be used. Open a Command Prompt by going to the Windows Start Menu and typing CMD and pressing Enter.

We can now verify Git CLI has been installed with the following command

git --version

So, for me I’m running git version

C:\Users\chic0lindo>git --version
git version 2.24.1.windows.2

Later on we’ll learn how to connect this to our GitHub account to save our code to GitHub.com

Node.js is a JavaScript runtime that is built on Chrome’s V8 JavaScript engine and it basically allows you to run JavaScript code locally on your machine or on a server. node.

With Node.js there are two primary versions or releases that we can use. At the time of this writing there is 12.16.1 LTS or the Current branch which is 13.9.0, so what’s the difference and which one do we want? So LTS stands for Long Term Support, basically this means that the OpenJS Foundation will maintain this particular version of Node.js for a longer period of time. Opposed to the 13.9.0 (Current) version which changes and gets updated frequently.

The short answer is basically for enterprise apps you’ll probably want to use the LTS version, because it has a clearly defined extended support lifecycle with a predictable schedule. If you’re doing this for personal use or just as an MVP type product, you may want to use the current version (13). The choice is totally up to you. In this blog post we’re going to use the LTS version.

For Windows, we can install Node.js at the URL, the 64-bit version should me selected for most systems.

Double click on the file once downloaded to begin installation. The installation GUI will walk you through the process.

(Video) Getting Started with Gatsby: Building Your Portfolio Site

Open a Command Prompt by going to the Windows Start Menu and typing CMD and pressing Enter.

We can now verify that Node.js has been installed correctly with the following commands

npm --version 
node -- version

Your output from those commands should look something like this

C:\Users\chic0lindo>node --version
v12.16.1
C:\Users\chic0lindo>npm --version
6.13.4

Great! So far we’ve installed our IDE (VS Code), set up our GitHub Account and installed git, and installed Node.js, now we’re ready to install Gatsby so we can finally launch our initial site! w00t! :D

Next, we’re going to install the Gatsby CLI so we can create a Gatsby.js site! To do this we’re going to use npm, which stands for Node Package Manager. This tool allows you to install Javascript software and it manages the overall package

To install Gatsby CLI we can run the following command in Command Prompt

npm install -g gatsby-cli

Once the install is complete, verify with the following commands

gatsby --version

Your output from this command should look something like this

Gatsby CLI version: 2.10.0

So, we’ve been building up to it, and now the moment has finally arrived. We’re ready to launch our first Gatsby site! Let’s do this in VS Code so you can start to get used to the IDE. Open up VS Code.

Once VS Code is open you’ll click on Open Folder and open up any directory where you want the site installed, so if you don’t have a spot you’ll need to make a folder somewhere. I’ve created a temp directory.

Beginner’s Guide: Building a Website with Gatsby (Windows) (1)

Once you’ve opened the folder go ahead and open a terminal window, to do this you can click on terminal and then New Terminal or you can use the Shortcut (Ctrl+Shift+`)

Beginner’s Guide: Building a Website with Gatsby (Windows) (2)

Once the terminal is open we can use the Gatsby CLI to build our initial site! Run the following command

gatsby new my-first-gatsby-site https://github.com/gatsbyjs/gatsby-starter-default

So, let’s take a look at that above command so we can better understand what it does exactly. The first word, gatsby, simply just calls the gatsby CLI tool so we can use it.

The next word is new. new allows you to create a new Gatsby.js project

my-first-gatsby-site is the name of the folder you want the new command to create, so we could have this be the name of our site, or whatever we want.

The last option allows us to point to a Gatsby.js template, here we’re using the default starter for Gatsby; however, there are hundreds of really cool starter templates that you can use, you can find them here

Library

Gatsby Starters: Library

www.gatsbyjs.org

(Video) Gatsby Tutorial #1 - What is a Static Site Generator?

So, basically this is going to create all of our initial source code for running our site locally. Now we have all of the files and everything we need to start our initial Gatsby site!

Let’s go ahead and move into that directory by typing the following

cd my-first-gatsby-site

Once inside the directory, we can launch the website by typing

gatsby develop

The Gatsby CLI tool will then build our site and run a small server so we can do development! Awesome right?!? 😁 Once it’s done compiling you can then go to the site by visiting http://localhost:8000/

Beginner’s Guide: Building a Website with Gatsby (Windows) (4)

Nerd Challenge #1

Try to change the ‘Hi people’ text above to ‘This is Awesome! #NerdChallenges’

So we have the site running locally, what if our laptop dies or whatever we’re using to develop the site? Then we’d lose all of our work! GitHub to the rescue. Let’s see how we can save our changes to our GitHub account.

So the first thing I need to do is create a repository on GitHub, I can do this by logging into https://github.com and clicking the Plus icon in the top right and new repository. I’m then going to give my repository the following settings, you can feel free to change these to suit your needs

  • Repository name: my-first-website-with-gatsby
  • Description: My first gatsby site for medium.com
  • Public repository (Note: this means that all of my code will be available for public consumption. If you prefer to keep it private then feel free to choose that option)

Beginner’s Guide: Building a Website with Gatsby (Windows) (5)

So now we have the repository set up, let’s connect our local machine to it so we can upload our Gatsby.js files, in your VS Code terminal type in the following

(Note: you may still have the server running, to kill it you can press Ctrl+C )

git init

Our folder has now been initialized to use git, now we need to tell git what files we want it to add and track in our repository. Type the following

git add .

This tells git to add all of the files we currently have in our directory, to double-check to make sure git is tracking these files we can type

(Video) Gatsby - Full Tutorial for Beginners

git status

and hopefully you should see a list of all the new files to be added. Before we commit our changes locally, first we need to add our git profile information.

First, enter your email and run the command.

git config --global user.email "you@example.com"

Next, run the command for your name.

git config --global user.name "your name"

Now that git is tracking these files we need to commit (save) our changes, to do this, run

git commit -m "My first Gatsby site with GitHub"

This saves our changes to git locally, but we now want to upload or push them over to GitHub.com, to do this we need to tell our local git where we want to push these items to. For me this will be the following location https://github.com/chic0lindo/my-first-gatsby-site.git however, for you it will be different.

git remote add origin https://github.com/chic0lindo/my-first-website-with-gatsby.git

Now that we’ve told our git CLI where we are going to save the files to, we can finally push. To do this run the following command

git push -u origin master

You’ll be prompted for your GitHub credentials, put them in and the files will be uploaded to GitHub.com!

Beginner’s Guide: Building a Website with Gatsby (Windows) (6)

Note: You can get all these commands from GitHub.com after creating your repository, take a look at this screenshot.

Beginner’s Guide: Building a Website with Gatsby (Windows) (7)

Now if in our browser we go to GitHub.com we should be able to see our first repository!

Beginner’s Guide: Building a Website with Gatsby (Windows) (8)

Nerd Challenge #2

So we’ve done our first push using the git CLI tool. Try and figure out how to do this with Visual Studio Code using the IDE (without using terminal). #NerdChallenges

Nerd Challenge #3

I purposefully glossed over a couple of keywords in the commands above such as origin and master. Try and figure out what these mean and what they do. #NerdChallenges

We have set up a number of tools here today. From setting up our IDE, installing Gatsby CLI, Node.js, git, creating our GitHub account and pushing some code up to the service as well. We also set up some challenges which hopefully you were able to figure out (if not no worries, I’ll show you how to do these things at some point in the future 😀)

You may be wondering okay great, I have a website but it’s not up and running anywhere and I don’t have a domain name or anything else! Don’t worry I’m going to save this for a future blog post. For now, just take comfort in the fact that you can now develop sites locally and save them to a GitHub repo.

I hope you enjoyed the post and feel free to reach out to me Rico Reid if you have any questions. Happy to help!

Nerd Challenge #1

Try to change the ‘Hi people’ text above to ‘This is Awesome! #NerdChallenges’

(Video) Gatsby #2: Starting a New Gatsby Project

Nerd Challenge #2

So we’ve done our first push using the git CLI tool. Try and figure out how to do this with Visual Studio Code using the IDE (without using terminal). #NerdChallenges

Nerd Challenge #3

I purposefully glossed over a couple of keywords in the commands above such as origin and master. Try and figure out what these mean and what they do. #NerdChallenges

FAQs

How do I create a website with Gatsby? ›

Installation, Creation
  1. Install Gatsby globally with npm install -g gatsby-cli .
  2. To create a new website, run gatsby new {your-project-name} {link-to-starter} ( {link-to-starter} can be omitted)
  3. Run the server with gatsby develop .
Oct 13, 2020

What are Gatsby sites for? ›

Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more to ensure your site is fully optimized. No manual tuning required.

How do you code Gatsby? ›

If you prefer to jump straight to code, feel free to skip to the quick start.
  1. Set Up Your Development Environment→ ...
  2. Create and Deploy Your First Gatsby Site→ ...
  3. Use and Style React Components→ ...
  4. Add Features with Plugins→ ...
  5. Query for Data with GraphQL→ ...
  6. Transform Data to Use MDX→ ...
  7. Create Pages Programmatically from Data→

Can Gatsby replace WordPress? ›

headless WordPress. Gatsby is another technology that makes static WordPress or a static alternative to WordPress possible.

How does Gatsby create a static website? ›

Static site generators, on the other hand, generate HTML pages during a build process. Gatsby, for example, loads JSON from GraphQL, and merges that data with components to create HTML pages. These generated pages are then deployed to a web server. When the server receives a request, it responds with rendered HTML.

How would you create a page in a Gatsby app? ›

Pages can be created in three ways:
  1. By creating React components in the src/pages directory. (Note that you must make the component the default export.)
  2. By using the File System Route API to programmatically create pages from GraphQL and to create client-only routes.
  3. In your site's gatsby-node.

Is Gatsby JS free? ›

Gatsby is a free, open-source, React-based framework designed to help developers build performant websites and apps. Put simply, Gatsby is a static site generator that leverages React.

Is Gatsby a CMS? ›

With plugins, Gatsby supports several headless CMS services, including Contentful, Ghost and Prismic. If you use WordPress, there's no need to switch. You can use WordPress' REST API as a headless CMS, so that your content team can continue to use the editing tools with which they're familiar.

What does Gatsby build do? ›

gatsby build creates a version of your site with production-ready optimizations like packaging up your site's config, data, and code, and creating all the static HTML pages that eventually get rehydrated into a React application.

Videos

1. How to Build a Blog with GatsbyJS and Wordpress (JAMstack Tutorial)
(notJust․dev)
2. Livestream | Learn Gatsby: How to Build Your First Gatsby Blog
(Gatsby)
3. Getting Started with Gatsby.js
(New Pragmatic)
4. GatsbyJS basics: How to install the Gatsby cli
(Will Christian)
5. Gatsby Wordpress full course 2021 | Gatsby for beginners | Wordpress as a headless CMS
(Weibenfalk)
6. Gatsby Tutorial #2 - Starter Sites
(The Net Ninja)

You might also like

Latest Posts

Article information

Author: Ray Christiansen

Last Updated: 08/24/2022

Views: 6123

Rating: 4.9 / 5 (49 voted)

Reviews: 80% of readers found this page helpful

Author information

Name: Ray Christiansen

Birthday: 1998-05-04

Address: Apt. 814 34339 Sauer Islands, Hirtheville, GA 02446-8771

Phone: +337636892828

Job: Lead Hospitality Designer

Hobby: Urban exploration, Tai chi, Lockpicking, Fashion, Gunsmithing, Pottery, Geocaching

Introduction: My name is Ray Christiansen, I am a fair, good, cute, gentle, vast, glamorous, excited person who loves writing and wants to share my knowledge and understanding with you.