Host a static website

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

Considering Deject Storage doesn't support custom domains with HTTPS on its ain, this tutorial uses Cloud Storage with HTTP(South) Load Balancing to serve content from a custom domain over HTTPS. For more ways to serve content from a custom domain over HTTPS, run into the related troubleshooting topic. You lot tin also use Cloud Storage to serve custom domain content over HTTP, which doesn't require a load balancer.

For examples and tips on static spider web pages, including how to host static avails for a dynamic website, run across the Static Website page.

Objectives

This tutorial shows you lot how to:
  • Create a bucket.
  • Upload and share your site'due south files.
  • Set up up a load balancer and SSL certificate.
  • Connect your load balancer to your bucket.
  • Point your domain to your load balancer using an A record.
  • Test the website.

Costs

This tutorial uses the following billable components of Google Cloud:

  • Deject Storage
  • Deject Load Balancing

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

Earlier you begin

  1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in existent-earth scenarios. New customers as well get $300 in gratuitous credits to run, test, and deploy workloads.

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

    Go to project selector

  3. Make certain that billing is enabled for your Cloud project. Learn how to cheque if billing is enabled on a project.

  4. In the Google Cloud Console, on the project selector folio, select or create a Google Cloud projection.

    Go to project selector

  5. Make sure that billing is enabled for your Cloud projection. Learn how to cheque if billing is enabled on a projection.

  6. Take a domain that you ain or manage. If you don't accept an existing domain, there are many services through which you lot can register a new domain, such equally Google Domains and Cloud Domains.

    This tutorial uses the domain example.com.

  7. Have a few website files you want 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 can give your Cloud Storage bucket the same name as your domain. To practise so, you must Verify that you own or manage the domain that you volition be using. Make sure you are verifying the top-level domain, such as example.com, and not a subdomain, such as world wide web.instance.com.

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

Create a bucket

To create a bucket:

Panel

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

    Go to Browser

  2. Click Create bucket.
  3. On the Create a bucket folio, enter your bucket information. To go to the adjacent stride, click Go along.
    • For Proper name your bucket, enter a name that meets the saucepan name requirements.
    • For Cull where to store your data, select a Location type and Location where the bucket data will be permanently stored.
    • For Choose a default storage form for your data, select a storage course for the bucket. The default storage class is assigned by default to all objects uploaded to the bucket.

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

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

      Note: If public access prevention is already enforced past your project's organisation policy, the Prevent public access toggle is locked.

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

To learn how to become detailed fault information well-nigh failed operations in the Cloud Storage browser, see Troubleshooting.

Command line

Use the gsutil mb command:

gsutil mb gs://BUCKET_NAME

Where:

  • BUCKET_NAME is the proper name yous desire to requite your bucket, subject to naming requirements. For case, my-bucket.

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

Creating gs://BUCKET_NAME/...

Set the following optional flags to have greater control over the creation of your saucepan:

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

    • For a consummate listing of options for gsutil bucket creation, run across 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 access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials. For instructions, see API hallmark.
  2. Create a .json file that contains the settings for the bucket, which must include a proper noun for the bucket. See the Buckets:Insert documentation for a complete listing 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 name you want to give your saucepan, subject to naming requirements. For example, my-saucepan.
    • BUCKET_LOCATION is the location where you want to store your saucepan's object data. For instance, U.s.a.-EAST1.
    • STORAGE_CLASS is the default storage class of your bucket. For example, NEARLINE.
  3. Apply ringlet to call the JSON API: 
    roll -X POST --data-binary @JSON_FILE_NAME.json \      -H "Authorisation: 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 y'all created in Footstep 2.
    • OAUTH2_TOKEN is the access token you generated in Pace ane.
    • 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 access token from the OAuth 2.0 Playground. Configure the playground to apply your own OAuth credentials. For instructions, run into API hallmark.
  2. Create a .xml file that contains the following information:
    3. <CreateBucketConfiguration>    <LocationConstraint>BUCKET_LOCATION</LocationConstraint>    <StorageClass>STORAGE_CLASS</StorageClass> </CreateBucketConfiguration>

    Where:

    • BUCKET_LOCATION is the location where yous desire to shop 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: 
    curl -X PUT --information-binary @XML_FILE_NAME.xml \      -H "Dominance: Bearer                                      OAUTH2_TOKEN" \      -H "x-goog-project-id:                                      PROJECT_ID" \      "https://storage.googleapis.com/BUCKET_NAME"

    Where:

    • XML_FILE_NAME is name of the XML file you created in Step 2.
    • OAUTH2_TOKEN is the access token you lot generated in Step 1.
    • PROJECT_ID is the ID of the projection with which your bucket will exist associated. For example, my-project.
    • BUCKET_NAME is the name y'all want to give your bucket, subject to naming requirements. For example, my-bucket.

