Navigate back to the homepage

Building a Portfolio/Resume Site with Gatsby, Part 1 - Setting up your environment and creating a local, themed site

Gavin Johnson
July 20th, 2020 · 2 min read

This post is the first in a series and was originally published on

My personal website sucks.

Alt Text

I haven’t touched it since 2017, and it looks dated. It doesn’t have any of the writing I’ve been doing for work included either. It’s just not a good showcase of me or my work. So I’m going to update it.

We started using Gatsby for a few of the company websites where I work, New Relic. So I’ll use Gatsby for my site too. I’m choosing the Novela theme by narative, because it’s popular, and I’m basic.

I figured I’d document it and share it here. Hopefully somebody finds it useful.

FYI, I’m using a Mac, so there may be some Mac-specific commands.

Install prerequisites

  • Install Homebrew
    • /bin/bash -c "$(curl -fsSL"
  • Install XCode Command Line Tools
    • xcode-select --install
  • Install Git
    • brew install git
    • git config --global "Your Name"
    • git config -- global ""
  • Install Node.js
    • brew install node

Install Gatsby and create your starter site

  • Install the Gatsby CLI
    • npm install -g gatsby-cli
  • cd to the directory you want your site’s root directory to be in (e.g. I have a development sandbox folder that I put all of my dev projects in).
  • Create a starter site (using the Novela theme by narative)
    • gatsby new [site-root-directory]

The last of your terminal output should be a confirmation like below:

1Your new Gatsby site has been successfully bootstrapped. Start developing it by running:
2 cd thtmnisamnstr-dotcom
3 gatsby develop
  • Build and run your starter site
    • cd [site-root-directory]
    • gatsby develop

The last of your terminal output should be a confirmation like below:

1You can now view site in the browser.
2 http://localhost:8000/
4View GraphiQL, an in-browser IDE, to explore your site's data and schema⠀
5 http://localhost:8000/___graphql⠀
7Note that the development build is not optimized.
8To create a production build, use gatsby build
10success Building development bundle - 14.604s
  • Open your browser, and go to http://localhost:8000/
    Alt Text

Create your GitHub repo

  • Login to GitHub. Make an account if you don’t already have one.
  • Create a new repo
    Alt Text
  • Name it. Don’t initialize with a readme, add a .gitignore, nor a license. Click Create Repository.
    Alt Text
  • In Terminal…
    • cd [site-root-directory]
    • git remote add origin[your-github-username]/[site-root-directory].git
    • git push -u origin master
  • In your repo on GitHub…
    • Create New File
      Alt Text
    • Type “license”, and click the Choose License Template button
      Alt Text
    • Choose MIT License. Enter your full name. Click Review & Submit.
      Alt Text
    • Scroll to the bottom, and click Commit Changes
      Alt Text

Note: You may have to merge a pull request if “Commit directly to the master branch.” wasn’t selectable in the previous screen.

  • In Terminal…
    • git pull

Boom! You just pulled down the MIT license file from your GitHub repo.

Rename your repo’s default branch from Master to Main

…because nobody likes outdated terms, like Master, that are unnecessary references to slavery.

  • In Terminal…
    • git branch -m master main
    • git push -u origin main

Your terminal output should be something like below:

1Total 0 (delta 0), reused 0 (delta 0), pack-reused 0
3remote: Create a pull request for 'main' on GitHub by visiting:
7 * [new branch] main -> main
8Branch 'main' set up to track remote branch 'main' from 'origin'.
  • In your GitHub repo…
    • Click Settings on your repo’s navigation bar
      Alt Text
    • Click on Branches in the Settings nav
      Alt Text
    • Click the default branch dropdown (currently Master) and select Main
      Alt Text
    • Click the Update button
      Alt Text
    • A warning modal will pop-up. Click the “I understand, update the default branch” button
      Alt Text

Boom! Now your repo’s default branch is named Main.

That’s it for today. I’ll post a more heavy duty tutorial next week on how to customize your new site, tailor it to you, build a resume page, and make your first post.

More articles from thtmnisamnstr

Adapting Code and Culture: How New Relic Went Open Source

To become a community-friendly, open source partner, we needed to transform how we create our instrumentation. Here’s how we did it.

October 16th, 2020 · 9 min read

Getting Started with Kafka Connect for New Relic

Easily build real-time observability pipelines with the New Relic Kafka connector. Learn how to set up the connector for both events and metrics, and start sending data.

October 9th, 2020 · 4 min read
© 2020 thtmnisamnstr
Link to $ to $ to $ to $ to $