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 Dev.to.


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 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:

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/
3
4View GraphiQL, an in-browser IDE, to explore your site's data and schema⠀
5 http://localhost:8000/___graphql⠀
6
7Note that the development build is not optimized.
8To create a production build, use gatsby build
9
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 https://github.com/[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
2remote:
3remote: Create a pull request for 'main' on GitHub by visiting:
4remote: https://github.com/thtmnisamnstr/thtmnisamnstr-dotcom/pull/new/main
5remote:
6To https://github.com/thtmnisamnstr/thtmnisamnstr-dotcom.git
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

Connecting a Spring Boot Application to Yugabyte Cloud and Deploying It to Kubernetes on minikube

The post walks you through deploying a Spring Boot app to Kubernetes locally on minikube and connecting it to a YugabyteDB database on Yugabyte Cloud.

September 17th, 2021 · 4 min read

YugabyteDB Open Source Community Spotlight – September 2021

We shine a spotlight on members of the Yugabyte community to recognize their contributions to making our community a great place. This month, we're honoring Martin Roos, Head of Technology at Fortumo and a veteran software developer with over 20 years of database experience working with: Oracle, MySQL, PostgreSQL, and now YugabyteDB. Read this post to hear about his experience with YugabyteDB.

September 8th, 2021 · 7 min read
© 2020–2021 thtmnisamnstr
Link to $https://twitter.com/gavinjtechLink to $https://dev.to/thtmnisamnstrLink to $https://github.com/thtmnisamnstrLink to $https://www.linkedin.com/in/gavin-johnson/Link to $https://www.instagram.com/thtmnisamnstr