Building sites with Gatsby JS: what it is and why it’s so popular

Building sites with Gatsby JS: what it is and why it’s so popular

Posted on January 16, 2023

If you’ve been reading my blog for a while, you would know that most of the work I do is in WordPress. But lately I have pivoted to the Jamstack, and here I’m going to give you a brief overview of Gatsby JS and why you should use it on your next project.

Gatsby JS is a free and open-source framework that allows developers to build fast and high-performance websites using React and GraphQL. It is built on top of React, which is a popular JavaScript library for building user interfaces, and it utilizes the power of GraphQL to easily pull in data from a variety of sources.

One of the main advantages of Gatsby is its static site generation capabilities. This means that it pre-builds all of the pages of a website at build time, resulting in a faster and more secure website for users. This also allows for better performance on lower-end devices, as well as improved SEO.

Compared to traditional dynamic websites, which build pages on the fly using server-side scripting, Gatsby websites can be served directly from a CDN, reducing the load on the server and improving the speed of the website. Additionally, Gatsby’s static site generation allows for easy integration with a wide variety of hosting options, such as Netlify or GitHub Pages, making it a great option for developers of all skill levels.

Comparison to Other Popular JavaScript Frameworks: When compared to other popular JavaScript frameworks like React and Next.js, Gatsby stands out for its focus on performance and developer experience. React, while a powerful tool for building user interfaces, does not have built-in support for static site generation and requires additional setup and configuration to achieve similar performance. Next.js, on the other hand, is a framework built specifically for server-rendered React applications and while it also has static site generation capabilities, it has a steeper learning curve and requires a more complex setup.

Getting Started

Setting up a Gatsby Project: Getting started with Gatsby is simple and straightforward. The first step is to install the Gatsby CLI, which can be done by running the following command in the command line:

Copy codenpm install -g gatsby-cli

Once the CLI is installed, you can create a new Gatsby project by running the following command:

Copy codegatsby new my-project

This will create a new project in a directory called “my-project” with the basic file structure and a set of starter files. This includes a basic layout, a few pages, and some sample components to get you started.

Building components

In Gatsby JS, components are built using React. React is a popular JavaScript library that allows developers to build reusable, modular user interface components.

Each Gatsby component is a separate React component, and it follows the same principles as React components. Each component can have its own state, props, and lifecycle methods, and it can be rendered to the DOM using JSX.

To create a new component in Gatsby, you would typically create a new file in the src/components directory and name it with a .js or .jsx file extension. The file should start with an import statement to bring in React and any other dependencies, and then define the component as a class or function component.

For example, here’s an example of a basic component in Gatsby:

Copy codeimport React from "react"

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  )
}

export default MyComponent

In this example, the component is defined as a functional component, and it simply returns a div element with a h1 element inside. The component is exported at the end of the file so it can be imported and used in other parts of the application.

In Gatsby, components are typically used to define the structure and layout of a page or a section of a page. By building your application as a set of reusable, modular components, you can easily create complex, dynamic web pages with minimal code.

Also, Gatsby has a built-in support for JSX, which is an extension of JavaScript that allows you to write HTML-like elements directly in your JavaScript code. This makes it easy to create and style components using a familiar syntax, and it eliminates the need to write a lot of complex, verbose code.

Customising your Gatsby Project

Customizing the design of your website can be done using CSS, but Gatsby also has built-in support for themes. Themes are a collection of reusable styles, components, and configuration that can be easily applied to a Gatsby website. This makes it easy to change the look and feel of your website without having to write a lot of CSS from scratch.

You can also use Gatsby’s powerful plugin system to add additional functionality to your website. There are a wide variety of plugins available for things like SEO, analytics, and image optimization. The plugins are easy to install and can be configured in the gatsby-config.js file.

Once you have finished building your website, the next step is to deploy it. Gatsby makes it easy to deploy to a wide variety of hosting options, including Netlify and GitHub Pages. Both of these options provide a simple and straightforward way to deploy your website with just a few clicks. Netlify also provides additional features like continuous deployment and serverless functions, which can make your website even more powerful and performant.

Deploying Gatsby to Netlify

Deploying a Gatsby website to Netlify is a simple and straightforward process that can be accomplished in a few steps. Here’s an overview of the process:

1. Build your Gatsby website: Make sure your website is fully functional and ready for deployment. You can do this by running the command gatsby build in the command line. This will create a production-ready version of your website in the public directory.
2. Sign up for a Netlify account: If you haven’t already, sign up for a Netlify account. You can do this by going to the Netlify website and clicking the “Sign Up” button.
3. Create a new site on Netlify: Once you’re logged in, click on the “New site from Git” button to create a new site.
4. Connect your Git repository: Connect your Git repository to Netlify by selecting your repository provider and selecting the appropriate repository.
5. Configure your build settings: Netlify will automatically detect that you’re using Gatsby and set the build command to gatsby build and the publish directory to public. If there’s a different build command or publish directory in your project, you can change it in the build settings.
6. Deploy your site: Once your build settings are configured, click on the “Deploy” button to deploy your site. Netlify will start building your site and deploying it to a unique URL.
7. Verify your site: After the deployment is complete, you can check your site by visiting the unique URL provided by Netlify.
8. Customize your domain: If you have a custom domain, you can configure it by going to the domain settings in your Netlify account.

That’s it! Your Gatsby website is now live and accessible to the world. Netlify offers a lot of features and options, such as continuous deployment, server less functions, and custom domains, that can help you to take your website to the next level.

Jane James is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart. Have a project in mind? Contact me here.