Host a static website

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.

Requirements

• Google Cloud Project
• Static Website content e.g. School Website, Business Page, Hugo Blog!

Steps

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

1. Create a bucket
2. Upload website content to the bucket
3. 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.

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

4. Add Cors configuration

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

[
    {
      "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:

gsutil cors set bucket-cors.json gs://[bucket name]

5. Amend the bucket permission settings

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

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.

6. 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.