Taking Advantage of Firebase’s Free Hosting for My Personal Site

And stopping the flow of money from my wallet

I’ve owned Bolella.com since I was in college and thought: “I better grab it now before someone else gets it!” (You know, because the domain for my family name is practically synonymous with Google).

At the time, I also paid for a hosting service through the same vendor because, well, that’s what you did at the time. It didn’t seem like much at the time and it was enough for me to try different things with it (like hosting music, files, projects, sites for special events, etc).

But a decade later, it’s added up to a lot of money to host a site that I honestly update once in a blue moon these days.

Looking at how much I’ve paid cumulatively over the years, it’s just not worth me paying just to keep a tiny little piece of the internet (I’d like to think is mine) alive.

So, that’s when I considered free alternatives and after some research settled on Firebase Hosting.

Why Firebase

There are a few reasons. The first, and I realize this is personal, is that I had experience working with Firebase’s other services already, so I had an account (also free) and knew my basic way around.

Second, it’s free*. “Woah, what is that asterisk doing there?” you’re asking.

It’s because it’s free for 1GB of storage and up to 10GB/month of traffic. That might not seem like a lot of storage, but it is workable. Keep in mind that what I’m proposing is taking advantage of a free tier hosting plan for a small/personal site.

There’s going to have to be some give and take, considering we’re aiming for free. I’ll give an example of how I worked around those limits with a creative little hack job so that I barely approached the limit.

The free tier also comes with a basic domain name under their own subdomain (web.app or firebaseapp.com) or you can link to your own custom domain (sold separately).

Lastly, you have all the other Firebase services available in the same project, so if you ever wanted to expand the functionality of your site, a lot of services are right there already.

How I Use It

Here’s the deal. To set up a project and the Firebase CLI, I refer you to the official Getting Started page. I could do that here but I’d essentially be copy-pasting, it’s too simple a process to rewrite.

Also, I won’t go into detail on actually creating a site but I will go into what I used.

Here are the two pages I had to transfer from my old site:

  • Landing page that points to my other pages
  • Wedding photo album

Note: On the landing page of my site, you’ll see a link to some of my old blogs. Ironically, they’re hosted for free (Google Sites and GitHub page), so I only needed to reference them.

I didn’t use them as my main hosting, however, because they do have their own limitations.

Landing Page With Hugo

So, after I went through the Getting Started page, I wanted to take my site from my old host and move it to the new project.

The first part was with the landing page. I created it using Hugo, a rather simple website framework for creating static websites, and one of the free themes from their theme gallery.

Because I had already followed the steps to have my custom domain point to the new Firebase project, I didn’t actually need to rebuild my landing page.

I simply copy-pasted it into the public folder of my project and then deployed. And that was it! My landing page was live!

Wedding Album Using Google Drive

After my wife and I got married, we wanted a simple space for our family to see our photos. We did post them “privately” on Facebook but not everyone had an account.

So, I whipped up a simple site with a JavaScript-powered gallery. Originally, I posted every picture in its original size as well as their thumbnails (which I created with a Mac Automator script, by the way).

The thumbnails were so that you can scroll through the images and actually load the site, the originals because there were members who wanted to make prints.

This was going to be a problem on Firebase as I only got 1GB free, even if I did put it on its own separate project.

The solution was actually pretty sweet. See, when you have wedding photos, you back them up on multiple DVDs, flash drives, hard drives, computers, and, of course, in the cloud.

In my case, I had them stored on Google Drive. Somehow, all of my images still fit within the free tier of Drive, so I was in the clear.

What I learned about Drive is that, after changing your sharing permissions, you can direct-link to each individual image and a generated thumbnail of that image!

This was an instant game-changer. So, I compiled all of the URLs (both original size and thumbnails) and edited my gallery to reference those links instead.

When it came time to deploy, I copy-pasted the wedding site sans photos. This significantly reduced the size of my site to be well within the free tier limits.

Plus, this gave the photos on my Drive a new purpose. I also set up my project to be linked to the ‘wedding’ subdomain, and as my custom domain was already registered in my landing page project, it was even easier to setup.

Once I hit deploy, the site was live and running like a charm.

What This Could Mean for You

I realize these are a couple of very particular use cases that you might not relate to or care about (and you may even be judging my web dev skills, which are not my forte).

But the point I’m making isn’t about my own purposes. Rather, it’s about how Firebase hosting is more than flexible enough to meet a variety of needs, even at the free tier.

Notice that, in both use cases, the only Firebase-specific steps were creating the projects, linking my domain, being mindful of the free-tier limitations, and then hitting deploy. And maintenance only requires repeating the last two steps.

When it comes to the limitations, they are workable if you’re willing to develop a plan for it.

In terms of implementations, I was able to deploy different implementations of static pages with the same steps. But, as for content, I thought it was pretty crafty using Drive.

Referencing cloud accounts could help, but also consider other venues like hosting, linking, and/or embedding images from Imgur or Deviant Art, music on Soundcloud, files on Dropbox, and really where ever else content can be stored these days.

Boiled down, having a personal site has become about focusing on my creation, my needs, and what I wanted to share.

That’s what I want to be focused and concerned with, not about how much I’m paying for anything or having to decide on giving up on my own tiny piece of Internet real estate under my own, very popular custom domain name.

If you’re looking to host a personal page, a portfolio, an event site, a combination of, or whatever, Firebase is a great and free way to go.