# The Great Gatsby Introduction

> 📣 This is the first article in my new "Getting Started with Gatsby" series. This post will provide a gentle introduction to Gatsby. By the end of this series, you will learn how to deploy a Gatsby site using Netlify. 

# What is Gatsby?
Gatsby is an [open sourced](https://github.com/gatsbyjs/gatsby), static site generator (SSG) that can be used to build websites and applications. Unlike content management systems (CMS), static site generators generate HTML, CSS, JS, and other static assets during a [build](https://www.gatsbyjs.com/docs/glossary/#build) process.

> A static site generator is a software application that creates HTML pages from templates or components and a given content source...Static site generators are an alternative to database-driven content management systems, such as WordPress and Drupal.  
- [Gatsby Docs](https://www.gatsbyjs.com/docs/glossary/static-site-generator/#what-is-a-static-site-generator) 

# Why Gatsby?
These are some benefits of using Gatsby:
- **Improves developer experience** - Allows you to program in React and utilize the modularity of components.
- **Speed** - Because you are only loading up HTML, CSS, and JS at the end of the day, and don't have to deal with dynamically adding content like you would with a CMS, sites built with Gatsby are typically faster.
- **Improved security** - the web server only has to serve up the static files that are generated during the build process so there is no risk from dynamically fetching content from a database.
- **Ability to leverage version control for all aspects of your project** 
- **Built-in  [routing](https://www.gatsbyjs.com/docs/routing/) ** (more details on this in the next article)

# Gatsby CLI
The  [Gatsby CLI](https://www.gatsbyjs.com/docs/gatsby-cli/#api-commands) lets you quickly create new Gatsby-powered sites and run commands for developing Gatsby sites. You can run the Gatsby CLI in one of two ways:
  1. Install Gatsby globally via npm: `npm install -g gatsby-cli`
  2. Use [npx](https://nodejs.dev/learn/the-npx-nodejs-package-runner) so you don't have to install Gatsby globally and prefix the gatsby commands with `npx`. (**Example**: `npx gatsby develop`.)

| CLI Command        |           | Outcome  |
| ------------- |-------------| -----|
| `gatsby develop`| | Starts the development server. Watches files, rebuilds, and hot reloads if something changes.|
| `gatsby build`     |  | Compiles the application and makes it ready for deployment. Static files are generated and bundled in the `/public` directory. |
| `gatsby serve`     |    |  Serve the production build of your site for testing. Run this after _building_ your site to test what your site will look and act like in Production.|
| `gatsby clean` |    |  Wipe the local gatsby environment including built assets and cache. This is useful as a last resort when your local project seems to have issues or content does not seem to be refreshing. |
|`gatsby new`| | **Ex:** `gatsby new <site-name> <starter-url>`. This command creates a new Gatsby site based on the starter you provide it, or the [gatsby-starter-default](https://github.com/gatsbyjs/gatsby-starter-default) if you omit the starter-url. |

# Starters

A starter is simply a boilerplate project that you can leverage to get you up and running quicker with Gatsby. There are [tons of starters](https://www.gatsbyjs.com/starters?v=2) to choose from that cover a variety of scenarios. 

![Screen Shot 2020-11-15 at 9.48.59 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605494972983/uAp91PIVi.png)

# A Basic Site
Now that you know what starters are, let's go through some steps to show you how to run a starter project on your local environment.

1. Open up the terminal and `cd` into the folder you want your project files to be placed.
2. Run `gatsby new <site-name> <starter-url>` to create a new site from a starter like so:
  - Ex. `gatsby new my-gatsby-project https://github.com/gatsbyjs/gatsby-starter-blog`
    - Based on [this starter](https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-blog/)

3. `cd` into the new project directory and run `gatsby develop` to start the development server.

4. Navigate to http://localhost:8000/ in your browser and you should now see the starter you selected being displayed.


![Screen Shot 2020-11-15 at 10.56.38 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605499198215/dxci0_mJ7.png)

# El Fin 👋🏽
In this lesson, we learned what Gatsby is, the benefits of using it, and how to use a starter to set up a site on a local environment.

For the  [second article](https://blog.alyssaholland.me/making-modifications-to-a-gatsby-site)  in the "**_Getting Started with Gatsby_**" **series**, I will cover how to make modifications to a starter site and provide a ton of examples that will equip you to customize your site to suit your needs. 

Thanks for reading and stay tuned for the next one!

### Resources
-  [Gatsby Tutorials - 0. Set Up Your Development Environment](https://www.gatsbyjs.com/tutorial/part-zero/) 
-  [Commands (Gatsby CLI)](https://www.gatsbyjs.com/docs/gatsby-cli/#api-commands) 
- [David Walsh - An Introduction to Static Site Generators](https://davidwalsh.name/introduction-static-site-generators)