Hosting a Static Website

This tutorial describes how to configure a Cloud Storage bucket to host a static website. Static web pages can contain client-side technologies such as HTML, CSS, and JavaScript. For more information on static web pages, such as examples, tips and troubleshooting, see the Static Website page.

This tutorial also applies to hosting static assets for a dynamic website.

Objectives

In this tutorial you will:

  • Associate a Cloud Storage bucket with a domain name.
  • Upload your site's files.
  • Test the website.

Costs

This tutorial uses the following billable component of Cloud Platform:

  • Google Cloud Storage

See the Monitoring your storage charges tip for details on what charges may be incurred and how to estimate and track your charges.

Before you begin

  1. Sign in to your Google account.

    If you don't already have one, sign up for a new account.

  2. Select or create a Cloud Platform Console project.

    Go to the Projects page

  3. Enable billing for your project.

    Enable billing

  4. Have a domain that you own or manage. If you don't have an existing domain, register a new domain.

    This tutorial uses the domain example.com.

  5. Verify that you own or manage the domain you will be using. To demonstrate that you are an owner or manager of a domain, use one of the Google Webmaster Central verification processes. Make sure you are verifying the domain, for example, example.com, and not a site on the domain, such as www.example.com.

    Note: If you own the domain you are associating to a bucket, you might have already performed this step in the past.

    For more information, see Domain-Named Bucket Verification.

Creating a CNAME alias

Create a CNAME alias that points to c.storage.googleapis.com.

A CNAME alias is a DNS record that lets you use a URL from your own domain to access resources, such as a bucket and objects, in Cloud Storage using your custom domain URL. For example, for example.com, the CNAME record might contain the following information:

NAME                  TYPE     DATA
www.example.com       CNAME    c.storage.googleapis.com

Your domain registration service should have a way that you can administer your domain, including adding a CNAME record.

For more information about CNAME redirects, see URI for CNAME aliasing.

Creating a bucket

Create a bucket whose name matches the CNAME you created for your domain.

For example, if you added a CNAME record pointing www.example.com to c.storage.googleapis.com, then create a bucket with the name "www.example.com".

To create a bucket:

Console

  1. Open the Cloud Storage browser in the Google Cloud Platform Console.
    Open the Cloud Storage browser
  2. Click Create bucket.
  3. In the Create bucket dialog, specify:
    • The Name of your bucket.
    • The Storage class for your bucket: Standard.
    • The Location of your bucket: United States.

    New Standard Storage bucket.

  4. Click Create.
  5. If successful, you are taken to the bucket's page with the text "There are no objects in this bucket."

gsutil

Use the gsutil mb command:

gsutil mb gs://www.example.com

If successful, the command returns:

Creating gs://www.example.com/...

Uploading your site's files

To add to your bucket the files you want your website to serve:

Console

  1. In the Cloud Storage browser, browse to the bucket that you created.
  2. Click Upload files.
  3. In the file dialog, browse to the desired file and select it.

After the upload completes, you should see the file name, size, type, and last modified date in the bucket.

For example a bucket with two files index.html and 404.html appears in the Cloud Platform Console as:

Bucket website example.
Example of a bucket configured as a website.

gsutil

Use the gsutil cp command to copy files to your bucket. For example, to copy the file index.html from its current location Desktop:

gsutil cp Desktop/index.html gs://www.example.com

If successful, the command returns:

Copying file://Desktop/index.html [Content-Type=text/html]...
Uploading   gs://www.example.com/index.html:       0 B/2.58 KiB
Uploading   gs://www.example.com/index.html:       2.58 KiB/2.58 KiB

Sharing your files

To share publicly the files that you want to serve:

Console

  1. In the Cloud Storage browser, browse to each of the files that you created.
  2. Click the checkbox in the Share publicly column.

If successful, a link titled Public link appears next to the checkbox.

gsutil

Use the gsutil acl ch command to grant all users read permission for each of the files stored in your bucket that you plan to serve. For example:

gsutil acl ch -u AllUsers:R gs://www.example.com/index.html

If successful, the command returns:

Updated ACL on gs://www.example.com/index.html

Optional: Assigning pages

From the files you shared publicly, you can assign an index page suffix and a custom error page.

An index page (also called a webserver directory index) is the file returned to visitors to your static site who request a "directory". If the top level site, such as http://www.example.com, is requested, or a missing object is requested, e.g., http://www.example.com/directory, the service will attempt to return an index page. The property that controls which file acts as the index page is MainPageSuffix. If the suffix is index.html, the pages it'll try to return are http://www.example.com/index.html and http://www.example.com/directory/index.html, respectively.

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, or if an index page suffix is set, the appropriate index object. The property that controls which file acts as the error page is NotFoundPage.

To assign an index page suffix and/or custom error page:

Console

  1. In the Cloud Storage browser, navigate to the bucket that you created.
  2. Click the more actions icon More actions icon. next to the bucket and select Edit website configuration.
  3. In the Configure website dialog, specify the Main Page and the 404 (Not Found) Page.
  4. Click Save.

gsutil

Using the gsutil tool:

The following command sets the MainPageSuffix property to index.html and the NotFoundPage property to 404.html for the bucket www.example.com.

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

If successful, the command returns:

Setting website config on gs://www.example.com/...

JSON API

Using the Java client library:

The following code sample sets the MainPageSuffix property to index.html and the NotFoundPage property to 404.html for the bucket www.example.com.

Website websiteConfig = new Website().setMainPageSuffix("index.html").setNotFoundPage("404.html");
Bucket patchContent = new Bucket().setWebsite(websiteConfig);
Patch bucket = client.buckets().patch("www.example.com", patchContent);
System.out.println("Website configuration: " + bucket.getJsonContent());

The output from the sample code above is:

Website configuration: {website={mainPageSuffix=index.html, notFoundPage=404.html}}

XML API

Using the XML API:

Buckets are configured using PUT Bucket requests with the query parameter websiteConfig and an XML body describing the two properties MainPageSuffix and NotFoundPage. Here, the request is made for the bucket www.example.com.

PUT http://storage.googleapis.com/www.example.com?websiteConfig HTTP/1.1
Host: storage.googleapis.com
Content-Length: 156
Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg

The response to the above request will look like the following:

<WebsiteConfiguration>
  <MainPageSuffix>index.html</MainPageSuffix>
  <NotFoundPage>404.html</NotFoundPage>
</WebsiteConfiguration>

Testing the website

Test that content is served from the bucket by requesting the domain name in a browser, either with a path to an object, or if you set the MainPageSuffix property, with just the domain name.

Cleaning up

After you've finished the Hosting a Static Website tutorial, you can clean up the resources you created on Google Cloud Platform so you won't be billed for them in the future. The following sections describe how to delete or turn off these resources.

Deleting the project

The easiest way to eliminate billing is to delete the project you created for the tutorial.

To delete the project:

  1. In the Cloud Platform Console, go to the Projects page.

    Go to the Projects page

  2. Click the trash can icon to the right of the project name.

Deleting the bucket

If you do not want to delete the entire project, delete the bucket that you used for hosting your website:

Console

  1. Open the Cloud Storage browser in the Google Cloud Platform Console.
    Open the Cloud Storage browser
  2. Select the checkbox next to the bucket that you created.
  3. Click Delete.
  4. In the overlay that appears, click Delete to permanently delete the bucket and its contents.

gsutil

Use the gsutil rm command with the -r flag to delete the bucket and the contents inside of it:

gsutil rm -r gs://www.example.com

What's next

Send feedback about...

Cloud Storage Documentation