Host a static website

This tutorial describes how to configure a Cloud Storage bucket to host a static website for a domain you ain. Static web pages can contain client-side technologies such as HTML, CSS, and JavaScript. They cannot comprise dynamic content such every bit server-side scripts similar PHP.

Because Cloud Storage doesn't back up custom domains with HTTPS on its ain, this tutorial uses Cloud Storage with HTTP(S) Load Balancing to serve content from a custom domain over HTTPS. For more than ways to serve content from a custom domain over HTTPS, meet the related troubleshooting topic. You can too use Cloud Storage to serve custom domain content over HTTP, which doesn't require a load balancer.

For examples and tips on static web pages, including how to host static assets for a dynamic website, see the Static Website page.

Objectives

This tutorial shows you how to:
  • Create a bucket.
  • Upload and share your site's files.
  • Set upwards a load balancer and SSL document.
  • Connect your load balancer to your bucket.
  • Point your domain to your load balancer using an A record.
  • Examination the website.

Costs

This tutorial uses the following billable components of Google Cloud:

  • Deject Storage
  • Cloud Load Balancing

See the Monitoring your charges tip for details on what charges may exist incurred when hosting a static website.

Before yous begin

  1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an business relationship to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

  2. In the Google Cloud Console, on the project selector page, select or create a Google Cloud project.

    Become to project selector

  3. Make sure that billing is enabled for your Cloud project. Larn how to check if billing is enabled on a projection.

  4. In the Google Cloud Panel, on the project selector page, select or create a Google Deject project.

    Become to project selector

  5. Brand sure that billing is enabled for your Cloud project. Learn how to check if billing is enabled on a project.

  6. Have 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 and Deject Domains.

    This tutorial uses the domain example.com.

  7. Have a few website files you desire to serve. This tutorial works best if you have at least an index page (alphabetize.html) and a 404 folio (404.html).
  8. Take the following Identity and Access Management roles: Storage Object Admin and Network Admin.
  9. (Optional) You tin can give your Cloud Storage bucket the same proper noun equally your domain. To do so, yous must Verify that you own or manage the domain that you will be using. Make sure you are verifying the top-level domain, such as case.com, and not a subdomain, such as www.example.com.

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

Create a saucepan

To create a bucket:

Console

  1. In the Google Deject Console, go to the Cloud Storage Browser page.

    Go to Browser

  2. Click Create bucket.
  3. On the Create a bucket page, enter your bucket information. To go to the adjacent footstep, click Keep.
    • For Proper name your bucket, enter a proper noun that meets the bucket name requirements.
    • For Choose where to shop your information, select a Location type and Location where the saucepan data will be permanently stored.
    • For Choose a default storage class for your data, select a storage class for the bucket. The default storage class is assigned past default to all objects uploaded to the bucket.

      Notation: The Monthly cost estimate panel in the correct pane estimates the bucket'southward monthly costs based on your selected storage grade and location, every bit well every bit your expected data size and operations.

    • For Choose how to command access to objects, select whether or not your bucket enforces public access prevention, and select an Access control model for your bucket'southward objects.

      Note: If public access prevention is already enforced by your project's system policy, the Preclude public access toggle is locked.

    • For Cull how to protect object data, configure Protection tools if desired, and select a Information encryption method.
  4. Click Create.

To learn how to go detailed error information about failed operations in the Cloud Storage browser, see Troubleshooting.

Command line

Apply the gsutil mb command:

gsutil mb gs://BUCKET_NAME

Where:

  • BUCKET_NAME is the proper noun you want to give your bucket, subject to naming requirements. For example, my-bucket.

If the request is successful, the command returns the following message:

Creating gs://BUCKET_NAME/...

Fix the following optional flags to accept greater control over the creation of your bucket:

  • -p: Specify the projection ID or projection number with which your saucepan will be associated. For example, my-project.
  • -c: Specify the default storage grade of your saucepan. For instance, NEARLINE.
  • -l: Specify the location of your bucket. For instance, Us-EAST1.
  • -b: Specify the uniform saucepan-level access setting for your bucket. For example, ON.

    • For a consummate list of options for gsutil saucepan creation, see mb options.

