How to Host a Static Website for Free on Google's Firebase Hosting Platform
If you're looking to host a simple website for free, you're not limited to free website makers like Google Sites or Wix. Many cloud providers offer hosting platforms with generous free tiers that allow you to have full control over the content you serve.
What is a "static" website?
Unlike how it looks, a "static" website does not mean that your site should look like a GeoCities 1999 page. You are always free to serve JavaScript content, even full single page web applications designed with frames like React.
Static simply means that your content doesn't change until it's served. For example, WordPress responds to requests and changes the content of the page using PHP, depending on the page you requested. A static website, on the other hand, is simply HTML plus any images, CSS, or JavaScript that you send with. You are free to modify it on the client side with JavaScript after sending it to the user, this is how React works, but even then the JavaScript file itself is static.
The advantage of having your website completely static is that you don't actually need a fancy web server like NGINX or Apache to serve your content. Because these are only static files, many vendors, like AWS and Google Cloud Platform, offer ways to host these types of websites from cloud storage buckets.
Google offers such a service, for hosting from a Cloud Storage bucket using a Load Balancer or CDN in front of it. However, it is designed for high performance corporate sites and is not completely free. For simple deployments, you can use Google's Firebase platform, which is designed to provide backends to mobile apps, but also includes a fantastic static content hosting service that you can use.
Setting up a Firebase deployment
Firebase is part of the Google Cloud Platform, so you'll need a GCP project to use with Firebase. Go to the GCP Console and create a new one from the drop-down list in the menu bar:
You will need the Firebase CLI for the next part. Download the binary for your operating system, then run it firebasefrom your terminal to log in and connect the Firebase CLI to your Google account.
firebase
Next, navigate to the directory cdyou want to use for your website code with, then run firebase init:
This will configure the current directory as a Firebase project. For functionalities, choose "Hosting".
Select "Add Firebase to an existing Google Cloud Platform project," then select the GCP project you created. You can create a brand new project here, but in our testing it gave an error during setup and we still need to create one manually.
For the hosting configuration, you can define the public directory (by default "public"). If you're using a client-side library like React to handle routing, you can set up the project as a single page app, which will rewrite all URLs to point them to the single index.html page.
Firebase should now be configured. You can deploy the website for the first time using firebase deploy. This command will synchronize your local directory with your cloud deployment. Anytime you want to update the site, you just have to run it firebase deployagain.
Your site will now be visible on projectname.web.app. However, you'll probably want to set up a custom domain, which is pretty easy. You will of course need a custom domain registered with a domain registrar, such as Namecheap or Google Domains.
Go to the Firebase console, select your project, then select “Hosting” from the sidebar. Click on "Add a custom domain".
Enter your domain and you will receive a TXT record. Go to your domain registrar's settings and set the hostname and value to the values given to you as a new TXT record.
Once verified, you will of course need to point the domain to Firebase. Firebase will give you two IP addresses to add to your domain. Replace any existing "A Records" you may have.
Your site will display a red HTTPS warning for a little while, while Firebase will automatically provide you with a free SSL certificate. You don't have to do anything because this process is automatic.
Whenever you need to deploy updates, make changes to the code in the public folder and run firebase deployfrom your terminal. You should see the changes deployed in less than a minute.