The Great Gatsby Introduction

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

📣 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, 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 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.

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 (more details on this in the next article)

Gatsby CLI

The Gatsby CLI 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 so you don't have to install Gatsby globally and prefix the gatsby commands with npx. (Example: npx gatsby develop.)
CLI CommandOutcome
gatsby developStarts the development server. Watches files, rebuilds, and hot reloads if something changes.
gatsby buildCompiles the application and makes it ready for deployment. Static files are generated and bundled in the /public directory.
gatsby serveServe 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 cleanWipe 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 newEx: 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 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 to choose from that cover a variety of scenarios.

Screen Shot 2020-11-15 at 9.48.59 PM.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
  3. cd into the new project directory and run gatsby develop to start the development server.

  4. Navigate to 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

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 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

Skay's photo

Great post Alyssa 🙌🙂 my current blog skay.dev is built using Gatsby and Strapi and loved Gatsby to bits. However, I didn't get enough time to dig into the framework as such. Hoping that i get sometime in the near future and also wanna take a good luck at next.js.

Alyssa Holland's photo

I love the look of your website! That light blue happens to be one of my favorite colors!

I recently used Gatsby to revamp my website at alyssaholland.com. I’m using this blog series as a way to fine tune what I learned so hopefully it can be helpful to you and others 🙂

Rahul's photo

Waiting to see more posts on this. Like adding features on gatsby website.

  • Disqus comments
  • in blog search feature
  • subscribe to blog feature