An Ultimate Guide To Gatsby - Everything You Need To Know Before Starting with Gatsby
Tags: javascript, gatsby, programming, tutorial
Published: 2021-09-02 05:07:49

Gatsby websites are getting popular day by day. Nowadays most of the popular websites use Gatsby because of its speed, SEO and etc, and if you don't know anything about Gatsby, It is probably worth learning it in 2021. 

## Table of contents

- [What is Gatsby?](#what-is-gatsby)
- [What are Static Sites?](#what-are-static-sites)
- [Why you should consider using Gatsby?](#why-you-should-consider-using-gatsby)
  - [SEO](#seo)
  - [Plugins](#plugins)
  - [Speed](#speed)
  - [Templates](#templates)
- [Why should you avoid Gatsby?](#why-should-you-avoid-gatsby)
  - [Build Time](#build-time)
  - [Dynamic Websites](#dynamic-websites)
  - [Complex sites](#complex-sites)
- [Set Up Your First Gatsby Website](#set-up-your-first-gatsby-website)
  - [Installing Gatsby CLI](#installing-gatsby-cli)
  - [Starter Templates](#starter-templates)
  - [Run your app locally](#run-your-app-locally)
- [Deploying Website To Netlify](#deploying-website-to-netlify)
- [Conclusion](#conclusion)

## What is Gatsby?

GatsbyJS is a React-based, GraphQL powered static site generator. Gatsby is an open-source framework that combines functionality from React, GraphQL, and Webpack into a single tool for building static websites and apps. Although the term "static site generator" has been around for a while, Gatsby is more akin to a modern front-end framework than a traditional static site generator.

## What are Static Sites?

Static websites have existed for a long time. They're most likely the initial website, with only HTML, CSS, and JavaScript. They aren't rendered in real-time because there isn't any server-side programming, no database, and so on.

A static site generator is a tool that creates static web pages. JS frameworks and libraries, on the other hand, typically produce HTML content on the client-side during runtime. This material is generated by static site generators while the site is being built. Then, after it's loaded, React takes over, and you've got yourself a single-page app!

## Why you should consider using Gatsby?

### SEO

The use of GatsbyJs allows your websites to make use of several of the internal code's optimization strategies. As a result, search engines will rank your website higher. There are a number of plugins that can assist you with this.

### Plugins

Gatsby has some amazing plugins which can help your website in different aspects. You can install these plugins using NPM or Yarn. 

Some of the popular plugins are Source File-System, Contentful, Plugin Sharp and etc. You can find all plugins on their official website [here](https://www.gatsbyjs.com/plugins).

### Speed

Gatsby sites are much faster than many of the alternatives, even compared to cached sites using WordPress and things like that because that static site is really hard to beat in terms of its speed and performance.

### Templates

There are enough GatsbyJs Starter repositories and templates available that cloning and altering the content is straightforward. This allows you to quickly and efficiently construct websites such as your blog or your portfolio.

## Why should you avoid Gatsby?

### Build Time

As the amount of content on your website grows, so does the time it takes to produce it. This is not only inconvenient during development, but it also wastes time when it comes to deployment. Gatsby is not advised if you want to create a site that changes frequently.

### Dynamic Websites

Sites with a lot of dynamically produced routes, because you won't be able to reap the benefits of statically generated pages if you don't know what they are at the time of construction.

### Complex sites

Because complex sites expand quickly and take a long time to build, they are continuously adding new pages and material. Although many e-commerce companies can and do employ statically created sites, if build time becomes an issue, it is most likely time to abandon them in favor of dynamically generated sites like Gatsby.

## Set Up Your First Gatsby Website

### Installing Gatsby CLI

The first step is to install Gatsby CLI, You can create and modify a new site using the Gatsby command-line interface. To install Gatsby CLI, simply run : 

```bash
npm install -g gatsby-cli
```

The `-g` argument indicates that the Gatsby command-line interface is being installed globally rather than locally. As a result, you'll be able to utilize the tool in any directory.

### Starter Templates

As I mentioned previously that you don't need to create a website from scratch, instead we can use some starter templates which can be found on Gatsby's official website. 

For this tutorial, we will use `gatsby-starter-default` to do that, run the below command on your terminal. 

```bash
gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default
```

`gatsby new` creates a new website. You'll get a barebones site if you utilize gatsby new on its own. Combining gatsby new with a starter template is the most typical approach to use it.

### Run your app locally

Once it is done, you should see a message that Gatsby site has been successfully bootstrapped. Now run 

```bash
cd gatsby-starter-default && gatsby develop
```

This command with navigate to our new gatsby folder and initialize files, so that we can view it locally. Open your browser and navigate to `http://localhost:8000/`, You should see a default stater page, just like image below.

![Gatsby Default Template](https://cdn.hashnode.com/res/hashnode/image/upload/v1630556437929/UvPkbP0MT.png?auto=compress)

It's critical to arrange your website's metadata correctly if you want a search engine to find your website. The gatsby-config.js file allows you to customize your website's data.

In order to make your website accessible for everybody around the globe, you need to deploy your website in a hosting service. You can deploy a Gatsby website to Netfliy, Vercel, Azure, Gatsby Cloud, Heroku, AWS, IIS, Firebase and etc. But for this example, we will use Netlify

## Deploying Website To Netlify

Before deploying our website, first, we need to generate a build folder that contains static files. To do that run 

```shell
gatsby build
```

Once it is completed, You should see a folder named `public`. That is it, We need only that folder to deploy in Netlify.

Go to [Netlify](https://www.netlify.com/) website and if you don't have an account, click on the signup button and create an account. Don't worry, Netfliy is free hosting and it won't charge you anything. Once you registered, you should be redirected to Netfliy dashboard, which will look like this. 

![Netlify Dashboard](https://cdn.hashnode.com/res/hashnode/image/upload/v1630557032763/BJR3s93Hq.png?auto=compress)

Now click on sites on the Netlify menu, and you should see a page with a text "Want to deploy a new site without connecting to Git? Drag and drop your site output folder here" . Drag and drop your public folder on that placeholder, Wait for a while and then your website will be deployed on Netfliy.  If it is deployed successfully you should see something similar to the below image. 

![Netlify Dashboard](https://cdn.hashnode.com/res/hashnode/image/upload/v1630557480458/c6_KmJUyK.png?auto=compress)

## Conclusion 

I hope you found this article helpful. If you need any help please let me know in the comment section. 

Would you like to buy me a coffee, You can do it [here](https://www.buymeacoffee.com/suhailkakar).

Let's connect on  [Twitter](https://twitter.com/suhailkakar)  and  [LinkedIn](https://www.linkedin.com/in/suhailkakar/). 

👋 Thanks for reading, See you next time