Getting Started with Gatsby.js

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!

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!

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