loading...

Let's Refactor My Personal Website and Portfolio using Gatsby, Part Two: Generating the Site and Installing Dependencies

dylanesque profile image Michael Caveney Updated on ・3 min read

Welcome to part two of my site refactor! If you missed part one, click here to check it out. Today I'm going to generate the site using the Gatsby CLI, create basic page structure, and install dependencies, so let's dive right in!

The Gatsby CLI and Project Structure

Like many other modern frameworks, Gatsby utilizes a CLI (Command Line Interface) to get many common tasks accomplished quickly. Gatsby installation instructions vary slightly by OS, but the (really quite excellent) Gatsby docs have precise instructions on getting your development environment set up. Once the Gatsby CLI is up and running, you can create a new Gatsby project by running the command

gatsby new [projectname][starter]

in the command line. The "projectname" refers to the name that you give the project, and the "starter" is the starter template you use. A list of starter projects exists here, and if no specific starter is mentioned, the CLI uses the default starter. Check out this section of the Gatsby docs for a more detailed discussion of how to initialize a new project.

If we were to navigate to the newly created folder and open it in a text editor, we'd see a file structure much like this:

  • A .cache folder, a node_modules folder, and a public folder. I'm lumping these three together because you're
    generally not going to have to worry about them or edit their contents manually.

  • A src folder, which contains additional folders for components, images, and pages. You'll be working with
    these a fair bit.

  • A .gitignore file, which lists the files and folders that do not get saved in a repo when working with Git/Github.

  • A LICENSE file which contains information about the software license in use here.

  • A package.json and a package-lock.json file, which contain information about project scripts, dependencies, and the
    exact versions of those dependencies.

If you've worked with React, Node, or other JavaScript frameworks or paradigms before, much of this will be familiar. But we get something special with the pages folder!

Pages in Gatsby

One of the more "magical" aspects of Gatsby revolves around how pages work. Any React components listed under the "pages" section are added to the routing of the application automatically. You still have to wire up navigation between those pages, but the routes automatically added is a nice touch.

The app initialized with a "page-2" component that I'm not going to need, so I'll delete that and any references to it in the index.js file.
The pages that I'll need are:

  • A home page/site index.

  • An About Me page

  • A page detailing projects and linking to Github, my writing on DEV, etc.

  • A contact page.

With that, I'll add about.js, work.js, and contact.js files to the pages directory, and add a basic React component to work as a placeholder, something like this:

import React from 'react';

const About = () => {
  return ( <div>I'm the About Page!</div> );
}

export default About;
Enter fullscreen mode Exit fullscreen mode

Plugins in Gatsby

From the Gatsby.js website:

Gatsby plugins are Node.js packages that implement Gatsby APIs. For larger, more complex sites, plugins let you modularize your site customizations into site-specific plugins.

Plugins exist to help Gatsby reduce boilerplate or complicated custom code when reading from or working with various file types or paradigms. Looking at our gatsby-config file, we already have added to the project:

  • gatsby-plugin-react-helmet: Manages the head of the document, including SEO
  • gatsby-source-filesystem: Parses files in a specific directory. This plugin is mainly utilized by other plugins.
  • gatsby-tranformer-sharp: Creates nodes out of compatible image files for optimization by the Sharp library.
  • gatsby-plugin-sharp: Processes images using the Sharp library

For now, I'm only going to add the gatsby-plugin-emotion family of plugins, to facilitate use of that library.

That's all I have for today! Next time on this blog series, I discuss planning for site/app design and design systems!

Discussion

pic
Editor guide