Gatsby.js tutorial: Introduction and Setup

In this Gatsby.js tutorial, we have prepared the local environment to work on, installed the dependencies and created the first Gatsby project framework.

Table Of Contents:

• What is Gatsby.js
• Why it was made
• Use cases
• Prior knowledge requirements
• Setting up your workflow
• Creating your first Gatsby project

What is Gatsby.js

Gatsby.js is a static site generator with some caveats. It creates websites that do not have to communicate with other servers to request new data to update live on the website like is done with dynamic servers. Though the main caveat is that Gatsby.js can do this just in a more roundabout way as that is not the original use case for Gatsby.js

Why it was made

Gatsby.js was made to generate static sites. Static sites are helpful for a couple of reasons.

One reason is that they are more secure.
One other reason is the increased performance of the website, which often causes them to load faster than dynamic sites.
Another reason is that they tend to be easier to manage due to the reduced complexity of most situations.
Finally, static sites take in static data meaning no dynamic updates to the data, which means systems like comments are possible, but Gatsby has some solutions though not perfect.

This is for just static sites. Gatsby.js is a static site generator. It is a tool that creates static sites, specifically the pages and the content behind them, through an abstraction that makes specific tasks much more accessible.

Gatsby lets you do it with a much higher level of control on every fine detail. For example create, when creating a blog, there are many elements of each blog post that are the same; hence you could create a template out of them and then connect it to a content management system (CMS), for example, WordPress, through WordPress you could make the blog posts, and not have to worry about all other the other things that your blog posts have like links to your leading site and so on. This can be achieved through many no-code websites like Squarespace, WordPress, or anything similar without Gatsby.

Use cases

Like I said in the previous example, a prime example of using Gatsby.js could be a blog site.

A more common use case for Gatsby.js would be for a corporate website, a portfolio site, or any other situation where you have little to no user data submitted and displayed on the website. That adds a level of complexity easier with other tools.

When someone is familiar with the wide range of plugins to choose from, this wide range of plugins and other great tools has to over ends up giving a great user experience, which is reason enough to pick it other than some other technology.

Prior knowledge requirements

To start to learn Gatsby, it is important that you first have a strong grip on the fundamentals. With HTML, CSS, JavaScript, and React, though, you can also learn to React while learning Gatsby.

HTML: Which stands for HyperText Markup Language. It is used to define the structure of your website. When your first create your website, you may just start with this, but as time goes on, you will likely be adding more to it or even take a layer of abstraction back like is done with Gatsby. You would want to have a strong understanding of HTML as you often use it with JSX.

CSS: Which stands for Cascading Style Sheets. The way that you style your website dictates how it looks and can, to some extent, even add interactivity to your website. Though not as extensive as javascript for similar tasks, it works just fine, if not better. You would want to have some understanding of CSS, but it isn't vital unless you want your website to look good, which in some cases having a decent understanding is enough, and then to start branching out to libraries that make it easier.

JavaScript: The programming language that can start to truly add wizardry and magic to the webpage. Having a basic understanding of JavaScript can take you pretty far, but if you want to be able to take it to the next level, you either need to be very, very good at googling and using those results, or you need to have a deeper understanding.

React: A library built to allow you to give structure to and help you build UIs. You only need a basic understanding assuming you have the previous requirements.

There are many more tools that you likely will want to learn to effectively use Gatsby.js, like the many plugins but even more likely GraphQL, but that can come later.

Setting up your workflow

Getting started with Gatsby.js first you are going to want to install the following tools Node.js, Git, the Gatsby CLI, and VS Code.

Node.js

• Mac
  First you want to check if you have homebrew with

brew -v 

in your terminal
else install homebrew from homebrew installation guide

Then install xcode

xcode-select --install

Now you can install node.js with

brew install node

• Windows
  Download the LTS for Windows from node.js

Gatsby CLI

Download with

npm install -g gatsby-cli

And now VS Code which is a code editor which I recommend due to the many features it provides for particually web development. The download is VS Code

Creating your first Gatsby project

Now, this Gatsby project is going to barebone, but feel free to have some fun mess around and try new things and see what happens.

First, you want open VS Code and terminal in VS Code, which can be done with the Terminal Button on the top bar; you may want to learn the shortcut that tells you when holding your cursor over the button. Now in the terminal run.

gatsby new

You will be shown the following, hit enter to continue on each step

What would you like to call your site?
✔ · My First Gatsby Site

What would you like to name the folder where your site will be created?
✔ Desktop/ my-first-gatsby-site

Will you be using JavaScript or TypeScript?
❯ JavaScript
  TypeScript

✔ Will you be using a CMS?
· No (or I'll add it later)

✔ Would you like to install a styling system?
· No (or I'll add it later)

✔ Would you like to install additional features with other plugins?
· Done

And finally

Thanks! Here's what we'll now do:

    🛠  Create a new Gatsby site in the folder my-first-gatsby-site


? Shall we do this? (Y/n) › Yes

To run your site type the following

cd name-of-site

Then

gatsby develop

Your website will be opened to http://localhost:8000/

Enjoy and have some fun!