Getting Gatsby installed and running

Gatsby is a great tool, and as the documentation says, a blazing fast modern site generator for React. As an example, this website is built using Gatsby. Here, we will run through getting Gatsby installed and using it, as opposed to setting up a Gatsby project.

Installation steps

If you are on Windows, I highly recommend installing Chocolatey or Scoop as it will make the following installations much easier and a bit more Unix like. You could read a lot about the differences in these programs, so I guess just pick the one you like the look of!

1. Install node.js, a javascript runtime, following the official docs to install via a package manager. I ran into an error with node not correctly adding to my bash startup files. If you find the same, copy the relevant output from the installation to a bash startup and source the same file. However, on Linux, it is probably just as easier to install from the binary archive
2. I would suggest also installing yarn, a cool package manager following the instructions on the official docs. As an example, for Chocolatey these commands are

choco install nodejs.install
choco install yarn

3. Install the Gatsby Command Line Interface (CLI).

npm install -g gatsby-cli

4. Optional step, if you don’t have a project you want to work from as a template (for example Michael Rose’s website or a Gatsby starter) and you want to try Gatsby, run the below. This will use the default Gatsby starter to get you going. Note that on Windows Powershell Gatsby may not be digitally signed, in which case you would need to run Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass.

gatsby new gatsby-site

4. Start developing with gatsby. This will start a hot-reloading development environment at http://localhost:8000.

gatsby develop

5. When you have finished developing, create an optimised build and view it

gatsby build
gatsby serve

Publish to Netlify

With very little extra effort you can publish your Gatsby site to Netlify. Simply create a profile and import your project into Netlify. Netlify will generally recognise that this is a Gatsby project and set the build script accordingly. All you need to do for a successful build is add any environment variables to Netlify. Go ahead and add a Netlify badge to your project README, you’ve earned it.

Further Reading

• Check out Gatsby’s own tutorials over at https://www.gatsbyjs.org/docs/. This guide is more in line with their quick start guide.
• Read about JAMSTACK and other alternatives tools for making static websites.
• Read about Staticman (not to be confused with Marvel’s Dynamic Man). Its a way to add user-generated content to a static website, it is pretty cool. There is a nice blog post about setting it up here.