Gatsby 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:
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
- Sign in to your Google Analytics account.
- Click Admin.
- Select an account from the menu in the ACCOUNT column.
- Select a property from the menu in the PROPERTY column.
- 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.
Deploy your site using Gatsby 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!
To connect with me please check my Github, LinkedIn or Twitter.
Thank you for reading!
Top comments (2)
Cool
Extremely useful