Site logo

Not Playing – Spotify

#website#personal#tutorial

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

Published on
•
3 mins read
Written by
hero

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


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 https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
  • Install XCode Command Line Tools
    • xcode-select --install
  • Install Git
    • brew install git
    • git config --global user.name "Your Name"
    • git config -- global user.email "your@email.com"
  • 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] https://github.com/narative/gatsby-starter-novela

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

Your new Gatsby site has been successfully bootstrapped. Start developing it by running:
  cd thtmnisamnstr-dotcom
  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:

You can now view site in the browser.
  http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site's data and schema⠀
  http://localhost:8000/___graphql⠀

Note that the development build is not optimized.
To create a production build, use gatsby build

success Building development bundle - 14.604s
  • Alt Text

Create your GitHub repo

  • Login to GitHub. Make an account if you don’t already have one.
  • Alt Text
  • Alt Text
  • In Terminal...
    • cd [site-root-directory]
    • git remote add origin https://github.com/[your-github-username]/[site-root-directory].git
    • git push -u origin master
  • In your repo on GitHub...
    • Alt Text
    • Alt Text
    • Alt Text
    • 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:

Total 0 (delta 0), reused 0 (delta 0), pack-reused 0
remote: 
remote: Create a pull request for 'main' on GitHub by visiting:
remote:      https://github.com/thtmnisamnstr/thtmnisamnstr-dotcom/pull/new/main
remote: 
To https://github.com/thtmnisamnstr/thtmnisamnstr-dotcom.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.
  • In your GitHub repo...
    • Alt Text
    • Alt Text
    • Alt Text
    • Alt Text
    • 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.

View on GitHub