• Object Storage Service

obs
  1. Help Center
  2. Object Storage Service
  3. User Guide
  4. OBS Console Operation Guide
  5. Static Website Hosting
  6. Configuring Static Website Hosting

Configuring Static Website Hosting

This section describes how to configure static website hosting for buckets and use bucket domain names to access static websites.

Prerequisites

All of the website files required by the static website have been uploaded to the specified bucket.

If the website files are Cold storage class, restored them first. For more information see Restoring a Cold File on OBS.

NOTICE:

To ensure that a hosted static website can be accessed by all users, set anonymous users to be able to access static website files in the bucket. The configuration of static website hosting takes effect within two minutes after the configuration.

Procedure

  1. In the bucket list on the OBS Console, click the target bucket to go to the Summary page.
  2. Optional: To ensure that a hosted static website can be accessed by all users, configure the following policy so that all static website files in the bucket can be accessed publicly.

    1. In the navigation tree on the left, click Objects.
    2. Click the target object and click Object ACL.
    3. In Object ACL > Public Permissions > Anonymous Users, click Edit to set an object read permission for anonymous users. This option is selected in Figure 1.
      Figure 1 Setting an object read permission for anonymous users
    4. Click Save to save the permission setting.

    If the bucket contains only static website files, configure the public read policy for the bucket so that all files in the bucket can be accessed publicly.

    1. Choose Permissions > Bucket Policy.
    2. Click the Public Read card to allow all objects in the bucket to be accessible publicly. This option is selected in Figure 2.
      Figure 2 Configuring the public read permission

  3. In the navigation tree on the left, click Static Website Hosting.
  4. Click the Static Website Hosting card and select Use this bucket to host a websiteFigure 3 displays this page.

    Figure 3 Static Website Hosting

  5. Set the values of Default Home Page and Default 404 Error Page.

    • Default Home Page: specifies the default homepage of the static website. When OBS Console is used to configure static website hosting, only HTML web pages are supported. When APIs or SDKs are used to configure static website hosting, OBS does not have such a restriction but the Content-Type of objects must be specified.

      OBS only allows files such as index.html in the root directory of a bucket to function as the default homepage. That is to say, do not set the default homepage with a multi-level directory structure (for example, /page/index.html).

    • Default 404 Error Page: specifies the error page returned when an error occurs during static website access. When OBS Console is used to configure static website hosting, only HTML, JPG, PNG, BMP, and WEBP files under the root directory are supported. When APIs or SDKs are used to configure static website hosting, OBS does not have such a restriction but the Content-Type of objects must be specified.

  6. Optional: In Redirection Rule, configure redirection rules. Requests that comply with the redirection rules are redirected to the specific host or page.

    Redirection Rule is compiled in the JSON or XML format. Each rule contains a Condition and a Redirect, as shown in the following example:

    In the previous template, there are two redirection rules:

    [

    {

    "Condition": {

    "KeyPrefixEquals": "folder1/"

    },

    "Redirect": {

    "HostName": "www.example.com"

    }

    },

    {

    "Condition": {

    "KeyPrefixEquals": "folder2/"

    },

    "Redirect": {

    "ReplaceKeyPrefixWith": "folder3/"

    }

    }

    ]

    • Automatically redirects requests prefixed with folder1/ to host www.example.com.
    • Automatically redirects requests prefixed with folder2/ to an object prefixed with folder3/.
    Table 1 Parameter description

    Parameter

    Key

    Condition

    KeyPrefixEquals, HttpErrorCodeReturnedEquals

    Redirect

    Protocol, HostName, ReplaceKeyPrefixWit, ReplaceKeyWith, HttpRedirectCode

  7. Click OK.

    After the static website hosting settings take effect on OBS, you can use the following domain names to access the static website. If you successfully access the website using the following domain names, static website hosting is successfully configured.

    https://bucketname.OBS static website hosting domain name

    http://bucketname.OBS static website hosting domain name

    NOTE:

    In some conditions, you may need to clear the browser cache before the expected results are displayed.