For example:

                              gsutil mb -p                              PROJECT_ID                              -c                              STORAGE_CLASS                              -l                              BUCKET_LOCATION                              -b on gs://BUCKET_NAME

Code samples

Terraform

REST APIS

JSON API

  1. Get an authorization admission token from the OAuth 2.0 Playground. Configure the playground to use your ain OAuth credentials. For instructions, see API hallmark.
  2. Create a .json file that contains the settings for the saucepan, which must include a name for the bucket. See the Buckets:Insert documentation for a complete list of settings. The following are common settings to include:
    3. {   "name": "BUCKET_NAME",   "location": "BUCKET_LOCATION",   "storageClass": "STORAGE_CLASS",   "iamConfiguration": {     "uniformBucketLevelAccess": {       "enabled": true     },   } }

    Where:

    • BUCKET_NAME is the proper name you want to requite your bucket, subject to naming requirements. For example, my-saucepan.
    • BUCKET_LOCATION is the location where y'all desire to store your saucepan'south object data. For instance, US-EAST1.
    • STORAGE_CLASS is the default storage grade of your bucket. For case, NEARLINE.
  3. Employ cURL to call the JSON API: 
    curl -X Postal service --data-binary @JSON_FILE_NAME.json \      -H "Authorization: Bearer                                      OAUTH2_TOKEN" \      -H "Content-Type: application/json" \      "https://storage.googleapis.com/storage/v1/b?projection=PROJECT_IDENTIFIER"

    Where:

    • JSON_FILE_NAME is name of the JSON file you created in Step 2.
    • OAUTH2_TOKEN is the access token you generated in Step 1.
    • PROJECT_IDENTIFIER is the ID or number of the project with which your bucket will be associated. For example, my-project.

XML API

  1. Get an authorization admission token from the OAuth 2.0 Playground. Configure the playground to use your ain OAuth credentials. For instructions, see API authentication.
  2. Create a .xml file that contains the following data:
    3. <CreateBucketConfiguration>    <LocationConstraint>BUCKET_LOCATION</LocationConstraint>    <StorageClass>STORAGE_CLASS</StorageClass> </CreateBucketConfiguration>

    Where:

    • BUCKET_LOCATION is the location where y'all want to store your bucket's object data. For example, US-EAST1.
    • STORAGE_CLASS is the default storage class of your bucket. For example, NEARLINE.
  3. Use cURL to call the XML API: 
    roll -X PUT --information-binary @XML_FILE_NAME.xml \      -H "Authorization: Bearer                                      OAUTH2_TOKEN" \      -H "x-goog-project-id:                                      PROJECT_ID" \      "https://storage.googleapis.com/BUCKET_NAME"

    Where:

    • XML_FILE_NAME is proper noun of the XML file you created in Pace 2.
    • OAUTH2_TOKEN is the access token you generated in Step 1.
    • PROJECT_ID is the ID of the project with which your bucket volition be associated. For example, my-projection.
    • BUCKET_NAME is the proper noun you want to requite your bucket, subject to naming requirements. For example, my-saucepan.

Upload your site'south files

Add the files you want your website to serve to the bucket:

Console

  1. In the Google Cloud Panel, go to the Deject Storage Browser page.

    Become to Browser

  2. In the list of buckets, click the name of the bucket that you created.

    The Bucket details page opens with the Objects tab selected.

  3. Click the Upload files button.

  4. In the file dialog, scan to the desired file and select it.

Later on the upload completes, y'all should run across the filename along with file information displayed in the saucepan.

To learn how to get detailed error information nigh failed operations in the Deject Storage browser, see Troubleshooting.

gsutil

Use the gsutil cp command to re-create files to your bucket. For example, to copy the file index.html from its current location Desktop to the bucket my-static-assets:

