This page shows examples and tips for\nusing buckets to host a static website.\n\n
## Specialty pages\n\n
 Index pages\n\n
An index page (also called a webserver directory index)\nis a file served to visitors when they request a URL that doesn't have an\nassociated file. When you assign a
MainPageSuffix property,\nCloud Storage looks for a file with that name whose prefix matches the\nURL the visitor requested

For example, say you set the
MainPageSuffix of your static website to\n
index.html. Additionally, say you have no file named
directory in your\nbucket
www.example.com. In this situation, if a user requests the URL\n
httpwww.example.com/directory, Cloud Storage attempts to serve the file\n
www.example.com/directory/index.html. If that file also doesn't exist,\nCloud Storage returns an error page

The
MainPageSuffix also controls the file served when users request the top\nlevel site. Continuing the above example, if a user requests\n
httpwww.example.com, Cloud Storage attempts to serve the file\n
www.example.com/index.html

When attempting to access a URL with a trailing slash, such as\n
httpwww.example.com/dir/, see Troubleshooting

 Error page\n\n
The error page is the file returned to visitors of your static site who\nrequest a URL that does not correspond to an existing file. If you have\nassigned a
MainPageSuffix, Cloud Storage only returns the error page if\nthere 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\ncontrols which file acts as the error page is
NotFoundPage. If you don't\nset
NotFoundPage, users receive a generic error page

## Website configuration examples\n\n
 Three-object bucket\n\n
Suppose a bucket named
www.example.com has been configured as a website\nwith the following settings and files:
- \n
MainPageSuffix= "index.html" \n
NotFoundPage= "404.html" \n
- The bucket contains threeshared objects: "index.html", "404.html", and "dir/index.html". \n
The following table shows the content served for selected URLs:\n\n
|URL Requested\n||Content Served\n||HTTP response code\n|
|httpwww.example.com \n|
\nhttpwww.example.com/
\nhttpwww.example.com/index.html
|The object "index.htmln||200\n|
|httpwww.example.com/hello\n||The object "404.htmln||404\n|
|httpwww.example.com/dir/index.html\n||The object "dir/index.htmln||200\n|
|httpwww.example.com/dir\n||The object "dir/index.htmln||301\n|
|httpwww.example.com/dir/\n||The object "dir/index.html", assuming no zero-byte object exists for /dir/\n||200\n|
|A zero byte empty object, if it exists for /dir/. See the Troubleshooting topic for removing this zero byte object.\n||301\n|
 Two-object bucket\n\n
Suppose a bucket named
www.example.com has been configured as a website\nwith the following settings and files:
- \n
MainPageSuffix= "main.html" \n
NotFoundPage= "404.html" \n
- The bucket contains twoshared objects: "main.html" and "404.html". \n
The following table shows the content served for selected URLs:\n\n
|URL Requested\n||Content Served\n||HTTP response code\n|
|httpwww.example.com \n|
\nhttpwww.example.com/
|The object "main.htmln||200\n|
|httpwww.example.com/index.html\n||The object "404.htmln||404\n|
If an object is sharedyou can also\nview that object with the URL:\n
httpstorage.googleapis.com/\n\n
BUCKET_NAME/ OBJECT_NAME
For example, the URL for an
index.html object would be:\n
httpstorage.googleapis.com/www.example.com/index.html\n\n
For more information about working withaccessible data, see\nAccessing Public Data.\n\n
## Tips for working with a bucket configured as a website\n\n
The following are some tips to keep in mind when using a\nbucket to host a static website.\n\n
 Add subdomains\n\n
