Blog | Programming Notes

Blog ❯ Author: Fabio Moschini|Date: 31.08.2022

Site customization

GatsbyReact

Introduction

In the previous article we created the structure of our blog. It's very basic: it has only one page, the home page, whose content includes only text. In this article, we'll see how to add pages, including ones with images and links, and how to navigate between them.

Creating Pages

Gatsby offers multiple ways to create pages. In this case, we'll look at two possibilities:

- manually, by creating a React component (we'll see this in this article);
- through the automation offered by the createPages API (which will be covered in a future article).

Adding a Page Manually

It's enough to create a React component inside the src/pages directory. Here we already find the first, and so far only, component corresponding to our blog's only page, index.js.
Let's create a file and call it about.js where we'll put our data (name, surname, profession) along with contact information (email, websites):

Inside the about.js file, let's copy the code that defines the About component:

import * as React from "react"
const About = () => (
    <div>
        <h1>Mi chiamo Fabio Moschini e sono un programmatore.</h>
        <p>Puoi inviarmi una e-mail a questo indirizzo:
            <a href="mailto:info@moschini.cloud">
                info@moschini.cloud
            </a>
        </p>
    </div>
)

export default About

Let's start the development server with the command:

gatsby develop

and navigate to the address:

localhost:8000/about

The displayed page is:

Warning

If the About page is not displayed, you need to stop the development server with CTRL + C in the terminal window, run the command:

gatsby clean

then restart the development server with:

gatsby develop

The gatsby clean command cleans the contents of the .cache and public directories.

Currently, the About page can only be reached through the complete URL.
To enable navigation between the home page (index.js) and the about page (about.js), let's insert a link between the two pages.
Gatsby provides a native component (Link) for navigation between site pages (internal navigation). This component should only be used for navigating internal pages of the site. For external URL links, you should use the usual <a> tag.

Note

The Link component is optimized to only load the parts of the destination page that have changed compared to the source page.
This is why moving from one page to another is very fast, unlike the <a> tag which loads the entire destination page.

To use the Link component, in the index.js file let's insert these lines of code:

    
    import React from "react"
    import { graphql } from "gatsby"
    import { Link } from 'gatsby'

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

      return (
        <div>
          <h1>{title}</h1>
          <p>{description}</p>
          <p>{author}</p>
          <Link to="about">About</Link>
        </div>
      )
    }

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

The added lines are the one for importing the Link component and the one where we define the link to the About page.

Adding Images

Let's enrich the About page with an image, for example the one downloadable from this link.
After downloading the image, let's rename it to "notebook.jpg", create thestatic directory in the root of our site (at the same level as the src directory), create the images subdirectory inside static, and finally, copy the downloaded image to the /static/images/ directory:

Note

Every file present in the static directory will be copied into the public directory during the build process.
In our case, the "notebook.jpg" file will be copied to "public/notebook.jpg".

Let's modify the about.js file and add the code to include the image using the <img>tag:

const About = () => (
  <div>
    <h1>Mi chiamo Fabio Moschini e sono un programmatore.<h1>
    <p>Puoi inviarmi una e-mail a questo indirizzo:
      <a href="mailto:info@moschini.cloud>
        info@moschini.cloud
      </a>
    </p>
    <img src="/images/notebook.jpg"></img>
  </div>
)

This is the new about page:

If you try to resize the browser window, you'll see that the image doesn't change its dimensions.

Note

Instead of specifying the src value directly inside the img tag, it's recommended to use import to get the URL of the resources:

import image from "../../static/images/notebook.jpg"
...
<img src={image}></img>

For better image management in Gatsby, we can use the StaticImage component provided by the gatsby-plugin-image plugin. This component allows loading images in "lazy" mode; additionally, larger images are automatically resized.
To use this component, you need to install the gatsby-plugin-image plugin. This plugin generates multiple versions of the same image to be used in different scenarios or devices.
Let's see the steps needed to use this component:

- create the images directory inside the src directory: this directory will contain all the images we want to manage with the gatsby-plugin-image plugin
- install the gatsby-plugin-image plugin with the command:

npm install --save gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem gatsby-plugin-image

- configure the plugin: in the gatsby-config.jsfile, update the content of the pluginssection with:

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-filesystem",
      options: {
        "name": "images",
        "path": "./src/images/"
      },
    },
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    "gatsby-plugin-image",
  ],
};

- verify that in the package.json file there are dependencies for these plugins, meaning in the dependencies section these modules should be present:
- - "gatsby-plugin-image": "^2.10.1",
- - "gatsby-plugin-sharp": "^4.10.2",
- - "gatsby-source-filesystem": "^4.10.1",
- - "gatsby-transformer-sharp": "^4.10.0",

At this point, we can use the StaticImagecomponent inside the About page. To do this, let's update the content of the about.js file with this code:

import * as React from "react"
import {StaticImage} from "gatsby-plugin-image"
    
const About = () => (
  <div>
    <h1>Mi chiamo Fabio Moschini e sono un programmatore.</h1>
    <p>Puoi inviarmi una e-mail a questo indirizzo:
      <a href="mailto:info@moschini.cloud">
        info@moschini.cloud
      </a>
    </p>
    
    <StaticImage
      layout="fullWidth"
      alt="notebook"
      src="../images/notebook.jpg"
    />
  </div>
)

export default About

In this case too, as we've already seen for the Linkcomponent, the added lines are the one for importing the StaticImagecomponent and the one where we define the image properties through the <StaticImage> tag. In the example, the notebook image is displayed to occupy the full width of the available area in the browser window but, unlike the <img>tag seen earlier, the image is responsive, meaning it's reduced or enlarged with the resizing of the browser window: