All Products
Search

This Product

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

    Document Center

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

    Last Updated:Apr 26, 2024

    You can host a static website on an Object Storage Service (OSS) bucket and allow users to access the website by using the 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 an Alibaba Cloud domain name.

    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 Buckets page, click Create Bucket.

    3. In the Create Bucket panel, configure the parameters. The following table describes the parameters. Retain the default configurations of other parameters that are not described in the table.

      Parameter

      Description

      Bucket Name

      The name of the bucket. In this example, set the bucket name to examplebucket.

      Region

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

      Storage Class

      Select Standard.

      Access Control List (ACL)

      Select Public Read.

      Retain the default configurations of other parameters. For more information, see Create buckets.

    4. Click Create.

    Step 3: Create and upload web page objects

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

    1. Create two local HTML files.

      • Default homepage file

        In this example, the following content is used to generate 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 file

        In this example, the following content is used to generate the 404 error file error.html of the static website. Specify the content of the 404 error 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 objects to the 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. On the Objects page, click Upload.

      5. In the Upload panel, click Select Files and select the two web page files that you created in the Files to Upload section. Retain the default configurations of other parameters.

      6. Click Upload.

    Step 4: Configure static website hosting

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

    2. On the Static Pages page, click Configure. 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 that you created to access the bucket by using the domain name.

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

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

    3. In the Map Custom Domain Name panel, enter example.com in the Custom Domain Name field and turn on Add CNAME Record Automatically.

    4. Click Submit.

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

    You can use Alibaba Cloud CDN to improve the performance of the website. 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, Alibaba Cloud CDN redirects the request to a copy of the file cached in the data center closest to the region in which the visitor is located. This way, the download is accelerated.

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

    2. On the Domain Names page, click Not Configured in the Alibaba Cloud CDN column of the domain name to go to the Alibaba Cloud CDN console.

    3. On the Add Domain Name page, configure the parameters. The following table describes the parameters.

      Parameter

      Description

      Domain Name to Accelerate

      Retain the default configuration.

      Resource Groups

      Select Default Resource Group.

      Business Type

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

      Origin Servers

      Retain the default configuration.

      Port

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

      Region

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

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

    5. Record the CNAME value of the domain name example.com.w.kunlunsl.com. 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. On the Domain Name Resolution page, find 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 in the Actions column.

      4. Change the value of Record Value to example.com.w.kunlunsl.com. Retain the default configurations 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, you can submit a ticket to apply for the feature. After you are authorized to configure auto CDN cache update for specific operations, click Supported Operations in the Auto CDN Cache Update column that corresponds to the domain name and select the operations that can trigger auto CDN cache update. For more information about the supported operations, see the "Enable auto CDN cache update" section in Map accelerated domain names.

    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, a similar 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, a similar page is displayed.404

    Step 7: Clean up resources

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