Getting started with Gatsby

Getting started with Gatsby:

Let’s Start

1. Create a new site

npm init gatsby

Follow the prompts to choose your preferred CMS, styling tools, and additional features:

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:

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:

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

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.

What’s next?

Add more features

Install and configure additional plugins to quickly add additional functionality to your site.

from Tumblr https://generouspiratequeen.tumblr.com/post/641304219049197568

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s