Site logo

Not Playing – Spotify

#website#personal#tutorial

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

Published on
•
3 mins read
Written by
hero

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.
    • Alt Text
    • Alt Text
    • Alt Text
    • Alt Text
    • 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)
    • Alt Text
    • Type 'y' to let Firebase collect usage and error reporting info. Type 'n' not to (I go with 'n') and press Enter
    • Alt Text
    • Select your Google account that you use for Firebase
    • Alt Text
    • 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
    • Alt Text
    • Alt Text
    • Alt Text
    • Select the Firebase project you created previously and press Enter
    • For public directory, type 'public' and press Enter
    • Alt Text
    • If asked to overwrite anything, type 'n' and press Enter
    • Your terminal output should be:
i  Skipping write of public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  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...
=== Deploying to 'thtmnisamnstr'...

i  deploying hosting
i  hosting[thtmnisamnstr]: beginning deploy...
i  hosting[thtmnisamnstr]: found 135 files in public
✔  hosting[thtmnisamnstr]: file upload complete
i  hosting[thtmnisamnstr]: finalizing version...
✔  hosting[thtmnisamnstr]: version finalized
i  hosting[thtmnisamnstr]: releasing new version...
✔  hosting[thtmnisamnstr]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/thtmnisamnstr/overview
Hosting URL: https://thtmnisamnstr.web.app
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.).

View on GitHub