Upload your site'southward files

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

Console

  1. In the Google Cloud Console, become to the Cloud Storage Browser folio.

    Go to Browser

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

    The Bucket details page opens with the Objects tab selected.

  3. Click the Upload files push button.

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

After the upload completes, y'all should see the filename forth with file data displayed in the saucepan.

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

gsutil

Use the gsutil cp control to copy files to your bucket. For example, to copy the file alphabetize.html from its electric current location Desktop to the bucket my-static-assets:

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

If successful, the command returns:

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

Code samples

REST APIs

JSON API

  1. Go an authorization admission token from the OAuth 2.0 Playground. Configure the playground to employ your ain OAuth credentials. For instructions, run into API authentication.

  2. Use curlicue to call the JSON API with a Postal service Object request. For the file index.html uploaded to a saucepan named my-static-assets:

    curl -Ten POST --data-binary @index.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=index.html"

XML API

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

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

    curl -X PUT --data-binary @index.html \   -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \   -H "Content-Blazon: text/html" \   "https://storage.googleapis.com/my-static-assets/index.html"

Share your files

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

Console

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

    Go to Browser

  2. In the listing of buckets, click the proper name of the bucket that you desire to brand public.

  3. Select the Permissions tab near the summit of the page.

  4. Click the + Add together button.

    The Add principals dialog box appears.

  5. In the New principals field, enter allUsers.

  6. In the Select a role drop down, select the Cloud Storage sub-bill of fare, and click the Storage Object Viewer option.

  7. Click Save.

  8. Click Allow public access.

Once shared publicly, a link icon appears for each object in the public admission column. Y'all can click this icon to get the URL for the object.

To acquire how to go detailed mistake 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

Code samples

REST APIs

JSON API

  1. Get an authorization admission token from the OAuth two.0 Playground. Configure the playground to utilise your own OAuth credentials. For instructions, see API authentication.

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

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

  3. Use coil to call the JSON API with a PUT Bucket request:

    roll -X PUT --data-binary @JSON_FILE_NAME                                    \   -H "Dominance: 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 y'all created in Step 2.
    • OAUTH2_TOKEN is the admission token you lot created in Stride 1.
    • BUCKET_NAME is the name of the bucket whose objects you desire 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. Utilise gsutil or the JSON API instead, or set ACLs for each individual object.

To make private objects in your bucket publicly accessible, you lot demand to switch your bucket'south Access control mode to Fine-grained. Generally, making all files in your saucepan publicly accessible is easier and faster.

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

Recommended: Assign specialty pages

You lot can assign an index page suffix, which is controlled by the MainPageSuffix holding, and a custom fault page, which is controlled by the NotFoundPage property. Assigning either is optional, just without an index folio, nothing is served when users access your tiptop-level site, for example, https://www.instance.com. For more information almost the MainPageSuffix and NotFoundPage backdrop, run into Specialty pages.

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

Console

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

    Go to Browser

  2. In the list of buckets, find the bucket you lot created.

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

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

  5. Click Save.

To larn how to get detailed error information nearly failed operations in the Cloud Storage browser, run across Troubleshooting.

gsutil

Use the gsutil web set control to gear up the MainPageSuffix holding with the -k flag and the NotFoundPage with the -eastward flag:

gsutil spider web prepare -one thousand index.html -e 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. Go an authorization access token from the OAuth ii.0 Playground. Configure the playground to use your ain OAuth credentials. For instructions, run 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-avails:

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

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, run across API authentication.

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

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

  3. Use cURL to call the XML API with a PUT Bucket asking and websiteConfig query cord parameter. For my-static-assets:

    curl -X PUT --data-binary @web-config.xml \   -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \   https://storage.googleapis.com/my-static-assets?websiteConfig

Fix your load balancer and SSL document

Cloud Storage doesn't support custom domains with HTTPS on its own, so you as well need to set up up 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 certificate to the load balancer's forepart.

  1. Go to the Load balancing page in the Google Cloud Console.
    Get to the Load balancing page
  2. Under HTTP(S) load balancing, click Start configuration.
  3. Select From Internet to my VMs and click Go on.
  4. Requite your load balancer a Name, such every bit example-lb.

