Host a static website

Oct 14, 2024 google-cloud website hosting gcs
Share on:

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

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.
1gcloud storage buckets update gs://[bucket name] \
2  --web-main-page-suffix=index.html \
3  --web-error-page=404.html
  1. Add Cors configuration

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

1[
2    {
3      "origin": ["*"],
4      "method": ["GET"],
5      "responseHeader": ["Content-Type"],
6      "maxAgeSeconds": 3600
7    }
8]

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:

1gsutil cors set bucket-cors.json gs://[bucket name]
  1. Amend the bucket permission settings

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

1gcloud storage buckets add-iam-policy-binding  gs://[bucket name] \
2  --member=allUsers \
3  --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.
  1. 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.