Suppose you also want to serve content at
test.example.com, from a different\nbucket than the one that serves content at
www.example.com. To do so:
- \n
Create a new bucket to serve your additional content.\n
If you followed the tutorial at Hosting a static website to serve your\ncontent over HTTPS, edit your load balancer in the\nCloud console as follows:\n\n
\n
- \n
- For
Backend configuration, create a new backend bucket
test-bucket\nby selecting the new bucket you created. \n
- For
Host and path rules, add a new rule as follows:\n
\nHosts Paths Backends\ntest.example.com /* test-bucket\n\n
For\n\n
Frontend configuration, add a new Frontend IP and port with the\nsame values as your first configuration, with the following exceptions:
\n
- \n
- For
IP address, create and reserve a new IP address. \n
- For
Certificate, create a new SSL certificate for
test.example.com. \n
- For
- For
After you update the load balancer, add a new
Arecord to your domain\nregistration service using the IP address of the new frontend configuration:\n
\nNAME TYPE DATA\ntest A
IP_ADDRESS\n \n
 API behavior\n\n
The
MainPageSuffix and
NotFoundPage website configurations are only used\nfor requests that come to Cloud Storage through a\n
CNAME or
A redirect. For example, a request to
www.example.com\nshows the index page, but an equivalent request to\n
storage.googleapis.com/www.example.com does not

Thus, API behavior for requests to Cloud Storage domains, such as\n
storage.googleapis.com/www.example.com, is preserved. For example, you\ncan continue to list objects in the
www.example.com bucket as you would\nfor any other bucket. In the case of the
www.example.com bucket, the object\nlisting you receive includes
404.html and
index.html

 Host static assets for a dynamic website\n\n
You can use Cloud Storage to host static assets for a dynamic website that is\nhosted, for example, in Google App Engine or in\nGoogle Compute Engine. Some benefits of hosting your static assets,\nlike images or JavaScript files, in a bucket include:\n\n
- \n
Cloud Storage behaves like a Content Delivery\nNetwork (CDN) becausereadable objects are cached in\nthe Cloud Storage network by default.\n
Bandwidth charges for accessing content typically cost less with Cloud Storage.\n
The load on your web servers is lessened when serving the static content from\nCloud Storage.\n
When hosting static assets for a dynamic website, you do not need to create\nDNS records and point to a bucket or load balancer as you do for a\nstatic website. For example, you could have a bucket named\n
www_example_com_assets with appropriate assets configured as shared\npublicly and then access those assets using the Cloud Storage domain.\nFor example, suppose you have the JavaScript file
library.js in the bucket\n
www_example_com_assets that is sharedthen you can access it as\n
httpstorage.googleapis.com/www_example_com_assets/library.js

 Set cache parameters\n\n
You can control how or if your website assets are cached by configuring the\n
Cache-Control metadata. Generally, only set cache control metadata\nfor objects that are accessible to all anonymous users, which is a requirement\nfor any object served from a Cloud Storage bucket as part of a static\nwebsite

Cloud Storage applies a cache control setting of 3600 seconds to objects that are\naccessible to all anonymous users, unless you specify explicit cache control\nsettings. See Viewing and Editing Metadata for instructions for setting\nobject metadata, such as
Cache-Control

You can also use Cloud CDN to cache external HTTP(S) load balanced content\nclose to your users, which often reduces serving costs. For more information, see\nCaching.\n\n
 Monitor your charges\n\n
If you are serving assets from a bucket configured as a static website or\nserving static assets from a bucket for a dynamic website hosted outside of\nCloud Storage, you should monitor the charges to your project containing the\nbucket. Serving content incurs Cloud Storage costs for storing the\ncontent, using the network, and performing retrieval operations. For details,\nsee the Cloud Storage Pricing page.\n\n
You may also incur networking charges if you use HTTP(S) Load Balancing to set up\nHTTPS. See Network Pricing for more details.\n\n
The simple pricing example on the pricing examples page can\nbe used as an approximation for the use case of a low-traffic, static website.\nNote, however, that the example does not account for charges associated with\nHTTP(S) Load Balancing, which can often be the largest charge for static website\nhosting. You can use the Pricing\nCalculator to generate a cost estimate based on your projected usage.\n\n
\n\n
If you are a current Google Cloud user, you can get a detailed breakdown of\nyour project costs on the billing page.\n\n
 Troubleshooting\n\n
See Troubleshooting for common issues associated with using a bucket\nconfigured to serve static website content.\n\n
## What\'s next\n\n
- \n
- Learn about other web serving options on Google Cloud. \n
- Try other Google Cloud tutorials that use Cloud Storage. \n
## \n Try it for yourself\n\n \n\n \n \n \n
\n If you\'re new to Google Cloud, create an account to evaluate how\n Cloud Storage performs in real-world\n scenarios. New customers also get $300 in free credits to run, test, and\n deploy workloads.\n\n \n \n\n \n\n \n\n\n\n\n\n \n\n \n\n \n\n \n\n \n \n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n \n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n\n\n\n\n\n\n\n \n \n \n \n \n Try Cloud Storage free\n\n\n\n\n