DEV Community

Gavin
Gavin

Posted on

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

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:

Your new Gatsby site has been successfully bootstrapped. Start developing it by running:
  cd thtmnisamnstr-dotcom
  gatsby develop
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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:

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'.
Enter fullscreen mode Exit fullscreen mode
  • 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.

Top comments (0)