This tutorial describes how to configure a Cloud Storage bucket to host a static website for a domain you own. Static web pages can contain client-side technologies such as HTML, CSS, and JavaScript. They cannot contain dynamic content such as server-side scripts like PHP.
This tutorial shows you how to serve content over HTTP. For a tutorial that uses HTTPS, see Hosting a static website.
For examples and tips on static web pages, including how to host static assets for a dynamic website, see the Static Website page.
Objectives
In this tutorial you will:- Point your domain to Cloud Storage by using a
CNAME
record. - Create a bucket that is linked to your domain.
- Upload and share your site's files.
- Test the website.
Costs
This tutorial uses the following billable component of Google Cloud:
- Cloud Storage
See the Monitoring your storage charges tip for details on what charges may be incurred when hosting a static website, and see the Pricing page for details on Cloud Storage costs.
Before you begin
- Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Make sure that billing is enabled for your Google Cloud project. Learn how to check if billing is enabled on a project.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Make sure that billing is enabled for your Google Cloud project. Learn how to check if billing is enabled on a project.
- 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.
This tutorial uses the domain
example.com
. - Verify that
you own or manage the domain that you will be using. Make sure you are
verifying the top-level domain, such as
example.com
, and not a subdomain, such aswww.example.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.
Connecting your domain to Cloud Storage
To connect your domain to Cloud Storage, create a CNAME
record
through your domain registration service. 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 www.example.com
, the CNAME
record might contain the following
information:
NAME TYPE DATA www CNAME c.storage.googleapis.com.
For more information about CNAME
redirects, see URI for CNAME
aliasing.
To connect your domain to Cloud Storage:
Create a
CNAME
record that points toc.storage.googleapis.com.
.Your domain registration service should have a way for you to administer your domain, including adding a
CNAME
record. For example, if you use Google Domains, instructions for adding resource records can be found on the Google Domains Help page.
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 from the www
subdomain of
example.com
to c.storage.googleapis.com.
, then create a bucket with
the name "www.example.com".
To create a bucket:
Console
- In the Google Cloud console, go to the Cloud Storage Buckets page.
Click Create bucket to open the bucket creation form.
Enter your bucket information and click Continue to complete each step:
The Name of your bucket, which matches the hostname associated with your
CNAME
record.Select the Location type and Location of your bucket. For example, Region and us-east1.
Select Standard Storage for the Storage class.
Select Uniform for Access control.
Click Create.
If successful, you are taken to the bucket's page with the text "There are no live objects in this bucket."
Command line
gcloud
Use the buckets create command:
gcloud storage buckets create gs://www.example.com
If successful, the command returns:
Creating gs://www.example.com/...
gsutil
Use the gsutil mb
command:
gsutil mb gs://www.example.com
If successful, the command returns:
Creating gs://www.example.com/...
Client libraries
For more information, see the
Cloud Storage C++ API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage C# API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Go API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Java API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Node.js API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage PHP API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Python API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Ruby API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
C++
C#
Go
Java
Node.js
PHP
Python
Ruby
REST APIs
JSON API
- Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials. For instructions, see API authentication.
Create a JSON file that assigns your website name to the
name
property:{ "name": "www.example.com" }
Use
cURL
to call the JSON API. For www.example.com:curl -X POST --data-binary @website-bucket-name.json \ -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b?project=my-static-website"
XML API
- Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials. For instructions, see API authentication.
Use
cURL
to call the XML API to create a bucket with your website name. For www.example.com:curl -X PUT \ -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \ -H "x-goog-project-id: my-static-website" \ "https://storage.googleapis.com/www.example.com"
Uploading your site's files
To add to your bucket the files you want your website to serve:
Console
- In the Google Cloud console, go to the Cloud Storage Buckets page.
In the list of buckets, click on the name of the bucket that you created.
Click the Upload files button in the Objects tab.
In the file dialog, browse to the desired file and select it.
After the upload completes, you should see the file name along with file information displayed in the bucket.
Command line
gcloud
Use the gcloud storage cp
command to copy files to your bucket.
For example, to copy the file index.html
from its current location
Desktop
:
gcloud storage cp Desktop/index.html gs://www.example.com
If successful, the response looks like the following example:
Completed files 1/1 | 164.3kiB/164.3kiB
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
Client libraries
For more information, see the
Cloud Storage C++ API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage C# API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Go API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Java API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Node.js API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage PHP API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Python API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Ruby API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
C++
C#
Go
Java
Node.js
PHP
Python
Ruby
REST APIs
JSON API
- Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials. For instructions, see API authentication.
Use
cURL
to call the JSON API with aPOST
Object request. For the index page of www.example.com:curl -X 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/www.example.com/o?uploadType=media&name=index.html"
XML API
- Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials. For instructions, see API authentication.
Use
cURL
to call the XML API with aPUT
Object request. For the index page of www.example.com:curl -X PUT --data-binary @index.html \ -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \ -H "Content-Type: text/html" \ "https://storage.googleapis.com/www.example.com/index.html"
Sharing your files
To make all objects in a bucket readable to everyone on the public internet:
Console
- In the Google Cloud console, go to the Cloud Storage Buckets page.
In the list of buckets, click on the name of the bucket that you want to make public.
Select the Permissions tab near the top of the page.
If the Public access pane reads Not public, click the button labeled Remove public access prevention, and click Confirm in the dialog that appears.
Click the + Grant access button.
The Add principals dialog box appears.
In the New principals field, enter
allUsers
.In the Select a role drop down, select the Cloud Storage sub-menu, and click the Storage Object Viewer option.
Click Save.
Click Allow public access.
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.
Command line
gcloud
Use the buckets add-iam-policy-binding
command:
gcloud storage buckets add-iam-policy-binding gs://www.example.com --member=allUsers --role=roles/storage.objectViewer
gsutil
Use the gsutil iam ch
command:
gsutil iam ch allUsers:objectViewer gs://www.example.com
Client libraries
For more information, see the
Cloud Storage C++ API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage C# API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Go API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Java API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Node.js API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage PHP API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Python API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Ruby API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
C++
C#
Go
Java
Node.js
PHP
Python
Ruby
REST APIs
JSON API
- Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials. For instructions, see API authentication.
Create a JSON file that contains the following information:
{ "bindings":[ { "role": "roles/storage.objectViewer", "members":["allUsers"] } ] }
Use
cURL
to call the JSON API with aPUT
Bucket request:curl -X PUT --data-binary @JSON_FILE_NAME \ -H "Authorization: Bearer OAUTH2_TOKEN" \ -H "Content-Type: application/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 Step 2.OAUTH2_TOKEN
is the access token you created in Step 1.BUCKET_NAME
is the name of the bucket whose objects you want to make public. For example,my-bucket
.
XML API
Making all objects in a bucket publicly readable is not supported by
the XML API. Use the Google Cloud console or gcloud storage
instead.
You can make groups of objects in your bucket publicly accessible, but 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 error page that uses a http 404
response code.
Recommended: Assigning specialty pages
You can 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.example.com
. For more information, see Website configuration examples.
In the following sample, the MainPageSuffix
is set to index.html
and
NotFoundPage
is set to 404.html
:
Console
- In the Google Cloud console, go to the Cloud Storage Buckets page.
In the list of buckets, find the bucket you created.
Click the Bucket overflow menu (
) associated with the bucket and select Edit website configuration.
In the website configuration dialog, specify the main page and error page.
Click Save.
Command line
gcloud
Use the buckets update
command with the --web-main-page-suffix
and --web-error-page
flags:
gcloud storage buckets update gs://www.example.com --web-main-page-suffix=index.html --web-error-page=404.html
If successful, the command returns:
Updating gs://www.example.com/... Completed 1
gsutil
Use the gsutil web set
command to set the MainPageSuffix
property
with the -m
flag and the NotFoundPage
with the -e
flag:
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/...
Client libraries
For more information, see the
Cloud Storage C++ API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage C# API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Go API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Java API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Node.js API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage PHP API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Python API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
For more information, see the
Cloud Storage Ruby API
reference documentation.
To authenticate to Cloud Storage, set up Application Default Credentials.
For more information, see
Set up authentication for a local development environment.
C++
C#
Go
Java
Node.js
PHP
Python
Ruby
REST APIs
JSON API
- Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials. For instructions, see API authentication.
Create a JSON file that sets the
mainPageSuffix
andnotFoundPage
properties in awebsite
object to the desired pages:{ "website":{ "mainPageSuffix": "index.html", "notFoundPage": "404.html" } }
Use
cURL
to call the JSON API with aPATCH
Bucket request. For www.example.com:curl -X PATCH --data-binary @web-config.json \ -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \ -H "Content-Type: application/json" \ "https://storage.googleapis.com/storage/v1/b/www.example.com"
XML API
- Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials. For instructions, see API authentication.
Create an XML file that sets the
MainPageSuffix
andNotFoundPage
elements in aWebsiteConfiguration
element to the desired pages:<WebsiteConfiguration> <MainPageSuffix>index.html</MainPageSuffix> <NotFoundPage>404.html</NotFoundPage> </WebsiteConfiguration>
Use
cURL
to call the XML API with aPUT
Bucket request andwebsiteConfig
query string parameter. For www.example.com:curl -X PUT --data-binary @web-config.xml \ -H "Authorization: Bearer ya29.AHES6ZRVmB7fkLtd1XTmq6mo0S1wqZZi3-Lh_s-6Uw7p8vtgSwg" \ https://storage.googleapis.com/www.example.com?websiteConfig
Testing the website
Verify that content is served from the bucket by requesting the domain name in a
browser. You can do this with a path to an object or with just the domain name,
if you set the MainPageSuffix
property.
For example, if you have an object named test.html
stored in a bucket named
www.example.com
, check that it's accessible by going to
www.example.com/test.html
in your browser.
Clean up
After you finish the tutorial, you can clean up the resources that you created so that they stop using quota and incurring charges. 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 that you created for the tutorial.
To delete the project:
- In the Google Cloud console, go to the Manage resources page.
- In the project list, select the project that you want to delete, and then click Delete.
- In the dialog, type the project ID, and then click Shut down to delete the project.
What's next
- See 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.
- Go more in-depth with the Cloud Storage Office Hours for hosting a static website.
- Learn about all web serving options.
- Try other Google Cloud tutorials that use Cloud Storage.