Spotted a bug? Have a great idea? Help us make google.dev great!

Every Small Business should have their own domain name & website - these are the foundation of your brand, and your method to communicate with potential customers. Your domain name and website are one of the primary ways that people find your business, discover what products and services you offer, find your contact details, and even transact business with you (e-commerce transactions).

If you're just starting your business, you're not expecting very much traffic, and you want a simple website hosted - you can do this on Google Cloud. Google Cloud makes the process very quick, easy, and inexpensive. Follow along below.

What you'll learn

  • How to Create a CNAME record
  • How to point that CNAME record at Google Cloud Storage.
  • How to Create a Google Cloud Storage bucket named like your domain.
  • How to Upload and set permissions on the static files for your website.
  • How to Test your website.
  • How to Add HTTPS support with a HTTPS LoadBalancer

Prerequisites

  • You'll need to be Owner / Administrator of your domain.
  • You'll need to have a Google Cloud Platform account.

Google Cloud Account & New Project

  1. If you don't already have a Google Account (Gmail or Google Apps), you must create one. Sign-in to Google Cloud Platform console (console.cloud.google.com) and create a new project:

You can also edit the Project ID, in this case I will set it to the same as the Project name. cooking-in-cloud-hipster.

  1. Make sure that billing is enabled for your Google Cloud Platform project. Learn how to enable billing.

Domain Ownership or Admin Rights

As mentioned in the prerequisites - you'll need a domain that you own or manage. If you don't have an existing domain, there are many services through which you can register a new domain, such as Google Domains. This tutorial uses the domain www.cookingincloudhipster.com - which is managed through Google Domains and admin.google.com

  1. Verify that you own or manage the domain that you will be using. Make sure you are verifying the top-level domain, such as cookingincloudhipster.com, and not a subdomain, such as www.cookingincloudhipster.com.


Note: If you own the domain you are associating to a bucket, you might have already performed this step in the past. If you purchased your domain through Google Domains, verification is automatic.

  1. Go to https://search.google.com/search-console/welcome - Enter your domain name and press continue...

  1. I purchased the domain with Google Domains - so it was automatically verified. If you're using another registrar - you could have a few more steps.

  1. Goto domains.google.com - click on "My domains" task... if you need to Sign-in, or if you are a first time user, use your email to login. Find your domain - www.cookingincloudhipster.com

  1. Click on "Manage" then "DNS"

  1. DNS Settings screen. Towards the bottom look for the "Custom resource records" panel.

  1. We're going to add a CNAME record as below...

A CNAME record is a type of DNS record. It directs traffic that requests a URL from your domain to the resources you want to serve, in this case objects in your Cloud Storage buckets. For more information about CNAME redirects, see URI for CNAME aliasing.

For www.cookingincloudhipster.com, the CNAME record will contain the following information:

NAME

TYPE

DATA

www.cookingincloudhipster.com

CNAME

c.storage.googleapis.com

And when you're done it should look like this...

Next, we'll create the Google Storage Bucket to hold our static site files.

  1. Go to the Google Cloud Platform console (console.cloud.google.com). In the left hand menu click on the STORAGE category and the "Storage" task...

  1. Click on "Create Bucket"

  1. Then will answer the questions...
  • Bucket Name: Make sure you name your bucket with your site name i.e. www.cookingincloudhipster.com (including the www. & .com)
  • Location: select Multi-region - so the content is available from more than one cloud region.
  • Storage Class: Standard is what we need for a website - you can find more about the other storage classes here.
  • Access Control: Set the bucket permissions for the whole bucket and its contents the same. More info on object-level & bucket-level can be found here.
  • When you're done it should look like the screenshots below...

  • Then click "Create"

So far in this codelab we have been using the Cloud Console GUI. However, Google Cloud can also be controlled using Google Cloud Shell, a command line environment running in the Cloud.

This Debian-based virtual machine is loaded with all the development tools you'll need. It offers a persistent 5GB home directory, and runs on the Google Cloud, greatly enhancing network performance and authentication. This means that all you will need for this codelab is a browser (yes, it works on a Chromebook).

To activate Google Cloud Shell, from the developer console simply click the button on the top right-hand side (it should only take a few moments to provision and connect to the environment):

activateCloudShell.png

Click the "Start Cloud Shell" button:

Screen Shot 2017-06-14 at 10.13.43 PM.png

Once connected to the cloud shell, you should see that you are already authenticated and that the project is already set to your PROJECT_ID :

gcloud auth list

Command output

Credentialed accounts:
 - <myaccount>@<mydomain>.com (active)
gcloud config list project

Command output

[core]
project = <PROJECT_ID>

Cloud Shell also sets some environment variables by default which may be useful as you run future commands.

echo $GOOGLE_CLOUD_PROJECT

Command output

