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

Prerequisites

  • You have registered a custom domain name.

    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 name is originbucket.

Step 1: Upload web page files

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

  1. Create two HTML objects. One is used as the homepage of the website, and the other is used as the 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 on 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 the target bucket.
    • New console: Click Buckets, and then click the name of the target bucket.
    • Old console: In the left-side navigation pane, 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. Click the target bucket and find the Static Pages section.
    • New console
      1. Click Buckets, and then click the name of the target bucket.
      2. Choose Basic Settings > Static Pages.
    • Old console
      1. In the left-side navigation pane, click the name of the target bucket.
      2. Click the Basic Settings tab. Find the Static Pages section.
  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. Click the target bucket. Open the Domain Names tab.
    • New console
      1. Click Buckets, and then click the name of the target bucket.
      2. Choose Transmission > Domain Names.
    • Old console
      1. In the left-side navigation pane, click the name of the target bucket.
      2. On the Overview page of the bucket, click the Domain Names tab.
  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 an Alibaba Cloud domain name, 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 other 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 web browser to obtain the expected result.