Configure the backend

  1. Click Backend configuration.
  2. In the Create or select backend services & backend buckets dropdown, go to the Backend buckets sub-menu, and click the Create a backend bucket option.
  3. Choose a Name for the backend bucket, such as example-bucket.
  4. Click Browse under Deject Storage saucepan.
  5. Select the my-static-assets bucket and click Select.
  6. If you want to utilize Cloud CDN, select the checkbox for Enable Cloud CDN. Leave the Cache mode choice 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 Mode at the default Simple host and path dominion for the backend bucket example-bucket, which you created earlier.

Configure the frontend

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

  1. Click Frontend configuration.

  2. Configure the values for the following fields:

    • Protocol: HTTPS
    • Network Service Tier: Premium
    • IP version: IPv4. If you prefer IPv6, run into IPv6 termination for boosted information.

  3. For the IP accost field:

    1. In the dropdown, click Create IP accost.
    2. In the Reserve a new static IP address pop-upwards, 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 document. The document cosmos class appears in a panel. Configure the post-obit:

    • Name: example-ssl
    • Create style: Create Google-managed certificate
    • Domains: www.case.com. If you want to serve your content through additional domains such as the root domain example.com, press Enter to add them on additional lines. Each document 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 wait a few minutes for the load balancer to exist created.

Connect your domain to your load balancer

Subsequently the load balancer is created, click the name of your load balancer: example-lb. Note the IP accost associated with the load balancer: for example, 30.90.80.100. To point your domain to your load balancer, create an A record using your domain registration service. If you added multiple domains to your SSL certificate, you lot must add an A record for each one, all pointing to the load balancer'southward IP accost. For example, to create A records for www.instance.com and instance.com:

NAME                  Type     DATA www                   A        thirty.90.80.100 @                     A        30.90.80.100

If yous are using Google Domains, see the Google Domains Help folio for more data.

Information technology might take upward to 60-90 minutes for Google Cloud to provision the document and make the site bachelor through the load balancer. To monitor the status of your certificate:

Console

  1. Become to the Load balancing folio in the Google Cloud Console.
    Go to the Load balancing page
  2. Click the proper name of your load balancer: example-lb.
  3. Click the name of the SSL certificate associated with the load balancer: example-ssl.
  4. The Status and Domain status rows show the certificate status. Both must exist active in order for the certificate to be valid for your website.

gcloud

  1. To check the certificate status, run the post-obit command:

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

  2. To check the domain condition, run the following command:

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

Meet Troubleshooting SSL certificates for more information about document status.

Exam the website

Once the SSL certificate is active, verify that content is served from the bucket by going to https://world wide web.example.com/test.html, where test.html is an object stored in the bucket that you're using as the backend. If you set the MainPageSuffix property, https://www.example.com goes to alphabetize.html.

Clean upwardly

After you stop the tutorial, you lot tin can clean up the resources that you lot created so that they terminate using quota and incurring charges. The following sections describe how to delete or turn off these resource.

Delete the projection

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

To delete the project:

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

    Go to Manage resources

  2. In the project list, select the project that you want to delete, and then click Delete.
  3. In the dialog, type the project ID, and and so click Shut down to delete the project.

Delete the load balancer and bucket

If you don't desire to delete the entire projection, delete the load balancer and bucket that you lot created for the tutorial:

  1. Get to the Load balancing page in the Google Deject Console.
    Go to the Load balancing page
  2. Select the checkbox next to example-lb.
  3. Click Delete.
  4. (Optional) Select the checkbox next to the resources you lot want to delete along with the load balancer, such every bit the my-static-avails saucepan or the instance-ssl SSL certificate.
  5. Click Delete load balancer or Delete load balancer and the selected resources.

Release a reserved IP accost

To delete the reserved IP address yous used for the tutorial:

  1. In the Cloud Panel, get to the External IP addresses page.

    Become 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'due south adjacent

  • Learn how to serve your static website over HTTP.
  • Run across examples and tips for using buckets to host a static website.
  • Visit the troubleshooting section for hosting a static website.
  • Learn about hosting static assets for a dynamic website.
  • Learn about other Google Cloud web serving solutions.
  • Try other Google Cloud tutorials that utilise Cloud Storage.

If you're new to Google Cloud, create an account to evaluate how Cloud Storage performs in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

Try Cloud Storage free