gsutil cp Desktop/index.html gs://my-static-assets

If successful, the command returns:

Copying file://Desktop/index.html [Content-Type=text/html]... Uploading   gs://my-static-assets/index.html:       0 B/2.58 KiB Uploading   gs://my-static-avails/index.html:       2.58 KiB/2.58 KiB

Lawmaking samples

REST APIs

JSON API

  1. Get an authorization admission token from the OAuth 2.0 Playground. Configure the playground to use your ain OAuth credentials. For instructions, see API authentication.

  2. Use cURL to call the JSON API with a Post Object request. For the file index.html uploaded to a bucket named my-static-assets:

    curl -X POST --information-binary @alphabetize.html \   -H "Content-Type: text/html" \   -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \   "https://storage.googleapis.com/upload/storage/v1/b/my-static-assets/o?uploadType=media&name=alphabetize.html"

XML API

  1. Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to utilize your own OAuth credentials. For instructions, see API hallmark.

  2. Use ringlet to call the XML API with a PUT Object request. For the file alphabetize.html uploaded to a bucket named my-static-assets:

    coil -10 PUT --data-binary @index.html \   -H "Authorisation: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \   -H "Content-Type: text/html" \   "https://storage.googleapis.com/my-static-assets/index.html"

Share your files

To make all objects in your bucket readable to anyone on the public internet:

Console

  1. In the Google Deject Console, get to the Cloud Storage Browser page.

    Get to Browser

  2. In the list of buckets, click the proper name of the bucket that you want to make public.

  3. Select the Permissions tab most the top of the folio.

  4. Click the + Add button.

    The Add principals dialog box appears.

  5. In the New principals field, enter allUsers.

  6. In the Select a part drop downwards, select the Cloud Storage sub-menu, and click the Storage Object Viewer selection.

  7. Click Relieve.

  8. Click Permit public access.

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

To acquire how to get detailed error information about failed operations in the Cloud Storage browser, encounter Troubleshooting.

gsutil

Use the gsutil iam ch command:

gsutil iam ch allUsers:objectViewer gs://my-static-assets

Lawmaking samples

REST APIs

JSON API

  1. Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to apply your own OAuth credentials. For instructions, see API authentication.

  2. Create a JSON file that contains the following information:

    {   "bindings":[     {       "part": "roles/storage.objectViewer",       "members":["allUsers"]     }   ] }

  3. Employ cURL to telephone call the JSON API with a PUT Bucket request:

    curl -X PUT --data-binary @JSON_FILE_NAME                                    \   -H "Say-so: Bearer                                    OAUTH2_TOKEN" \   -H "Content-Type: awarding/json" \   "https://storage.googleapis.com/storage/v1/b/BUCKET_NAME/iam"

    Where:

    • JSON_FILE_NAME is the path for the JSON file that you created in Footstep two.
    • OAUTH2_TOKEN is the access token you created in Step 1.
    • BUCKET_NAME is the name of the bucket whose objects yous want to make public. For example, my-static-assets.

XML API

Making all objects in a bucket publicly readable is not supported by the XML API. Use gsutil or the JSON API instead, or set up ACLs for each individual object.

To make individual objects in your bucket publicly accessible, yous demand to switch your bucket'due south Access control manner to Fine-grained. Generally, making all files in your bucket publicly accessible is easier and faster.

Visitors receive a http 403 response code when requesting the URL for a non-public or non-existent file. See the next section for information on how to add an mistake page that uses a http 404 response code.

Recommended: Assign specialty pages

You can assign an index page suffix, which is controlled by the MainPageSuffix property, and a custom error folio, which is controlled by the NotFoundPage property. Assigning either is optional, but without an index page, nil is served when users access your acme-level site, for example, https://www.example.com. For more information nearly the MainPageSuffix and NotFoundPage backdrop, run into Specialty pages.

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

