Getting Started with Gatsby.js
Tags: react, javascript, webdev, gatsby
Published: 2021-11-04 14:54:25

**What is Gatsby?**

   Gatsby is a *static site generator*, which means that it produces *static html files* that we serve to the viewers of our application. Gatsby will not necessarily be running on our final application, however it will *GENERATE* that application that will be deployed!

Just because it's a "static" site, that does not mean the site isn't interactive or responsive. We can put *Javascript* files into the pages that Gatsby serves, make api calls, do interactions, and build rich and immersive pages.

Gatsby uses *node.js* to help generate the static files that it serves up to the user.

To source data, Gatsby uses another technology called *graphql* (graphql is a technology that makes api calls simpler and more efficient, as well as allowing us to source data from a variety of sources! This allows us to take in data from markdown files, CMS's (Wordpress, etc), access databases,  and more!

Gatsby is built on top of React, which allows us to take advantage of React's modularity and templating abilities, making it easier to keep our code organized and reusable.

Gatsby is also built with a plugin architecture in mind, allowing 
users to develop and share their own tools for everyone to use!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oit8pd1vgj8vfgk74ak.jpeg)

**Why Use Gatsby?**

- Speed
   - Since Gatsby pages are static, they are WAY faster than other options.

- Security
   - Since we are just shipping static html pages, should a hacker get into our application they will only have access to those static pages and wont be able to do as much damage compared to if they got into a Wordpress site or access to user information.

- The Dev Experience
   - Programming with Gatsby involves working with a modern development environment. Gatsby's tools are 'simple' to use (compared to more antiquated technologies), the languages are clean and tidy, and the open source, great documentation and tutorials provided by the Gatsby team and community are amazing resources.

**Getting Started**

Lets make a *basic* Gatsby app

Go into your terminal and run `npm install -g gatsby-cli`

This installs the necessary commands on your machine to create and work with a Gatsby application in the command line.

To verify the Gatsby cli has been installed, run `Gatsby --version`

If some output like 
```
Gatsby CLI version: [version number]
```
 is displayed, you're good to go!

Now to create our boilerplate Gatsby Application.
Run `gatsby new` 
You will be prompted to enter your applications name, as well as to configure a few other things.
Once that is done loading up, your app is ready to go!

Now `cd` into your newly created app, and run `gatsby develop`,
this will start your local development server for your application.
You should see this message indicating everything's up and running:

```
You can now view [YOUR-APP-NAME] in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and
schema
⠀
  http://localhost:8000/___graphql
```

Navigate to `http://localhost:8000/` in your browser, and you should be seeing your freshly generated Gatsby site!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rksff5n9gs60vzmrhtg.png)

Congratulations! You now have your own running Gatsby Application ready to be customized and flushed out to your hearts content.


Links to more sources on Gatsby
[Gatsby Home Site](https://www.gatsbyjs.com/)