How to Install GatsbyJS: A Complete Beginner’s Guide
GatsbyJS is a popular React-based open-source framework for building blazing fast static websites and apps. This guide will take you through the installation process step-by-step to set up Gatsby on your local machine and create your first project. Whether you are new to Gatsby or frontend development, this tutorial is beginner-friendly and will help you get started quickly.
Prerequisites
- Node.js: Gatsby requires Node.js. Install the latest Long-Term Support (LTS) version from the official Node.js site (Official site).
- npm or yarn: npm comes bundled with Node.js. Yarn is an alternative package manager you can use.
- Basic command line knowledge: Familiarity with terminal/command prompt is helpful but not mandatory.
- Code editor: Install a code editor like Visual Studio Code for editing your Gatsby project files.
Step 1: Verify Node.js and npm Installation
Open your terminal or command prompt and run the following commands to check if Node.js and npm are installed:
node -v
npm -v
You should see version numbers for both Node.js and npm. If not, install Node.js from the link above and try again.
Step 2: Install Gatsby CLI
The Gatsby CLI tool helps create new projects and manage Gatsby sites. Install it globally via npm with:
npm install -g gatsby-cli
After installation, verify it works by checking its version:
gatsby --version
Step 3: Create a New Gatsby Project
Navigate to the folder where you want your project located and run:
gatsby new my-gatsby-site
This command downloads the default starter and creates a new folder called my-gatsby-site with all the base files.
Step 4: Run Your Gatsby Development Server
Go to your project directory and start the development server:
cd my-gatsby-site
gatsby develop
Open http://localhost:8000 in your browser, and you will see the default Gatsby starter site running.
Troubleshooting Common Issues
- Gatsby command not found error: Make sure
gatsby-cliinstalled globally with npm and your system PATH is updated. - Node version incompatible: Gatsby may require Node.js v16 or later. Use
nvm(Node Version Manager) to switch versions if needed. - Port 8000 in use: If another service occupies port 8000, specify a different port with
gatsby develop -p 9000.
Summary Checklist
- ✅ Installed Node.js and npm
- ✅ Installed Gatsby CLI globally
- ✅ Created new Gatsby project with
gatsby new - ✅ Ran Gatsby development server successfully
Now you have a GatsbyJS environment ready to build powerful and speedy websites. To explore further, check out tutorials on <a href="/
About the Author
