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
- Click the Add Project tile
- Give your project a name and click Continue
- Enable Google Analytics for your site (or not, your choice) and click Continue
- Select your Google Analytics location, configure your Google Analytics settings, accept both terms checkboxes, and click Create Project
- 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
- 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
- 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.
- You should get a login successful screen (you can close this window)
- 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
- Press the down arrow until the "Hosting: ..." option is highlighted, press the space bar to select it, and press Enter
- Use the up and down arrows to highlight "Use an existing project" and press Enter
- 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
- 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
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.
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.).
Top comments (0)