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. For more information on static web pages, such as examples and tips, see the Static Website page.
This tutorial also applies to hosting static assets for a dynamic website.
Objectives
In this tutorial you will:- Point your domain to Cloud Storage by using a
CNAMErecord. - 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 Cloud Platform:
- 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 Account.
If you don't already have one, sign up for a new account.
-
Select or create a Google Cloud Platform project.
-
Make sure that billing is enabled for your Google Cloud Platform project.
- Have a domain that you own or manage. If you don't have an existing domain,
there are many services through which can 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.
Creating a CNAME record
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.example.com 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
CNAMErecord that points toc.storage.googleapis.com..Your domain registration service should have a way for you to administer your domain, including adding a
CNAMErecord. For example, if you use Google Domains, instructions for adding resource records such asCNAMEcan be found on the Google Domains Help page, in the Resource records drop-down section.
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
- Open the Cloud Storage browser in the Google Cloud Platform Console.
Open the Cloud Storage browser Click Create bucket.
In the Create bucket dialog, specify:
The Name of your bucket.
The Storage class for your bucket: Multi-Regional.
The Location of your bucket: United States.
Click Create.
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/...
Code samples
For more information, see the
Cloud Storage C++ API reference documentation
.
For more information, see the
Cloud Storage C# API reference documentation
.
For more information, see the
Cloud Storage Go API reference documentation
.
For more information, see the
Cloud Storage Java API reference documentation
.
For more information, see the
Cloud Storage Node.js API reference documentation
.
For more information, see the
Cloud Storage PHP API reference documentation
.
For more information, see the
Cloud Storage Python API reference documentation
.
For more information, see the
Cloud Storage Ruby API reference documentation
.
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.
- Create a .json file that assigns the
nameproperty your website name: - Use
cURLto 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://www.googleapis.com/storage/v1/b?project=my-static-website"
{
"name": "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.
- Use
cURLto 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
- Open the Cloud Storage browser in the Google Cloud Platform Console.
Open the Cloud Storage browser 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, size, type, and last modified date in the bucket.
For example a bucket with two files index.html and 404.html appears
in the GCP Console as:
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
Code samples
For more information, see the
Cloud Storage C++ API reference documentation
.
For more information, see the
Cloud Storage C# API reference documentation
.
For more information, see the
Cloud Storage Go API reference documentation
.
For more information, see the
Cloud Storage Java API reference documentation
.
For more information, see the
Cloud Storage Node.js API reference documentation
.
For more information, see the
Cloud Storage PHP API reference documentation
.
For more information, see the
Cloud Storage Python API reference documentation
.
For more information, see the
Cloud Storage Ruby API reference documentation
.
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.
- Add the file data to the request body.
- Use
cURLto call the JSON API with aPOSTObject 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://www.googleapis.com/upload/storage/v1/b/www.example.com/o?uploadType=media&name;=index.html"
See Performing a Simple Upload for more information about uploading objects with the JSON API.
XML API
- Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials.
- Add the object's data to the request body.
- Use
cURLto call the XML API with aPUTObject 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
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.
To make all files accessible, follow the Cloud Storage guide for making groups of objects publicly readable.
To make individual files accessible, follow the Cloud Storage guide for making individual objects publicly readable.
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.
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.
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.example.com. In this situation, if a user requests the URL
http://www.example.com/directory, Cloud Storage attempts to serve the file
www.example.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.example.com, Cloud Storage attempts to serve the file
www.example.com/index.html.
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.
Setting MainPageSuffix and NotFoundPage
In the following sample, the MainPageSuffix is set to index.html and
NotFoundPage is set to 404.html:
Console
- Open the Cloud Storage browser in the Google Cloud Platform Console.
Open the Cloud Storage browser In the list of buckets, find the bucket you created.
Click the more actions icon
next to the bucket
and select Edit website configuration.In the Configure website dialog, specify the Main Page and the 404 (Not Found) Page.
Click Save.
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/...
REST APIs
JSON API
- Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials.
- Create a .json file that sets the
mainPageSuffixandnotFoundPageproperties in awebsiteobject to the desired pages:{ "website":{ "mainPageSuffix": "index.html", "notFoundPage": "404.html" } } - Use
cURLto call the JSON API with aPATCHBucket 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://www.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.
- Create a .xml file that sets the
MainPageSuffixandNotFoundPageelements in aWebsiteConfigurationelement to the desired pages:<WebsiteConfiguration> <MainPageSuffix>index.html</MainPageSuffix> <NotFoundPage>404.html</NotFoundPage> </WebsiteConfiguration>
- Use
cURLto call the XML API, with aPUTBucket request andwebsiteConfigquery 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.
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 they won't take up quota and 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:
- In the GCP Console, go to the Projects page.
- In the project list, select the project you want to delete and click Delete delete.
- In the dialog, type the project ID, and then click Shut down to delete the project.
Deleting the bucket
If you do not want to delete the entire project, delete the bucket that you used for hosting your website:
Console
- Open the Cloud Storage browser in the Google Cloud Platform Console.
Open the Cloud Storage browser Select the checkbox of the bucket you want to delete.
Click Delete.
In the overlay window that appears, confirm you want to delete the bucket and its contents by clicking Delete.
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
The response looks like the following example:
Removing gs://www.example.com/...
Code samples
For more information, see the
Cloud Storage C++ API reference documentation
.
For more information, see the
Cloud Storage C# API reference documentation
.
For more information, see the
Cloud Storage Go API reference documentation
.
For more information, see the
Cloud Storage Java API reference documentation
.
For more information, see the
Cloud Storage Node.js API reference documentation
.
For more information, see the
Cloud Storage PHP API reference documentation
.
For more information, see the
Cloud Storage Python API reference documentation
.
For more information, see the
Cloud Storage Ruby API reference documentation
.
C++
C#
Go
Java
Node.js
PHP
Python
Ruby
REST APIs
JSON API
Note that your bucket must be empty before you can delete it.
- Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials.
- Use
cURLto call the JSON API, replacing[VALUES_IN_BRACKETS]with the appropriate values:curl -X DELETE -H "Authorization: Bearer [OAUTH2_TOKEN]" \ "https://www.googleapis.com/storage/v1/b/www.example.com"
If successful, the response contains a 204 status code.
See the Buckets: delete JSON reference page for more information.
XML API
Note that your bucket must be empty before you can delete it.
- Get an authorization access token from the OAuth 2.0 Playground. Configure the playground to use your own OAuth credentials.
- Use
cURLto call the XML API, replacing[VALUES_IN_BRACKETS]with the appropriate values:curl -X DELETE -H "Authorization: Bearer [OAUTH2_TOKEN]" \ "https://storage.googleapis.com/www.example.com"
See the Delete Bucket XML reference page for more information.
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 Platform tutorials that use Cloud Storage.

Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
