richrose.dev

Introduction

The Hosting a static website blog post walks through the essentials of running a website from a Google Cloud Storage bucket.

In general just remember that the bucket name needs to be globally unique.

ProTip: prefix the bucket name with the Google project identifier e.g. myawesomeproject-bucket

In this post, I show you how to add a landing page to a Google Cloud Storage bucket. If you just need a quick and easy website (e.g. not concerned about domains, SSL etc), this is a really simple option.

Steps

To get up and running, we need to do a couple of activities

Create a bucket

Upload website content to the bucket

Add website configuration

Add web default settings on the bucket. Note:

The setting below expects an index.html as the main page.
It also adds a 404.html file for content not accessible on the website.

            NODE_TYPE // bash
        
gcloud storage buckets update gs://[bucket name] \
  --web-main-page-suffix=index.html \
  --web-error-page=404.html

Add Cors configuration

A basic cors configuration file bucket-cors.json that enables HTTP GET from any origin is shown below:

            NODE_TYPE // json
        
[
    {
      "origin": ["*"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
]

The file needs to be applied to your bucket to stop those nasty CORS messages when using web based browsing. To apply this to the bucket, use the following command:

            NODE_TYPE // bash
        
gcloud storage buckets update gs://[bucket name] \
  --cors-file=bucket-cors.json

Amend the bucket permission settings

In general websites are publically accessible, so apply the necessary permission for general internet access as below:

            NODE_TYPE // bash
        
gcloud storage buckets add-iam-policy-binding  gs://[bucket name] \
  --member=allUsers \
  --role=roles/storage.objectViewer

Note:

The allUsers role is a special Google Cloud user which means make it public.
The permission roles/storage.objectViewer enables the public to view the files within the stated bucket.

Test the website

From the bucket click on the index.html to show the public url e.g. https://storage.googleapis.com[bucket name]/index.html You now successfully deployed a static website in Google Cloud.

Host a static website (gcloud)

Introduction

Requirements

Steps