Console

  1. In the Google Cloud Console, go to the Deject Storage Browser page.

    Become to Browser

  2. In the list of buckets, find the saucepan y'all created.

  3. Click the Bucket overflow menu () associated with the bucket and select Edit website configuration.

  4. In the website configuration dialog, specify the primary page and error page.

  5. Click Save.

To acquire how to become detailed mistake information nearly failed operations in the Deject Storage browser, run across Troubleshooting.

gsutil

Utilize the gsutil web set control to set the MainPageSuffix belongings with the -m flag and the NotFoundPage with the -e flag:

gsutil spider web set -m index.html -east 404.html gs://my-static-assets

If successful, the control returns:

Setting website config on gs://my-static-assets/...

Code samples

Rest APIs

JSON API

  1. Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials. For instructions, come across API authentication.

  2. Create a JSON file that sets the mainPageSuffix and notFoundPage properties in a website object to the desired pages:

    {   "website":{     "mainPageSuffix": "index.html",     "notFoundPage": "404.html"   } }

  3. Use cURL to call the JSON API with a PATCH Saucepan request. For the bucket my-static-assets:

    gyre -10 PATCH --data-binary @web-config.json \   -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \   -H "Content-Blazon: application/json" \   "https://storage.googleapis.com/storage/v1/b/my-static-assets"

XML API

  1. Go an authorization admission token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials. For instructions, see API hallmark.

  2. Create an XML file that sets the MainPageSuffix and NotFoundPage elements in a WebsiteConfiguration element to the desired pages:

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

  3. Use scroll to call the XML API with a PUT Bucket request and websiteConfig query string parameter. For my-static-assets:

    roll -X PUT --data-binary @spider web-config.xml \   -H "Say-so: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \   https://storage.googleapis.com/my-static-avails?websiteConfig

Fix your load balancer and SSL certificate

Cloud Storage doesn't support custom domains with HTTPS on its ain, then y'all likewise need to fix an SSL certificate attached to an HTTPS load balancer to serve your website through HTTPS. This section shows you how to add your bucket to a load balancer's backend and how to add a new Google-managed SSL document to the load balancer'due south front end.

  1. Go to the Load balancing page in the Google Deject Console.
    Become to the Load balancing page
  2. Under HTTP(S) load balancing, click Start configuration.
  3. Select From Cyberspace to my VMs and click Continue.
  4. Give your load balancer a Proper noun, such equally example-lb.

Configure the backend

  1. Click Backend configuration.
  2. In the Create or select backend services & backend buckets dropdown, get to the Backend buckets sub-bill of fare, and click the Create a backend bucket pick.
  3. Cull a Name for the backend bucket, such as example-saucepan.
  4. Click Scan nether Deject Storage bucket.
  5. Select the my-static-assets saucepan and click Select.
  6. If you want to use Cloud CDN, select the checkbox for Enable Cloud CDN. Leave the Cache mode selection as Cache static content. Note that Cloud CDN may incur additional costs.
  7. Click Create.

Configure host rules and path matchers

Host rules and path matchers are configuration components of an external HTTP(S) load balancer's URL map.

  1. Click Host and path rules.
  2. Leave Manner at the default Simple host and path dominion for the backend bucket instance-bucket, which you created earlier.

Configure the frontend

This section shows you how to configure the HTTPS protocol and create an SSL certificate. You can also select an existing certificate or upload a self-managed SSL certificate.

  1. Click Frontend configuration.

  2. Configure the values for the following fields:

    • Protocol: HTTPS
    • Network Service Tier: Premium
    • IP version: IPv4. If y'all adopt IPv6, run into IPv6 termination for additional information.

  3. For the IP address field:

    1. In the dropdown, click Create IP address.
    2. In the Reserve a new static IP address popular-up, enter example-ip for the Name of the IP address.
    3. Click Reserve.

  4. For Port, select 443.

  5. For the Certificate field, select Create a new certificate. The document creation form appears in a panel. Configure the following:

    • Name: case-ssl
    • Create way: Create Google-managed document
    • Domains: www.instance.com. If you want to serve your content through additional domains such as the root domain example.com, printing Enter to add them on additional lines. Each certificate has a limit of 100 domains.

  6. Click Create.

  7. Click Done.

