This topic describes how to use a custom domain name to configure static website hosting.

Prerequisites

  • You have registered a domain name of your own.

    If you have not registered a domain name, you can use Alibaba Cloud Domains to register a domain name. For this tutorial, examplewebsite.com is used as the domain name. You can replace this domain name with your registered domain name.

  • A bucket is created. The bucket ACL is set to public read.

    For more information about how to create a bucket, see Create buckets. For this tutorial, the bucket is named originbucket.

Step 1: Upload web page objects

Before configuring static website hosting, you must upload two HTML objects as the homepage and the default 404 page. You must also add some objects for testing.

  1. Create two HTML objects. One is used as the homepage of the website, and the other is used as the default 404 page of the website.
    The following code provides an example on how to create the two HTML objects:
    • Default homepage

      Create an object named index.html and use it as the default homepage of the static website. The content of the object is as follows: 

      <html>
   <head>
       <title>Hello OSS! </title>
       <meta charset="utf-8">
   </head>
   <body>
       <p>Now configure static website hosting for Alibaba Cloud OSS</p>
       <p>This is the index page</p>
   </body>
 </html>
    • Default 404 page
      Create an object named error.html and use it as the default 404 page of the static website. The content of the object is as follows: 
      <html>
<head>
   <title>Hello OSS! </title>
   <meta charset="utf-8">
</head>
<body>
   <p>This is the 404 page</p>
</body>
</html>
    Note You must ensure that the two objects are readable. Otherwise, the static web page cannot be accessed.
  2. Log on to the OSS console.
  3. Click Buckets, and then click the name of the target bucket.
  4. Choose Files > Upload.
  5. In the Upload dialog box that appears, click Upload in the Upload section. Upload the created web page objects and an image object named 123.jpg.
  6. After the upload is complete, close the Upload Tasks dialog box.

Step 2: Configure static website hosting

  1. Choose Basic Settings > Static Pages.
  2. Click Configure. Set index.html for Default Homepage and error.html for Default 404 Page.
    Note To redirect access requests for a subfolder to the index.html object of the subfolder, you can enable Subfolder Homepage. For more information, see Configure static website hosting.
  3. Click Save.

Step 3: Bind a custom domain name to an OSS bucket

Bind your custom domain name examplewebsite.com to your bucket. After the binding is complete, you can access the bucket by using your custom domain name, instead of the bucket domain name assigned by OSS.

  1. Choose Transmission > Domain Names.
  2. In the Bind Custom Domain Name dialog box that appears, enter the registered custom domain name in the Custom Domain Name field, and turn on Add CNAME Record Automatically.
    If your custom domain name is not managed by an Alibaba Cloud account, you must manually add a CNAME record. For more information, see Manually add a CNAME record.
  3. Click Submit
Note
  • For more information, see Bind custom domain names.
  • To improve upload and download speeds, or to enhance user experience for users located in remote geographic areas, we recommend that you enable OSS transfer acceleration and map the CNAME to an accelerate endpoint. For more information about how to bind an accelerate endpoint, see Bind accelerate endpoints.

Step 4: Test the website

To verify whether the website is running properly, open the following URLs in your browser:

URL Result
http://examplewebsite.com The default homepage of originbucket is displayed.
The URL used to access an object in originbucket. Example: http://examplewebsite.com/123.jpg. The content of 123.jpg is displayed.
The URL used to access an object that does not exist in originbucket. Example: http://examplewebsite.com/abc. The default 404 page of originbucket is displayed.
Note In some cases, you may need to clear the cache of your browser to obtain the expected result.