Useful GatsbyJS commands for beginners

GatsbyJS is a static website generator. It is built on top of React and you can create blazingly fast websites with Gatsby. And I really mean it. I have been using Gatsby for close to a year. Apart from basic website features and the ability to develop a website quickly, it has some fantastic integrations with tools like GraphQL, has super performance optimizations underneath and an awesome community. Let’s look at a few useful GatsbyJS commands for beginners in this article. I will probably create a series of Gatsby articles for you guys, later.

This is what the official site says,

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

Now let’s look at some command from the CLI.

Useful GatsbyJS commands for beginners

1. Install the Gatsby CLI. Make sure you have Node and NPM.

npm install -g gatsby-cli

2. Create a new project

gatsby new hello-world

3. Start the development server. This starts a local dev server at port 8000. Open localhost:8000 to view.

gatsby develop

4. Create a Production build. Files generated inside /public folder

gatsby build

The generated production bundle has everything for your website to run. GatsbyJS generates the pre-rendered pages at build time. Go ahead and serve it or deploy it to a static web host like Netlify, Github Pages. You will be able to view your website. No complex server set up. Gastby is built on the fundamentals of JAMStack. What is JAMStack? I have a detailed article on that.

5. Serve Production Build. Serves the production build at localhost:9000

gatsby serve

6. Serve Production Build at specified port. Open localhost:9001 to see.

gatsby serve -p 9001

7. Clean Production build. Cleans/deletes the .cache and public folders

gatsby clean

Some important observations

While working with Gatsby, I have observed a few issues when generating production bundles. The following are some troubleshooting steps.

* Before `gatsby build` to generate a production build, run `gatsby clean` to clear the cache. 

* Before `gatsby serve` to serve prod build, run `gatsby clean` to clear the cache. 

If you do not clear cache – an error has been seen where `gatsby serve` serves another gatsby website. 

Go ahead and give Gatsby a try. Cheers!

Gatsby websites I created

• https://webinar-joseph.netlify.app/ (Online Webinar Registration page)
• https://serene-bartik-605783.netlify.app/ (Travel blog template)

Further Reference – GatsbyJS official site

If you enjoyed this post and want similar articles to be delivered to your inbox directly, you can subscribe to my newsletters. I send out an email every two weeks with new articles, tips & tricks, news, free materials. No spamming, of course.