Building a Static Website on Google Cloud

  1. Go to your Google Cloud Console or https://console.cloud.google.com/
  2. Select an existing project or create a new one.
  3. Create a storage bucket.
  4. Configure your bucket
  5. Upload your website files
  6. Set the permissions
  7. Configure the index document
  8. Point your storage bucket to your domain.

Detailed Explanation

1. Go to your Google Cloud Console or https://console.cloud.google.com/

google cloud console

2. Select an existing project or create a new one: This will be the container for all the resources associated with your website. By default, you can create 25 projects and you can request Google to add more.

select existing project

3. Create a storage bucket by (1) clicking the hamburger menu; (2) select Cloud Storage; (3) then Buckets; (4) then Click Create a Bucket. This will be used to store your HTML website’s files.

create a storage bucket
create a storage bucket

4. Configure your bucket using your domain name including the www. If you don’t, you’ll have a hard time pointing your domain to your bucket. For example, my domain is caninternationaltravel.com, I’ll name the bucket with www.caninternationaltravel.com then click Continue.

name your bucket

And then select where to store your data: Multi-region if your website audience are located globally; Dual-region if your audience are limited to 2 regions: And Region for one specific region.

choose where to store your data

If you want to keep the cost down or want to take advantage of the Free-tier, select Region only. Then select us-central, us-east or us-west for the Free-tier.

google cloud region

From time to time, Google may update their Free Tier terms. For updated info, go to Google’s site: https://cloud.google.com/free/docs/free-cloud-features

Then choose a default storage class for your data, the options are Standard, Nearline, Coldline and Archive. Choose Standard since it’s designed for frequently accessed data

google cloud storage class

For choose how to control access to objects, select Fine-grained so we can control the permission of each folder. Other than that, that’s all the settings you need to take care of. Then click Create button.

5. Upload your website files: You can use the Cloud Console or a tool like gsutil to upload your website files (HTML, CSS, JavaScript, images, etc.) to the storage bucket. The easiest way is dragging your files to your bucket.

upload your website files

6. Set the permissions: Select all the files then set the permissions for the storage bucket to allow public access to your website files by clicking the Permissions tabs

set permissions

Click Add

add permission

Add principals and roles. Under New Prinicipals, select allUsers. And under Role, select Storage Legacy Object Reader.

add principals and roles

Then it’ll warn you that you are about to make your files public. Click Allow access to confirm.

makle allusers public


7. Configure the index document: Set the index document to the file that should be served as the home page of your website. Typically this is a file named “index.html”. To do this, select your Domain and click the 3 dots. From the choices, select Edit website configurations.

configure index file

Another window will pop where you can enter index.html and 404.html if you have one.

configure index file

8. Point your storage bucket to your domain. The instructions here will vary depending on your domain provider. I’ll show you how to configure your storage bucket to Google domains.

Go to your domain provider and select the domain that you are trying to configure. Then select DNS.

google domains dns config

Then add a new custom resource record and enter the following info:

Hostname:www / Type: CNAME / TTL: 3600/ Data:c.storage.googleapis.com

c.storage.googleapis.com

These configuration may take up to 24 hours to propagate. You can test your website by typing www.yourdomain.com and see if that loads.

If you want the non-www to work when visiting your domain, here’s my tutorial on that.

Here’s my step by step video

Posted

in

by