<PROJECT_ID>

If for some reason the project is not set, simply issue the following command :

gcloud config set project <PROJECT_ID>

Looking for your PROJECT_ID? Check out what ID you used in the setup steps or look it up in the console dashboard:

Project_ID.png

IMPORTANT: Finally, set the default zone and project configuration:

gcloud config set compute/zone us-central1-f

You can choose a variety of different zones. Learn more in the Regions & Zones documentation.

The command line version of "create bucket" can be seen below.

gsutil mb gs://www.cookingincloudhipster.com

Now, obtain the the static files from your website developer, or marketing team. If you're doing it yourself, there are plenty of great tutorials on HTML & CSS.

Then upload these static files into the bucket that was just created...

Upload files using the Cloud Console

  1. In the Google Cloud Platform console (console.cloud.google.com). In the left hand menu click on the STORAGE category and the "Storage".

  1. Click on the bucket name - www.cookingincloudhipster.com

  1. Now you'll see the "Bucket details" page... click on "Upload folder" button...

  1. And upload the Folders & Files of your website...

Upload files using the Drag & Drop

  1. Or you can Drag & Drop...

Upload files using the gsutil rsync

  1. And finally, you can also use a command line utilities like gsutil with the rsync command to copy large numbers of files from your local machine to Google Cloud Storage.You can use the -R option to recursively copy directory trees. For example, to synchronize a local directory named local-dir with a bucket, use:

gsutil rsync -R local-dir

gs://www.cookingincloudhipster.com

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.

If you choose to control the accessibility of individual files, you can set the default object ACL for your bucket so that subsequent files uploaded to your bucket are shared by default.

Bucket Level Access Permissions

Recommendation: Apply access permission to the entire bucket as a whole. This is safer, and since it is static website all of the contents are likely necessary to readable for the site to load properly. If you have some design metadata (or hidden files like .DS_Store - which is used on Apple MacOS operating system, .is a file that stores custom attributes of its containing folder, such as the position of icons or the choice of a background image.) These can be hidden or deleted individually.

  1. On the Bucket details page there is a "Permissions" tab...

  1. And Click "Add members" button...

  1. Then add "allUsers" with "Storage Object Viewer" rights...

  1. And then you should see...

  1. This means that these files are now visible to the general public... Hooray!

Now, the last step is to assign an index page suffix, which is controlled by the MainPageSuffix property and a custom error page, which is controlled by the NotFoundPage property. Assigning either is optional, but without an index page, nothing is served when users access your top-level site, for example, http://www.cookingincloudhipster.com/

Index pages

An index page (also called a webserver directory index) is a file served to visitors when they request a URL that doesn't have an associated file. When you assign a MainPageSuffix, Cloud Storage looks for a file with that name whose prefix matches the URL the visitor requested.

For example, say you set the MainPageSuffix of your static website to index.html. Additionally, say you have no file named directory in your bucket www.cookingincloudhipster.com. In this situation, if a user requests the URL http://www.cookingincloudhipster.com/directory, Cloud Storage attempts to serve the file www.cookingincloudhipster.com/directory/index.html. If that file also doesn't exist, Cloud Storage returns an error page.

The MainPageSuffix also controls the file served when users request the top level site. Continuing the above example, if a user requests http://www.cookingincloudhipster.com, Cloud Storage attempts to serve the file www.cookingincloudhipster.com/index.html.

For more information on the cases in which the index page is served, see Website configuration examples.

Error page

The error page is the file returned to visitors of your static site who request a URL that does not correspond to an existing file. If you have assigned a MainPageSuffix, Cloud Storage only returns the error page if there is neither a file with the requested name nor an applicable index page.

When returning an error page, the http response code is 404. The property that controls which file acts as the error page is NotFoundPage. If you don't set NotFoundPage, users receive a generic error page.

In the following sample, the MainPageSuffix is set to index.html and NotFoundPage is set to 404.html:

gsutil web set -m index.html -e 404-Page.html gs://www.example.com

  1. Now open a browser and go to your website - www.cookingincloudhipster.com
  2. Then we'll see the page below...

And individual Product Pages...

  1. Volia! It works and is available via HTTP... while ‘works" - your visitors will see a "Not Secure" in the URL bar, because this site isn't using HTTP and SSL to encrypt the data sent between the browser and the server. HTTP with SSL or HTTPS is considered best practice on the modern web, and since Cooking In Cloud Hipster - is going to be an online shopping experience - we definitely need HTTPS.
  1. Goto y

Cleanup

If you are planning on doing the other labs in this series, don't do the cleanup now, do it after you are done with all the labs in the series.

Delete the GCP Resources...

  • Delete the GS Bucket
  • Delete the CNAME record

Your created a static website & hosted it on Google Cloud!

Check out these other resources: