Creating a Static website in Google Cloud Storage

Jan 9, 2021 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

Getting Started

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

  • Download the example website to your device
  • Create a bucket
  • Upload content to the bucket
  • Amend the bucket settings
  • Test the website

Download the Example

  • Go the link and download the website
  • Unzip the downloaded file e.g.
1unzip me.zip

Create a bucket

A bucket is an object store for data. This is similar to having a storage device in the cloud. Open your Google Cloud project and select the Storage option from the left hand navigation bar. Create a Bucket, making sure to:

  • Give your bucket a unique name
  • Choose a location type e.g. regional or multi-region
  • Choose a Standard storage class e.g. Stardard
  • Select Google Managed Keys

:inline

Upload content to bucket

Now the Storage bucket is available, we are going to use the UPLOAD FOLDER option to upload a website example.

  • Click on the bucket name
  • Use the upload options to add the example website
  • The bucket should now contain the exmaple website

:inline

Amend the bucket settings

With the bucket now containing the website, the content is now accessible to authenticated users. However the website needs to be made public so that anyone can access the content. Amend the bucket permissions to allow public access.

  • Use the Permissions tab to alter the bucket access
  • Add a new member permission of allUsers meaning any user
  • Add a new role permission for allUsers of Storage Object Viewer
  • Get the public URL for the index.html file

The above changes means any user accessing the bucket has viewer (Read Only) permissions.

:inline

Test the website

Use the public URL to access the website. Enter this in the browser to access the uploaded website.

:inline

Google provides some additional guidance on setting up your static web page: