How to Install the Theme

This guide will help you set up your development environment and run GatsbyCar on your computer. If you are new to web development, do not worry — every step is explained in detail.

What You Need Before Starting

Make sure you have:

• A computer running Windows, Mac, or Linux
• An internet connection
• About 30 minutes of free time
• The GatsbyCar source code folder (from Documentation 1)

Step 1: Install Node.js

Gatsby requires Node.js version 18 or higher. Node.js is a runtime that allows you to run JavaScript outside the browser.

Download Node.js:

1. Open your browser and go to https://nodejs.org
2. You will see two download buttons: LTS and Current
3. Click the LTS button (LTS means Long Term Support — it is the most stable version)
4. The installer will download automatically

Install Node.js:

1. Open the downloaded installer file
2. Follow the installation wizard
3. Accept the license agreement
4. Keep all default settings
5. Click Install
6. Wait for the installation to complete
7. Click Finish

Verify the installation:

1. Open your terminal

   • Windows: Press Windows key, type cmd, press Enter
   • Mac: Press Cmd + Space, type terminal, press Enter
   • Linux: Press Ctrl + Alt + T

2. Type the following command and press Enter:

node -v

You should see something like v18.17.0 or higher. If you see an error, Node.js is not installed correctly.

3. Type the following command and press Enter:

npm -v

You should see something like 9.6.7 or higher. npm comes bundled with Node.js.

Step 2: Install VS Code

VS Code is a free code editor that makes editing your theme easy. You will use it to open the project folder and run terminal commands.

Download VS Code:

1. Open your browser and go to https://code.visualstudio.com
2. Click the Download button for your operating system
3. The installer will download automatically

Install VS Code:

1. Open the downloaded installer
2. Follow the installation wizard
3. Accept the license agreement
4. Keep all default settings
5. Click Install
6. Wait for the installation to complete
7. Click Finish

Step 3: Open the Project Folder in VS Code

1. Open VS Code
2. Click File in the top menu
3. Click Open Folder
4. Navigate to the folder where you extracted GatsbyCar
5. Select the folder and click Select Folder

The folder will open in VS Code. On the left side, you will see the file structure:

• src/ — source code
• content/ — content files
• static/ — static files
• package.json — dependencies
• gatsby-config.js — configuration
• and other files

Step 4: Open the Terminal in VS Code

VS Code has a built-in terminal. This is where you will run commands.

1. In VS Code, click Terminal in the top menu
2. Click New Terminal
3. A terminal panel will open at the bottom of VS Code

You can also use a keyboard shortcut:

• Windows / Linux: Ctrl + backtick
• Mac: Cmd + backtick

The backtick key is usually located below the Escape key.

Step 5: Install Dependencies

Now you need to install all the packages that GatsbyCar requires.

In the terminal, type:

npm install

Press Enter. This will download all required packages from the npm registry.

You will see a progress bar. The installation may take 2 to 5 minutes depending on your internet speed. Wait until it finishes.

When complete, you will see a message like:

added 1547 packages in 3m

If you see errors, check the Common Issues section below.

Step 6: Start the Development Server

After the installation completes, type:

npm start

Press Enter. Gatsby will start the development server.

You will see output like:

success open and validate gatsby-configs - 0.054s
success load plugins - 1.196s
success onPreInit - 0.024s
success initialize cache - 0.138s
success createSchemaCustomization - 0.013s
success source and transform nodes - 0.654s
success building schema - 0.415s
success createPages - 0.112s

You can now view gatsbycar in the browser.

  http://localhost:8000/

The line http://localhost:8000/ is your local website address. localhost means your own computer.

Step 7: View Your Website

1. Open your browser
2. Type http://localhost:8000 in the address bar
3. Press Enter

You will see the GatsbyCar theme running on your computer. This is your live preview. Any change you make to the code will refresh automatically.

Step 8: Stop the Development Server

When you are done working, go back to the terminal in VS Code and press:

Ctrl + C

This stops the development server. You can restart it anytime by typing npm start again.

Common Issues and Solutions

Issue: "node: command not found" or "npm: command not found"

This means Node.js is not installed or not added to your system PATH.

Solution:

1. Reinstall Node.js from https://nodejs.org
2. During installation, make sure "Add to PATH" is checked
3. Restart your computer
4. Try again

Issue: "npm install" fails with permission errors

On Mac or Linux, you may need to run with elevated permissions.

Solution:

sudo npm install

On Windows, run VS Code as Administrator.

Issue: "npm install" fails with network errors

Your internet connection may be unstable.

Solution:

1. Check your internet connection
2. Try again
3. If it keeps failing, use a different network

Issue: Port 8000 is already in use

Another application is using port 8000.

Solution:

npm start -- --port 8001

Then open http://localhost:8001 instead.

Issue: "gatsby: command not found"

Gatsby CLI is not installed globally.

Solution: You do not need it. Use npm start instead, which calls Gatsby locally.

Issue: Changes don't appear in browser

Solution:

1. Refresh the browser
2. Check the terminal for errors
3. Restart the development server with Ctrl + C then npm start

What Is Happening Behind the Scenes

When you run npm start, Gatsby does the following:

1. Reads all content files (JSON, Markdown)
2. Builds a GraphQL schema from your data
3. Creates pages for each car and blog post
4. Compiles React components
5. Starts a local web server on port 8000
6. Watches for file changes and rebuilds automatically

This is called development mode. When you are ready to publish, you will run npm run build to create the production version.

Next Step

Your theme is now running locally. Proceed to the next documentation:

Initial Configuration

Need Help?

If you get stuck, contact us:

• Email: creativebydre@gmail.com
• Custom project: https://www.fiverr.com/creativitas/create-your-custom-website-and-app