Building a Portfolio/Resume Site with Gatsby, Part 3 - Deploying to Firebase
- Published on
- • 3 mins read
- Written by
- Name
- Gavin Johnson
- @thtmnisamnstr

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.
- 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)- Type 'y' to let Firebase collect usage and error reporting info. Type 'n' not to (I go with 'n') and press Enter
- Select your Google account that you use for Firebase
- In Terminal, the output should be something like
✔ Success! Logged in as [your.email]@gmail.com
cd
to your site's root directory- Select the Firebase project you created previously and press Enter
- For public directory, type 'public' and press Enter
- If asked to overwrite anything, type 'n' and press Enter
- Your terminal output should be:
- In terminal,
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

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.).