How to host a static website with Google Cloud - GCP

How to host a static website with Google Cloud - GCP

This step-by-step guide shows you how to set up a Cloud Storage bucket to host a static website. Static websites can include client-side codings such as HTML, CSS, and JavaScript. They cannot contain dynamic code such as server-side scripts such as PHP.

Why Google Cloud Storage?

It is amazingly fast for pennies a month!

You can host 10 GB of websites at multi-regional for high-availability for less than $1/per month.

Getting Started

This tutorial walks you through setting up a free Google Cloud bucket to serve a static website:

First, sign up for Google cloud.

Set up a project (if you haven’t already).

Add your domain name to Google Cloud DNS >> Network Services >> Cloud DNS.

Create a DNS zone.

Add the Name servers to your domain registrar. You can point your A-record to your bucket, but for simplicity, I’m showing you how to let Google host your DNS.

Wait, Name servers can take a while to propagate.

Next, Google needs to verify you own the domain. You do this by adding the domain to Google Search Console. You cannot skip this step!

Add the text record to your DNS and verify.

In Google Cloud Platform, Select the storage tab.

Create a new Bucket. Name it exactly as your URL appears.

To connect everything with an SSL, you need to create a load balancing service. I spent a few days stuck at this step, so I decided to create this article because I couldn’t find a solution anywhere.

Create Load Balancer

Select HTTP Load balancer.

In Backend Config >> Backend bucket >> Create backend bucket >> Browse.

Select your bucket, name the balancer, press create.

Here is where I was stuck for a bit:

In Frontend Configuration. “Reserve a new static IP address.” If you don’t do this, your HTTP + HTTPS will have 2 different IP addresses.

Create a certificate.

Be sure to add both HTTP + HTTPS protocols in Frontend Config.

Review and finalize.

Back under the “Storage” tab, find your domain name / bucket.

Edit website configuration

Add your main page + 404 page.

Going back to the same dropdown, this time select Edit Bucket Permissions. Add a member: allusers, Role –> Storage >> Storage Object Viewer. This will allow the general public to view your new website.

Now all that is left is uploading your website files. You can do it a few ways, but to keep this simple, I’d recommend uploading using the browser upload tool.

Relish in your success, you are now hosting an incredible fast and affordable website on Google’s servers.