[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).

New Project
New Project

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

Cloud DNS
Cloud DNS

Create a DNS zone.

Create a DNS Zone
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.

Nameserver Settings
Nameserver Settings

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!

Google Search Console Verification
Google Search Console Verification

Add the text record to your DNS and verify.

In Google Cloud Platform, Select the storage tab.

Google Cloud Platform Storage
Google Cloud Platform Storage

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

Create a bucket
Create a bucket

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.

Load Balancer
Load Balancer

Create Load Balancer

Select HTTP Load balancer.

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

Select your bucket, name the balancer, press create.

Create a Backend Bucket
Create a Backend Bucket

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.

Create a new Certificate
Create a new Certificate

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

Frontend Configuration
Frontend Configuration

Review and finalize.

Review Finalize
Review Finalize

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

Edit website configuration

Edit website configuration
Edit website configuration

Add your main page + 404 page.

Website Configuration
Website Configuration

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.

add roles
add roles

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.

Bucket Details
Bucket Details

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

Isaac Adams-Hands

Full Stack Developer, Digital Marketer, and InfoSec enthusiast. He received his Bachelor’s Degree from the University of Western Sydney and his Business Diploma from Georgian College before joining various marketing positions in search portals, e-commerce, higher education, and addiction recovery services.

Follow @ twitter

Related posts

Staying off mailing lists

Just saw an article I would like to read, but I noticed it was set up that you had to give all of your information to the business. Normally, I don’t mind, but this time I found how much I had to give away (personal information) wasn’t worth the skimming I’d most likely do when… Read More

Force SSL on a WordPress

I’ve noticed that a .htaccess redirect works from the root folder down, but if you access the website from an old link you won’t be forced to HTTPS. Updating the WP URL structure does not help The Redirect This will work to force the redirect: If you are running WordPress in a sub folder, the… Read More