Gatsby websites are getting popular day by day. Nowadays most of the popular websites use Gatsby because of its speed, SEO and etc, and if you don't know anything about Gatsby, It is probably worth learning it in 2021.

What is Gatsby?

GatsbyJS is a React-based, GraphQL powered static site generator. Gatsby is an open-source framework that combines functionality from React, GraphQL, and Webpack into a single tool for building static websites and apps. Although the term "static site generator" has been around for a while, Gatsby is more akin to a modern front-end framework than a traditional static site generator.

What are Static Sites?

Static websites have existed for a long time. They're most likely the initial website, with only HTML, CSS, and JavaScript. They aren't rendered in real-time because there isn't any server-side programming, no database, and so on.

A static site generator is a tool that creates static web pages. JS frameworks and libraries, on the other hand, typically produce HTML content on the client-side during runtime. This material is generated by static site generators while the site is being built. Then, after it's loaded, React takes over, and you've got yourself a single-page app!

Why you should consider using Gatsby?

SEO

The use of GatsbyJs allows your websites to make use of several of the internal code's optimization strategies. As a result, search engines will rank your website higher. There are a number of plugins that can assist you with this.

Plugins

Gatsby has some amazing plugins which can help your website in different aspects. You can install these plugins using NPM or Yarn.

Some of the popular plugins are Source File-System, Contentful, Plugin Sharp and etc. You can find all plugins on their official website here.

Speed

Gatsby sites are much faster than many of the alternatives, even compared to cached sites using WordPress and things like that because that static site is really hard to beat in terms of its speed and performance.

Templates

There are enough GatsbyJs Starter repositories and templates available that cloning and altering the content is straightforward. This allows you to quickly and efficiently construct websites such as your blog or your portfolio.

Why should you avoid Gatsby?

Build Time

As the amount of content on your website grows, so does the time it takes to produce it. This is not only inconvenient during development, but it also wastes time when it comes to deployment. Gatsby is not advised if you want to create a site that changes frequently.

Dynamic Websites

Sites with a lot of dynamically produced routes, because you won't be able to reap the benefits of statically generated pages if you don't know what they are at the time of construction.

Complex sites

Because complex sites expand quickly and take a long time to build, they are continuously adding new pages and material. Although many e-commerce companies can and do employ statically created sites, if build time becomes an issue, it is most likely time to abandon them in favor of dynamically generated sites like Gatsby.

Set Up Your First Gatsby Website

Installing Gatsby CLI

The first step is to install Gatsby CLI, You can create and modify a new site using the Gatsby command-line interface. To install Gatsby CLI, simply run :

npm install -g gatsby-cli

The -g argument indicates that the Gatsby command-line interface is being installed globally rather than locally. As a result, you'll be able to utilize the tool in any directory.

Starter Templates

As I mentioned previously that you don't need to create a website from scratch, instead we can use some starter templates which can be found on Gatsby's official website.

For this tutorial, we will use gatsby-starter-default to do that, run the below command on your terminal.

gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default

gatsby new creates a new website. You'll get a barebones site if you utilize gatsby new on its own. Combining gatsby new with a starter template is the most typical approach to use it.

Run your app locally

Once it is done, you should see a message that Gatsby site has been successfully bootstrapped. Now run

cd gatsby-starter-default && gatsby develop

This command with navigate to our new gatsby folder and initialize files, so that we can view it locally. Open your browser and navigate to http://localhost:8000/, You should see a default stater page, just like image below.

It's critical to arrange your website's metadata correctly if you want a search engine to find your website. The gatsby-config.js file allows you to customize your website's data.

In order to make your website accessible for everybody around the globe, you need to deploy your website in a hosting service. You can deploy a Gatsby website to Netfliy, Vercel, Azure, Gatsby Cloud, Heroku, AWS, IIS, Firebase and etc. But for this example, we will use Netlify

Deploying Website To Netlify

Before deploying our website, first, we need to generate a build folder that contains static files. To do that run

gatsby build

Once it is completed, You should see a folder named public. That is it, We need only that folder to deploy in Netlify.

Go to Netlify website and if you don't have an account, click on the signup button and create an account. Don't worry, Netfliy is free hosting and it won't charge you anything. Once you registered, you should be redirected to Netfliy dashboard, which will look like this.

Now click on sites on the Netlify menu, and you should see a page with a text "Want to deploy a new site without connecting to Git? Drag and drop your site output folder here" . Drag and drop your public folder on that placeholder, Wait for a while and then your website will be deployed on Netfliy. If it is deployed successfully you should see something similar to the below image.

Conclusion

I hope you found this article helpful. If you need any help please let me know in the comment section.

Would you like to buy me a coffee, You can do it here.

Let's connect on Twitter and LinkedIn.

👋 Thanks for reading, See you next time