Blog | Programming Notes

Blog ❯ Author: Fabio Moschini|Date: 20.08.2022

Building a site with Gatsby

GatsbyReact

Building our first site with Gatsby

In the previous article we saw what Gatsby is and what prerequisites need to be installed in the development environment.
In this article, we'll see how to build our first site with Gatsby; specifically, the site we're going to create will be a blog.

Verifying prerequisites

Let's verify that all the tools we need to define our blog have been installed:
- Git: open the command prompt and type:

git --version

if we see an output similar to this:

C:UsersUser>git --version
git version 2.37.2.windows.2

then Git installation was successful
- Node.js: still in the command prompt, type:

node --version

and we should see output similar to:

C:Users/User/>node --version
v16.17.0

- Gatsby CLI: again in the command prompt, write:

gatsby --version

which, if the installation was successful, will respond with:

C:Users/User/>gatsby --version Gatsby CLI version: 4.21.0 Gatsby version: 4.21.0

- Visual Studio code: still in the command prompt, write:

code .

and, if Visual Studio Code installation was successful, the editor will open.

Defining the site structure

After verifying the correct installation of requirements, we can finally create our blog: - create a directory that will contain our blogs, for example as a subdirectory of C:, with the command:

md MyBlogs

- move to the directory just added and create the structure of our blog with the "gatsby new ..." command:

cd MyBlogs
gatsby new MyFirstBlog https://github.com/gatsbyjs/gatsby-starter-hello-world

The "gatsby new ..." command allows you to create a site based on a predefined theme. Specifically, the command shown creates the "MyFirstBlog" directory and, inside it, defines the site structure based on the "gatsby-starter-hello-world" theme (starter); - let's position ourselves inside the directory that was created for our blog:

cd MyFirstBlog

and open the site with Visual Studio Code using the command:

code .

- open Visual Studio Code's internal terminal and type the command:

gatsby develop

to start the development server and access the newly created site. If the ```gatsby develop``` command generates an error like this:

gatsby : File C:*********
pm/gatsby.ps1 cannot be loaded because running scripts is disabled on this system.
For more information, see aboutExecutionPolicies at https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1 + gatsby develop + ~~~~~~   + CategoryInfo : SecurityError: (:) [], PSSecurityException   + FullyQualifiedErrorId : UnauthorizedAccess

open a PowerShell window in administrator mode and type the command:

Set-ExecutionPolicy RemoteSigned

With the development server running, we can access our site by navigating to the URL:

localhost:8000

The displayed page is the default one for the chosen theme:

Tip

in Visual Studio Code you can enable auto-save through the command:

File -> Auto Save

This way, while working on a file, Visual Studio Code will save it to disk in real-time, thus reducing the risk of losing the latest changes.

Modifying the home page

The newly created blog is essentially empty, except for the home page that we saw by navigating to localhost:8000. Let's start by modifying the home page, whose content is stored in the index.js file. Open the index.js file and replace the code with this:

import React from "react"
      export default function Home() {
      return <div>Hello world!<br/>This is my new blog</div>
      }

Save the file (if we haven't activated auto-save) and, with the development server still active, we can see the modified home page in the browser:

We haven't added much to the site, but we've seen how simple it is to modify a page's content and see the changes in real-time.

GraphQL and gatsby-config.js

GraphQL is a query language used to access data and use it in the pages we'll add to our blog. Queries are the representation of the data we need; GraphQL allows us to express the data structure declaratively.
Let's see an example right away:
- open the gatsby-config.js file and add this content in the module.exports section:

module.exports = {
          /* Your site config here */
          siteMetadata: {
            title: 'My blog',
            description: 'This is my new blog designed with Gatsby.'  
          },
          plugins: [],
        }

- modify the index.js file again, replacing the content with:

import { graphql } from "gatsby"

        export default function Home({ data }) {
          const { title, description } = data.site.siteMetadata

          return (
            <div>
            <h1>{title}</h1>
            <p>{description}</p>
          </div>
          )
        }

        export const pageQuery = graphql`
          query MetadataQuery {
            site {
              siteMetadata {
                title
                description
              }
            }
          }`

- save both files, stop the development server by pressing CTRL + C in the terminal and restart it with the gatsby develop command; this operation is necessary since we modified a configuration file, so we wouldn't be able to see the changes without restarting the development server.
Now we can see the modified home page in the browser:

Let's look at the changes in detail:
- in the gatsby-config.js file we added the blog title and a description in the site metadata;
- this data is read by the query defined in the index.js file:

export const pageQuery = graphql`
          query MetadataQuery {
            site {
              siteMetadata {
                title
                description
              }
            }
          }`

- through this query, we're telling Gatsby to retrieve the title and description information defined within the site metadata; the content of this information is displayed with the "information" syntax:

return (
        <div>
              <h1>{title}</h1>;
              <p>{description}</p>;
        </div>;
        )

- as you can guess, we can add other attributes in the configuration file, such as the site author, and then add it to the home page content: gatsby-config.js

module.exports = {
          /* Your site config here */
          siteMetadata: {
            title: 'My blog',
            description: 'This is my new blog designed with Gatsby.'  
          },
          plugins: [],
        }

index.js

import { graphql } from "gatsby"

        export default function Home({ data }) {
          const { title, description } = data.site.siteMetadata

          return (
            <div>
            <h1>{title}</h1>
            <p>{description}</p>
          </div>
          )
        }

        export const pageQuery = graphql`
          query MetadataQuery {
            site {
              siteMetadata {
                title
                description
              }
            }
          }
        `

In the next article, we'll see how to add pages and define navigation between the home page and the added pages.