How to set up your local development environment to work with Gatsby. Great for beginners, or for setting up a new computer or development workstation.
Setting up your development environment makes your workflow faster. Let's check that our setup is optimized and up-to-date for building sites with Gatsby.
I use a Mac. If you use Linux, you can follow along. If you use Windows, this process is probably very different.
There's a few things we need to make sure we have installed. We can check that they are installed by requesting the version for each — if it is installed, a version number will show up. If it's not installed, then follow the directions for each.
Let's open up our terminal!
Chances are, if you're already a developer, you already have most (or all) of these installed. If you do, then go ahead and update them.
Hombrew is a package manager — it helps install all the necessary things we need to use.
brew update node
brew install nodeor nodejs.org
Node Package Manager (usually just npm) is installed with Node, so if you're following along, you already have it.
brew update npm
Git is a version control system. It helps manage changes in your project.
brew update git
You'll probably need Gatsby to be able to build websites with Gatsby.
npm install -g gatsby-cli
Let's create a first starter site.
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
This will install the starter
Hello, World! site in the
hello-world directory it will create.
cd hello-world gatsby develop
Then, we move into
hello-world, and start up the development server. This development server is live-updated each time you save any files.
localhost:8000is the default address where you can view the server.
gatsby developstarts the development server.
control + cstops the development server.
Installing a starter follows the syntax:
gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
Then open up
localhost:8000 to view locally.
gatsby develop runs a local development server, and on save, re- builds the necessary elements. To publish the site, we need to compile it.
gatsby build will compile all the files into the folder
[directory]/public. This is the folder that will be copied or deployed to a hosting provider.