Navigate back to the homepage

Building a Portfolio/Resume Site with Gatsby, Part 3 - Deploying to Firebase

Gavin Johnson
August 9th, 2020 · 2 min read

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


Quick recap. My personal website sucks. I’m updating it using Gatsby and the Novela theme by narative, because it’s popular, and I’m basic.

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


Alright, part 3, deploying is the fun part. That’s when your site actually ends up on the internet. Like... people can visit it and stuff. It’s not just a project on your computer anymore. So let’s get into it..

Initialize Firebase on your site and deploy to Firebase

  • Login to Firebase and create a project for you site. Make an account if you don’t already have one.
    • Click Go to Console
      Alt Text
    • Click the Add Project tile
      Alt Text
    • Give your project a name and click Continue
      Alt Text
    • Enable Google Analytics for your site (or not, your choice) and click Continue
      Alt Text
    • Select your Google Analytics location, configure your Google Analytics settings, accept both terms checkboxes, and click Create Project
      Alt Text
  • Install the Firebase CLI and initialize your site’s directory
    • In terminal, npm install -g firebase-tools
    • firebase logout (you may not have to do this step, but I did)
    • firebase login
      Alt Text
    • Type ‘y’ to let Firebase collect usage and error reporting info. Type ‘n’ not to (I go with ‘n’) and press Enter
    • This will open up a Google sign-in page
      Alt Text
    • Select your Google account that you use for Firebase
    • You will be asked to authorize Firebase CLI to access your Google account. Click the Allow button.
      Alt Text
    • You should get a login successful screen (you can close this window)
      Alt Text
    • In Terminal, the output should be something like ✔ Success! Logged in as [your.email]@gmail.com
    • cd to your site’s root directory
    • firebase init
      Alt Text
    • Press the down arrow until the “Hosting: …” option is highlighted, press the space bar to select it, and press Enter
      Alt Text
    • Use the up and down arrows to highlight “Use an existing project” and press Enter
      Alt Text
    • Select the Firebase project you created previously and press Enter
    • For public directory, type ‘public’ and press Enter
    • For whether to configure as a single-page app, type ‘n’ and press Enter
      Alt Text
    • If asked to overwrite anything, type ‘n’ and press Enter
    • Your terminal output should be:
1i Skipping write of public/index.html
2
3i Writing configuration info to firebase.json...
4i Writing project information to .firebaserc...
5
6✔ Firebase initialization complete!
  • Commit your changes to your repo
    • git add --all
    • git commit -a -m "Initialized Firebase"
    • git push -u origin main

That’s right we committed right to main. Didn’t fork and do a PR. You don’t have to. I usually do, but didn’t this time. It’s a good habit to fork and PR though.

  • Deploy your site to Firebase (when your site is ready to deploy)
    • gatsby clean
    • gatsby build
    • firebase deploy --only hosting
    • Your terminal output should be like the following…
1=== Deploying to 'thtmnisamnstr'...
2
3i deploying hosting
4i hosting[thtmnisamnstr]: beginning deploy...
5i hosting[thtmnisamnstr]: found 135 files in public
6✔ hosting[thtmnisamnstr]: file upload complete
7i hosting[thtmnisamnstr]: finalizing version...
8✔ hosting[thtmnisamnstr]: version finalized
9i hosting[thtmnisamnstr]: releasing new version...
10✔ hosting[thtmnisamnstr]: release complete
11
12✔ Deploy complete!
13
14Project Console: https://console.firebase.google.com/project/thtmnisamnstr/overview
15Hosting URL: https://thtmnisamnstr.web.app

Boom! You’re site is deployed to Firebase. You should be able to go to the Hosting URL in your most recent terminal output to see your site. I already had my Firebase configured for thatmanisamnstr.com. So when I go there, it’s up.

Alt Text

That’s it for today. I’ll post a tutorial next week on how to automate deployments with GitHub Actions. That was supposed to be part of this post, but I’ve been crazy busy at work (I ran go-to-market for open sourcing our instrumentation, and I ended up doing a bunch of work for our recent launch. Our new free tier is dope btw.).

More articles from thtmnisamnstr

How to sign up for New Relic's new perpetual free tier

New Relic has a new free tier. Here's how to sign up.

July 30th, 2020 · 2 min read

Building a Portfolio/Resume Site with Gatsby, Part 2 - Customizing your site and merging your changes

This is about customizing your Gatsby site. Part 1 was entry-level. This is Part 2 though. Part 2 is much more involved. Part 2 is where you make your site your own.

July 27th, 2020 · 4 min read
© 2020 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