All Products
Search
Document Center

Object Storage Service:Use a custom domain name to configure static website hosting

Last Updated:Jan 23, 2024

You can host a static website on an Object Storage Service (OSS) bucket and allow users to access the website by using a custom domain name, such as example.com, that is mapped to the bucket. This tutorial shows how to host an existing static website or create a website on an OSS bucket from scratch.

Step 1: Register a domain name

Before you build a static website, you must register a domain name for the website. We recommend that you use Alibaba Cloud Domains to register a domain name for your website. For more information, see How to register a domain name on Alibaba Cloud.

In this example, example.com is used as the domain name of the website.

Important

If you want to map the registered domain name to a bucket that is located in a region in the Chinese mainland, you must apply for an ICP filing for the domain name at the Ministry of Industry and Information Technology (MIIT) of China. For more information, see Filing.

Step 2: Create a bucket

You must create a public read bucket to host a static website and store website data.

  1. Log on to the OSS console.

  2. In the left-side navigation pane, click Buckets. On the page that appears, click Create Bucket.

  3. In the Create Bucket panel, configure the parameters according to the following table.

    Parameter

    Description

    Bucket Name

    Set the bucket name to examplebucket.

    Region

    Select the region in which the bucket is located. In this example, select China (Hangzhou).

    Storage Class

    Select Standard.

    ACL

    Select Public Read.

    Retain the default settings for other parameters. For more information, see Create buckets.

  4. Click OK.

Step 3: Create and upload web page files

You must create the default homepage and 404 error page files for the website and upload the files to the created bucket.

  1. Create two HTML files on your on-premises device.

    • Default homepage

      The following sample code generates the homepage file index.html of the static website. Specify the content of the homepage file based on your requirements.

      <html>
         <head>
             <title>Hello OSS!</title>
             <meta charset="utf-8">
         </head>
         <body>
             <p>Configure static website hosting for an OSS bucket</p>
             <p>This is the index page</p>
         </body>
       </html>
    • Default 404 error page

      The following sample code generates the 404 error page file error.html of the static website. Specify the content of the 404 error page file based on your requirements.

      <html>
      <head>
         <title>Hello OSS!</title>
         <meta charset="utf-8">
      </head>
      <body>
         <p>This is the 404 page</p>
      </body>
      </html>
  2. Upload the web page files to the destination bucket.

    1. Log on to the OSS console.

    2. In the left-side navigation pane, click Buckets. On the Buckets page, find and click the desired bucket.

    3. In the left-side navigation tree, choose Object Management > Objects.

    4. Click Upload Object.

    5. In the Upload Object panel, select the two web page files in the Files to Upload section. Retain the default settings for other parameters.

    6. Click Upload Object.

Step 4: Configure static website hosting

  1. In the left-side navigation tree, choose Data Management > Static Page.

  2. On the Static Page page, click Settings. Then, set Default Homepage to index.html and Default 404 Page to error.html.

    Note

    To redirect access to a subdirectory to the index.html object in the subdirectory, you can enable Subfolder Homepage. For more information, see Configure static website hosting.

  3. Click Save.

Step 5: Map the custom domain name to the bucket

Map the registered custom domain name example.com to the examplebucket bucket. Then you can access the bucket by using the domain name.

  1. In the left-side navigation tree, choose Bucket Settings > Domain Names.

  2. On the Domain Names page, click Map Custom Domain Name.

  3. Enter example.com in the Domain Name field and turn on Automatically Add CNAME Record.

  4. Click Submit.

Step 5: (Optional) Accelerate access to your website by using Alibaba Cloud CDN

You can use Alibaba Cloud CDN to improve your website performance. Alibaba Cloud CDN caches the files of the website, such as HTML files, images, and videos, to data centers around the world. When a visitor requests a file from the website, a copy of the file is served directly from the data center closest to the visitor. This way, the download is accelerated.

  1. In the left-side navigation tree, choose Bucket Settings > Domain Names.

  2. Click Not Configured next to the domain name to go to the Alibaba Cloud CDN console.

  3. On the Add Domain Name page, configure the parameters according to the following table.

    Parameter

    Description

    Region

    Select the region for which you want to accelerate access. In this example, select Chinese Mainland Only.

    Domain Name to Accelerate

    Use the default settings.

    Business Type

    Content delivery varies with business types. Select a business type based on your stored content and content usage. In this example, select Image and Small File.

    Resource Groups

    Select Default Resource Group.

    Origin Servers

    Use the default settings.

    Port

    Select the port that is used by CDN. In this example, select 80.

  4. Click Next, and then click Return to Domain Name List.

  5. Record the CNAME value of the domain name example.com.w.kunlunsl.com. Then modify the CNAME record that is added when you map the custom domain name to the bucket.

    1. Log on to the Alibaba Cloud DNS console.

    2. In the left-side navigation pane, click Domain Name Resolution. On the displayed page, locate the domain name and click DNS Settings in the Actions column.

    3. Find the CNAME record that is automatically added when you map the custom domain name. Click Modify.

    4. Set Record Value to example.com.w.kunlunsl.com and retain the default settings for other parameters.

    5. Click OK.

  6. Optional. On the Domain Names page, turn on Auto CDN Cache Update.

    If you want to configure auto CDN cache update for specific operations, submit a ticket. After your request is approved, click Supported Operations in the Auto CDN Cache Update column of the domain name and select the operations that can trigger auto CDN cache update. For more information about the supported operations, see Enable auto CDN cache update.

Step 6: Test the website

Enter the following URLs in a browser to check whether the website runs as expected.

  • Visit http://example.com to access the homepage of the static website. If static website hosting is correctly configured, the following page is displayed.11

  • Visit http://example.com/example.txt to access an object that does not exist in the bucket. If static website hosting is configured, the following page is displayed.404

Step 7: Clean up resources

The resources created in this tutorial are used only for tests. We recommend that you clean up these resources after the test is complete to prevent unnecessary fees.