Building a Personal Site with Gatsby

Part 1: Introduction and Setup

January 11, 2019

Introduction and Setup

A few months ago, I tried to build a personal website with Gatsby V1 using a starter template, but when it came to migrate to Gatsby V2, I realized I didn't really have a firm grasp on how everything worked together. To gain a better understanding, I set out to build out a site from scratch with a more patient approach--searching through the official docs and then consulting other blogs to fill in any blanks. Fortunately, the documentation for Gatsby is plentiful and I had no problem finding the appropriate guide for each step I wanted to take next--from adding support for SCSS, to generating blog posts from markdown files, creating a list of posts with thumbnails, using gatsby-image for responsive, optimized images, creating tags, pagination, and SEO.

The goal of this series of blog posts is to create a personal website using Gatsby V2 from the default starter. The final website will have an index page where you can introduce yourself, a list of all blog posts, individual blog pages, tag pages listing blog posts in specific categories, and a projects portfolio page. You can check out the example repo on GitHub here and preview the final website here.

Gatsby Basics

Gatsby is a static site generator that allows you to write your front end with React components, and manage data with GraphQL. Page Components (i.e. src/pages/index.js) automatically become a page at /file-name and can include a GraphQL page query that makes the site data available as props.data in your React component. Non-page components (i.e. src/components/header.js) use Gatsby's StaticQuery API to pull in data. Included is an IDE called GraphiQL that allows you to query your data and check it's structure. Various plugins make files available to query and transform.

Getting Started

Install Gatsby's command line tool.

shell
npm install --global gatsby-cli

Create a new Gatsby site through the CLI.

shell
gatsby new my-gatsby-site

Change directories into your my-gatsby-site folder.

shell
cd my-gatsby-site

Start your development server. You will be able to access your site at http://localhost:8000 and access GraphiQL at http://localhost:8000/___graphql.

shell
gatsby develop