If you’re looking to host a simple website for free, you aren’t limited to free website makers like Google Sites or Wix. Plenty of cloud providers offer hosting platforms with generous free tiers that allow you to have total control over the content you serve.
What Is a “Static” Website?
Contrary to how it sounds, a “Static” website doesn’t mean your site needs to look like a 1999 GeoCities page. You’re still free to serve JavaScript content, even full single-page web apps built with frameworks like React.
Static simply means that your content doesn’t change before being served. For example, WordPress responds to requests and changes the page content using PHP, depending on the page you requested. A static website, on the other hand, is just plain HTML, plus any images, CSS, or JavaScript you send along with it. You’re free to change it client-side with JavaScript after it gets sent to the user, which is how React works, but even in that case, the JavaScript file itself is static.
The benefit of having your website be fully static is that you don’t actually need a fancy web server like NGINX or Apache to serve your content. Because they’re just static files, many providers, like AWS and Google Cloud Platform, offer ways to host these kinds 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, that’s designed for high performance enterprise sites, and isn’t entirely free to use. 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 Google Cloud Platform, so you’ll need a GCP project to use with Firebase. Head over to the GCP Console and create a new one from the dropdown in the menu bar:
You’ll need the Firebase CLI for the next part. Download the binary for your operating system, then run the firebase command from your terminal to log in and connect the Firebase CLI to your Google account.
Then, navigate to the directory with cd that you want to use for your website’s code, and run firebase init:
This will set up the current directory as a firebase project. For the features, choose “Hosting.”
Select “Add Firebase to an existing Google Cloud Platform Project,” and select the GCP project you created. You can create a brand new project here, but in our testing it gave an error while setting up and we have to create one manually anyway.
For the hosting setup, you can set the public directory (defaults to “public”). If you’re using a client-side library like React to handle routing, you can configure the project as a single page app, which will rewrite all URLs to direct to the single index.html page.
Firebase should now be set up. You can deploy the website for the first time using firebase deploy. This command will sync your local directory with your cloud deployment. Whenever you want to update the site, you simply need to run firebase deploy again.
Your site will now be visible at projectname.web.app. However, you probably want to set up a custom domain, which is pretty easy. You will, of course, need a custom domain registered from a domain registrar, like Namecheap or Google Domains.
Head over to the Firebase Console, select your project, and select “Hosting” from the sidebar. Click “Add Custom Domain.”
Enter your domain, and you’ll be given a TXT record. Head over to your domain registrar’s settings, and set the hostname and value to the values given to you as a new TXT record.
Once it’s verified, you’ll, of course, need to point the domain at Firebase. Firebase will give you two IP addresses to add to your domain. Replace any existing “A Records” you may have.
Your site will show a red HTTPS warning for a little bit, while Firebase provisions a free SSL certificate for you automatically. You don’t need to do anything as this process is automatic.
Whenever you need to deploy updates, make changes to the code in the public folder, and run firebase deploy again from your terminal. You should see changes deployed in under a minute.
