Hosting a static website on Google Cloud using Google Cloud Storage

Get Cooking in Cloud

Introduction

In this mini series we are covering, how to create websites on Google Cloud. This is the second article in the series.

  1. Hosting web apps on Google Cloud: An Overview
  2. Hosting a web app on Google Cloud using Google Cloud Storage (This blog)
  3. Hosting a web app on Google Cloud using Cloud Run
  4. Hosting a web app on Google Cloud using Google Compute Engine
  5. Scaling web app on Google Compute Engine
  6. Case Study

Let’s say you’re a small company looking to set up a basic web presence. You don’t expect a lot of traffic, and don’t want to pay a lot to get up and online. So, read on to find how to start small by deploying a static website.

What you’ll learn

  • Create static website on Google Cloud
  • Point your domain to GCS
  • Create bucket, upload and share the files using access control
  • Set up index page suffix and error page
  • Test the website

Prerequisites

  • Read the first article that covers high level concepts about setting up websites on Google Cloud.

Check out the video

What is a static website?

Static websites are a good option for sites like blogs — where the page rarely changes after it has been published, or where there isn’t any dynamically-generated content. Static web pages can contain client-side technologies such as HTML, CSS, and JavaScript. They cannot contain dynamic content such as server-side scripts, like PHP.

How to create static websites on Google Cloud

Before we begin, we need to make sure we are properly set up in Google Cloud Console. Ensure the following:

  • You have a GCP project created
  • A Billing account is set up
  • You have a domain that you own or manage (this should be a Top level domain). To verify that you manage the domain, check here.

Now that we’ve covered the logistics, there are four steps to set up a static web app.

Step 1 : Point your domain to GCS

First step is to connect your domain to cloud storage. To do that, create a CNAME record that points to c.storage.googleapis.com. Your domain registration service can help with this.

www.example.com CNAME c.storage.googleapis.com.

Step 2 : Create the bucket that is linked to your domain

Second step is to create a Google cloud storage bucket. To do this, browse to the google cloud console, click on cloud storage, and click create bucket. Make sure the bucket name matches the CNAME created for your domain. In this case, the storage bucket should be named www.example.com

Step 3 : Upload and share your site’s files

Third step is to upload the files you want your website to serve. We can do this in one of two ways.

First, by directly uploading files using the google cloud console.

Second, is using gsutil command line, which is great for when you have an existing website.

gsutil rsync -R local-dir gs://www.example.com

Access Control:

Once the files are uploaded, we need to make sure they are properly shared for access. You can either make all files in your bucket publicly accessible, or you can set individual objects to be accessible through your website. Generally, making all files in your bucket accessible is easier and faster.

At this point, we essentially have a functioning static website but it is recommend to assign an index page suffix and a custom error page to guide the users better.

Index page suffix and Custom error page:

Index page suffix

This helps in scenarios when say you have no file named apple in your bucket www.example.com. In this situation, if a user requests the URL http://www.example.com/apple, Cloud Storage attempts to serve the file www.example.com/apple/index.html. If that file also doesn’t exist, Cloud Storage returns an error page with 404 response.

You can learn more about setting this up here.

Step 4 : Test the website

The last step is to test our static website. Verify that content is served from the bucket by requesting the domain name in a browser.

Serving HTTPs content on GCS

Serving HTTPs content on GCS through Load Balancer

One important thing to note is that GCS ONLY supports HTTP. In order to serve HTTPS, and get all that security goodness, we need to either using direct URIs using a CNAME redirect, or migrate to using a load balancer as a front-end as shown in the picture.

Conclusion

In this article we learned how to start small and deployed a static web application on Google Cloud platform. We used Google cloud storage to host the static content and pointed the Domain name to the storage bucket.

Hosting static website on Google Cloud Platform

Next steps

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Priyanka Vergadia

Priyanka Vergadia

Developer Advocate @Google, Artist & Traveler! Twitter @pvergadia