A static website refers to a website whose primary content is composed of static objects, including images and small files in formats such as HTML and CSS. You can use the static website hosting feature to host your static website on an Object Storage Service (OSS) bucket and use the domain name of the bucket to access the website.
Instructions
When you enable the static website hosting feature, you must specify the default homepage and the default 404 page of the website.
The default homepage appears when you use a browser to access the static website that is hosted on the OSS bucket.
The object that you specify as the default homepage must be an object that is stored in the root directory of the bucket and allows anonymous access. If you have the subfolder homepage feature enabled, the object must also be stored in the subdirectory.
The default 404 page is the error page that is returned by OSS. When you use a browser to access the static website that is hosted on an OSS bucket and a 404 error occurs, OSS returns the default 404 page.
The object that you specify as the default 404 page must be an object that is stored in the root directory of the bucket and allows anonymous access.
To allow anonymous access to the object, you must set the access control list (ACL) of the object that is specified as the default homepage or default 404 page to public-read
. For more information about how to configure the ACLs of objects, see Configure ACL for objects.
Notes
To ensure data security, starting September 28, 2018 for regions in the Chinese mainland and September 25, 2019 for regions outside the Chinese mainland, the following limits take effect when you access static web page objects whose MIME type is text/html and whose name extension is HTM, HTML, JSP, PLG, HTX, or STM by using browsers:
When you use the default OSS domain name to access a static web page object, the following header is automatically added to the response: Content-Disposition:attachment. When you use a browser to access an object, the object is downloaded as an attachment.
When you use a custom domain name to access a static web page object by using a browser that can preview the web page object in a specific format, the object content is previewed.
Billing rules
You are charged based on the storage capacity that is used to store static web page objects, such as HTML, CSS, JavaScript, and images.
Fees for outbound traffic resulting from access to static websites apply to all served content, including the default homepage, images, scripts, and responses returned for 404 errors.
GET requests for accessing the default homepage, other pages, static resources, or 404 error pages are subject to API operation calling fees for GET requests.
Examples
After you host a static website on a bucket, you must upload an object whose name is the same as that of the default homepage to the bucket. Example: index.html. If the bucket has a directory named subdir/, you must upload the index.html object to the directory. In addition, you must upload an object whose name is the same as that of the default 404 page to the bucket. Example: error.html. The following section shows the structure of the objects and directories in the sample bucket:
Bucket
├── index.html
├── error.html
├── example.txt
└── subdir/
└── index.html
In this example, the custom domain name example.com
is bound to the bucket, the default homepage of the static website that is hosted on the bucket is index.html, and the default 404 page of the website is error.html. When you access the static website by using the custom domain name, OSS returns different responses based on your configurations of Static Pages for the bucket that hosts the website.
If Subfolder Homepage is disabled:
When you access https://example.com/ and https://example.com/subdir/, OSS returns https://example.com/index.html.
When you access https://example.com/example.txt, the example.txt object is obtained.
When you access https://example.com/object, OSS returns https://example.com/error.html if the object object does not exist.
If Subfolder Homepage is enabled
When you access https://example.com/, OSS returns https://example.com/index.html.
When you access https://example.com/subdir/, OSS returns https://example.com/subdir/index.html.
When you access https://example.com/example.txt, the example.txt object is obtained.
When you access https://example.com/object, OSS returns one of the following responses based on your configurations for Subfolder 404 Rule because the object object does not exist:
If Subfolder 404 Rule is set to Redirect, which is the default value, OSS continues to check whether object/index.html exists. If object/index.html exists, OSS returns the HTTP status code 302 and redirects the request to https://example.com/object/index.html. If object/index.html does not exist, OSS returns the HTTP status code 404 and checks whether https://example.com/error.html exists.
If Subfolder 404 Rule is set to NoSuchKey, OSS returns the HTTP status code 404 and checks whether https://example.com/error.html exists.
If Subfolder 404 Rule is set to Index, OSS continues to check whether the object/index.html object exists. If the object exists, OSS returns the HTTP status code 200 and the content of the object. If the object does not exist, OSS checks whether https://example.com/error.html exists.
Methods
Use OSS SDKs
Use ossutil
Related API operation
The methods described above are fundamentally implemented based on the RESTful API, which you can directly call if your business requires a high level of customization. To directly call an API, you must include the signature calculation in your code. For more information, see PutBucketWebsite.
FAQ
Can I disable the static website hosting feature after I enabled it for a bucket?
References
You can host a static website on an OSS bucket and allow users to access the website by using a custom domain name that is bound to the bucket. Example: example.com. For more information, see Use a custom domain name to configure static website hosting.
You can use React and the static website hosting feature to build a single-page application (SPA) at the frontend. For more information, see Tutorial: Use static website hosting to build a single-page application.