Step-by-step static website hosting using Google Cloud, Firebase and Cloudflare (almost) for free

Reading Time: 5 minutes

StatPart I: How to host a static website step by step?

There are two things this tutorial explains:

  1. How to host a static website using Google Cloud Storage buckets for prototyping purposes;
  2. How to set-up Firebase Hosting for the live website.

The first step in any case is setting up a Google Cloud account. You can start with Google Cloud Storage or Firebase. The main prerequisites are a Google account and a debit/credit card. There is no difference between the two routes because having access to one gives you access to the other automatically.

Static Website Hosting with Google Cloud Storage

This is the the manual for hosting static websites on Cloud Storage: https://cloud.google.com/storage/docs/hosting-static-website. Conceptually, the process consists of four simple steps:

  1. Prove to Google as shown here that you have control of the domain name you want to host.
  2. Let’s say the domain name is mywebsite.com, create a bucket in Cloud Storage called www.mywebsite.com
  3. Configure the bucket to act as a web page as explained here:

Note that the entry for main page and not-found is the same, index.html. This way you can use browser side routing with libraries like react-router-dom and ensure at the same time that visitors can still access URLs like wwww.mywebsite.com/page1 directly.

4. Configure your DNS provider to serve the content of the bucket as per the manual above. Cloudflare as a DNS provider I recommend offers the following cool features:

  • They cache any static content for the website and reduce your bill for traffic (egress) from the bucket.
  • They provide useful stats about traffic to the website removing the need for web page trackers initially. Later on, when there is steady traffic through your website knowing where people click can be relevant for further developments and web trackers become handy.
  • The free tier of Cloudflare is pretty comprehensive and probably covers what your need.

The end!

Hosting the live website with Firebase Hosting and Clouflare

Hence, Firebase Hosting comes to the rescue.

  1. The getting-started manual is here.

By default Firebase will generate two default URLs for your page:

  • {project-id}.web.app
  • {project-id}.firebaseapp.com

where you can immediately see the deployed website.

2. Here is how to add your own domain name to that list.

3. Go to the Firebase to get the IP address for the hosted website and set up the DNS records in Cloudflare to point to that IP address as explained here.

Here is how the techccino.com records looked like on Cloudflare:

Note: the Cloudflare proxy status has to be set to DNS only in that case. Then, the TLS certificates from Let’s Encrypt will be automatically provisioned by Google for you.

After setting up the DNS records, it will take up to an hour for Firebase to actually provision a TLS certificate for the custom domain. Be patient!

Firebase Command Line Interface (CLI) to upload the website

Upload the website using Firebase CLI wizard. How to install the CLI on your computer is explained here.

These are the steps to initialise the project locally:

  1. Run firebase init in the folder where the static react-app is located.
  2. Select hosting in the wizard.

3. Compiled react apps are stored by default in the build folder, which is your public directory.

4. All path requests must point to index.html for a react website.

5. Final step: do NOT overwrite if there is an existing build/index.html file.

Part II: Why go through all of this?

A brief attempt with WordPress

  • The website was using only 10% of the WordPress functionality, i.e. no news section, user area, blog posts and so on.
  • The TLS certificates were provisioned manually and every now and then they would expire. Oops!
  • The virtual machine was running 24/7 when all what the Apache HTTP server was doing was serving static content.
  • WordPress needed manual updates all the time.

None of these points was a deal breaker but the whole set-up was fragile.

Google Cloud Storage for Website Hosting

The cost of this approach is a few cents unless your page generates lots and lots of traffic.

Pros

  • The TLS certificates are provided by Google, so no need for any extra work there.
  • It is incredibly easy to prototype and make changes. If you need to deploy another version, just create a new storage bucket and update the DNS records accordingly.

Cons

  • There are no stats about the website traffic.

Cloudflare for Basic Traffic Analytics

Just to clarify, this is not to say Google or other providers don’t offer something similar, but the Cloudflare platform is incredibly clear and easy to use. Also this kind of traffic monitoring is the least intrusive in terms of privacy. The next step would be no monitoring at all.

While writing this article I had another look at the Cloudflare platform and found two extra really nice features:

  • automatically compress (minify) static resources;
  • the option to redirect mobile users to a sub-domain, optimised for mobile devices.

Not bad at all!

Conclusion

Techccino brings simplicity to every day operations so that our customers can keep building and expanding their business and not worry about unnecessary running costs and increasing complexity.

My name is Nik Vaklev and I am the founder of Techccino Ltd | Serverless Apps

Leave a Reply

Your email address will not be published. Required fields are marked *