paint-brush
Hosting a Free Static Website on Google Cloud Storageby@mlabouardy
11,704 reads
11,704 reads

Hosting a Free Static Website on Google Cloud Storage

by Mohamed LabouardyJanuary 4th, 2019
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

This guide walks you through setting up a free bucket to serve a static website through a custom domain name using Google Cloud Platform services.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Hosting a Free Static Website on Google Cloud Storage
Mohamed Labouardy HackerNoon profile picture

This guide walks you through setting up a free bucket to serve a static website through a custom domain name using Google Cloud Platform services.

Sign in to Google Cloud Platform, navigate to Cloud DNS service and create a new public DNS zone:

By default it will have a NS (Nameserver) and a SOA (Start of Authority) records:

Go to you domain registrar, in my case I purchased a domain name from GoDaddy (super cheap). Add the nameserver names that were listed in your NS record:

PS: It can take some time for the changes on GoDaddy to propagate through to Google Cloud DNS.

Next, verify you own the domain name using the Open Search Console. Many methods are available (HTML Meta data, Google Analytics, etc). The easiest one is DNS verification through a TXT record:

Add the TXT record to your DNS zone created earlier:

DNS changes might take some time to propagate:

Once you have verified domain, you can create a bucket with Cloud Storage under the verified domain name. The storage class should be “Multi-Regional” (geo redundant bucket, in case of outage) :

Copy the website static files to the bucket using the following command:

gsutil rsync -R . gs://www.serverlessmovies.com/

After the upload completes, your static files should be available on the bucket as follows:

Next, make the files publicly accessible by adding allUsers entity with Object Viewer role to the bucket permissions:

Once shared publicly, a link icon appears for each object in the public access column. You can click on this icon to get the URL for the object:

Verify that content is served from the bucket by requesting the index.html link in you browser:

Next, set the main page to be index.html from “Edit website configuration” section**:**

Now, we need to map our domain name with the bucket we created earlier. Create a CNAME record that points to c.storage.googleapis.com:

Point your browser to your domain name, your website should be served:

While our solution works like a charm, we can access our content through HTTP only (Google Cloud Storage only supports HTTP when using it through a CNAME record). In the next post, we will serve our content through a custom domain over SSL using a Content Delivery Network (CDN).

Drop your comments, feedback, or suggestions below — or connect with me directly on Twitter **@**mlabouardy.