Getting started with Gatsby
Tags: react, gatsby, javascript, tutorial
Published: 2021-01-24 06:23:55


[Gatsby](https://www.gatsbyjs.com/) is a React-based open-source framework for creating websites and apps. It's **the #1 fastest growing framework**, great whether you're building a portfolio site or blog, or a high-traffic e-commerce store or company homepage.

# Let's start
#### 1. Create a new site

`npm init gatsby`

Follow the prompts to choose your preferred CMS, styling tools, and additional features:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7uziwyr4wy7nnnf9clfz.png)

#### 2. Start the local development server

Start by going to the directory with `cd my-gatsby-site`
and start the local development server with:
```
npm run develop
```

Gatsby will start a hot-reloading development environment accessible by default at http://localhost:8000. Usually, `npm run develop` command can be used to build your site into development mode without any issues. But, sometimes errors happen and didn't work for me right away, I get this error returned:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cnx256s55b56ew1sdebb.png)

This error tells that `"trackingId"` can't be set as empty... 

```
Invalid plugin options for "gatsby-plugin-google-analytics":
- "trackingId" is not allowed to be emptySetting up Google Analytics
```
We use `gatsby-plugin-google-analytics` to track site activity and provide insights into how users access your website.

### Let's get your Google Analytics `trackingId`
1. Sign in to your Google Analytics account.
2. Click Admin.
3. Select an account from the menu in the ACCOUNT column.
4. Select a property from the menu in the PROPERTY column.
5. Under Property, click Tracking Info > Tracking Code. Your Tracking ID is displayed at the top of the page.

Once you get `trackingId` go to your gatsby-config.js file and replace it:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zjdtjuf6k384rd7egzd2.png)

Run `npm run develop` and Gatsby will start a development environment accessible by default at http://localhost:8000 mine looked like this: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/km96x6at6k7xsxr8xx8f.png)


#### 3. Make changes 
Now you’re ready to make changes to your site by editing the home page in `src/pages/index.js`, saved changes will live reload in the browser.

This was a quick start, for intermediate to advanced developers. For a gentler intro to Gatsby and more details check this [tutorial](https://www.gatsbyjs.com/tutorial/).

## What’s next?
#### Add more [features](https://www.gatsbyjs.com/docs/recipes/) 
Install and configure additional plugins to quickly add additional functionality to your site.

#### Deploy your site using [Gatsby Cloud](https://www.gatsbyjs.com/cloud/). 




Can't wait to connect with Gatsby community members from all over the world and learn about the newest developments from the Gatsby team, **March 2-3, 2021**  **ONLINE**, [Join me here!](https://gatsbyconf.com/https://ctt.ec/cdhcQ+ )

To connect with me please check my [Github](https://github.com/ivanadokic), [LinkedIn](https://www.linkedin.com/in/ivana-dokic/) or [Twitter](https://twitter.com/LloydPile). 

Thank you for reading!