Review the configuration

  1. Click Review and finalize.
  2. Review the Backend configuration, Host and path rules, and Frontend configuration.
  3. Click Create.

You may need to look a few minutes for the load balancer to be created.

Connect your domain to your load balancer

After the load balancer is created, click the proper name of your load balancer: case-lb. Notation the IP address associated with the load balancer: for instance, 30.90.eighty.100. To point your domain to your load balancer, create an A record using your domain registration service. If yous added multiple domains to your SSL certificate, you must add together an A record for each one, all pointing to the load balancer'south IP address. For case, to create A records for world wide web.example.com and example.com:

NAME                  TYPE     DATA www                   A        30.90.80.100 @                     A        30.90.fourscore.100

If you are using Google Domains, see the Google Domains Assistance page for more information.

It might accept up to 60-ninety minutes for Google Cloud to provision the certificate and make the site available through the load balancer. To monitor the status of your document:

Console

  1. Get to the Load balancing folio in the Google Cloud Console.
    Go to the Load balancing page
  2. Click the name of your load balancer: instance-lb.
  3. Click the name of the SSL document associated with the load balancer: case-ssl.
  4. The Status and Domain status rows bear witness the certificate status. Both must be active in social club for the certificate to be valid for your website.

gcloud

  1. To check the certificate status, run the following command:

    gcloud beta compute ssl-certificates describe                                CERTIFICATE_NAME                                \   --global \   --format="get(proper noun,managed.status)"

  2. To cheque the domain condition, run the post-obit command:

    gcloud beta compute ssl-certificates describe                                CERTIFICATE_NAME                                \   --global \   --format="become(managed.domainStatus)"

Run into Troubleshooting SSL certificates for more information about certificate status.

Exam the website

Once the SSL document is agile, verify that content is served from the bucket by going to https://www.instance.com/exam.html, where test.html is an object stored in the saucepan that you're using as the backend. If you ready the MainPageSuffix property, https://www.example.com goes to index.html.

Clean up

After you finish the tutorial, yous can make clean upward the resources that yous created then that they cease using quota and incurring charges. The following sections draw how to delete or plow off these resource.

Delete the projection

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

To delete the projection:

  1. In the Cloud Console, go to the Manage resource page.

    Go to Manage resources

  2. In the projection list, select the project that yous desire to delete, and then click Delete.
  3. In the dialog, type the project ID, and then click Shut downwardly to delete the project.

Delete the load balancer and bucket

If yous don't want to delete the entire project, delete the load balancer and saucepan that you created for the tutorial:

  1. Go to the Load balancing page in the Google Cloud Panel.
    Get to the Load balancing page
  2. Select the checkbox next to example-lb.
  3. Click Delete.
  4. (Optional) Select the checkbox side by side to the resource you desire to delete forth with the load balancer, such equally the my-static-assets saucepan or the example-ssl SSL document.
  5. Click Delete load balancer or Delete load balancer and the selected resources.

Release a reserved IP address

To delete the reserved IP accost you used for the tutorial:

  1. In the Cloud Console, become to the External IP addresses page.

    Go to External IP addresses

  2. Select the checkboxes next to example-ip.

  3. Click Release static address.

  4. In the confirmation window, click Delete.

What'southward side by side

  • Learn how to serve your static website over HTTP.
  • See examples and tips for using buckets to host a static website.
  • Visit the troubleshooting section for hosting a static website.
  • Learn nigh hosting static assets for a dynamic website.
  • Learn nigh other Google Cloud web serving solutions.
  • Endeavor other Google Cloud tutorials that employ Cloud Storage.

If yous're new to Google Cloud, create an business relationship to evaluate how Deject Storage performs in real-world scenarios. New customers also go $300 in free credits to run, exam, and deploy workloads.

Attempt Cloud Storage gratis