Help Center> Object Storage Service> Best Practices> Using a User-Defined Domain Name to Host a Static Website> Static Website Hosting
View PDF

Static Website Hosting

OBS allows you to access static websites hosted by OBS using user-defined domain names. This section uses a typical scenario as an example to describe how to use a user-defined domain name to configure static website hosting. Before starting the configuration, you may need to learn more about static website hosting.

Scenario Introduction

Company A has a large number of files to archive but it does not want to invest efforts on storage resources. Therefore, the company subscribes to OBS to host static websites and expects that users under the company's account can access the static resources through a user-defined domain name. See Figure 1.

Figure 1 Using a user-defined domain name to access hosted static website

Data Planning

Table 1 describes the data to be planned before this configuration.

Table 1 Data planning

Item

Description

Example

User-defined domain name

User's own domain name

www.example.com

Static website homepage

Indicates the index page that is returned when you access a static website, that is, the homepage.

index.html

Default 404 Page

When an incorrect static website path is accessed, the 404 error page is returned.

error.html
  • Content of the index.html file 
    <html>
  <head>
      <title>Hello OBS!</title>
      <meta charset="utf-8">
  </head>
  <body>
      <p>Welcome to use OBS static website hosting.</p>
      <p>This is the homepage.</p>
  </body>
</html>
  • Content of the error.html file 
    <html>
  <head>
      <title>Hello OBS!</title>
      <meta charset="utf-8">
  </head>
  <body>
      <p>Welcome to use OBS static website hosting.</p>
      <p> This is the 404 error page.</p>
  </body>
</html>

Process of Static Website Hosting

You need to create a bucket on OBS Console to store static website resources, enable static website hosting for the bucket, and bind the user-defined domain name to the newly created bucket using the user-defined domain name binding function provided by OBS. Then, create and configure domain name hosting using Domain Name Service (DNS) so that a user-defined domain name can be used to access the static website hosted on the OBS. Specific operations are as follows:

  1. Register a domain name.
  2. Create a bucket.
  3. Upload static website files.
  4. Host the static website on OBS.
  5. Bind a user-defined domain name.
  6. Create and configure domain name hosting.
  7. Verify the configuration.

Procedure

  1. Register a domain name.

    If you have a registered domain name, skip this step.

    If you do not have a registered domain name, register one with a registrar. In this scenario, the example domain name www.example.com is used. In practice, you need to replace the domain name with the one you actually planned.

  2. Create a bucket.

    There is no special requirement for bucket names. You only need to create a bucket for storing static website files as prompted. The following example describes how to create a bucket named example:

    1. Open OBS Console and log in to the console as prompted.
    2. Click Create Bucket in the upper part of the page.
    3. Set the following parameters in the dialog box that is displayed:
      • Region: Select a region close to the service according to the proximity principle.
      • Storage Class: It is recommended that you select Standard.

        You can also select Low Frequency Access or Archive based on the website access frequency and response speed requirements. For details about storage classes, see Storage Classes.

      • Bucket Name: Enter example.
      • Bucket Policies: Select Public Read to allow any user to access objects in the bucket.
      • Default Encryption: Select Disable.
    4. Click Create Now. The bucket is created.

  3. Upload static website files.

    Prepare the static website files to be uploaded and repeat the following steps on OBS Console until all static website files are uploaded to bucket created in Step 2.

    In regions where batch uploading is available, you can upload a maximum of 100 files in a batch, with a total size not more than 5 GB. If there are a large number of website files, you are advised to use OBS Browser+ to upload them. For details, see Using OBS Browser+ to Upload a File or Folder.

    1. Click the name of the target bucket to go to the bucket overview page, and then click Object in the navigation pane on the left.
    2. Click Upload Object. A dialog box is displayed. For details, see Figure 2.
      Figure 2 Uploading an object
    3. Add the files to be uploaded.
      • The static website files cannot be encrypted for upload.
      • It is recommended that you select Standard for the storage class. If the storage class of static website files is Archive, you need to restore the files first before accessing it. For details, see Restoring an Archive File on OBS.
      • The website home page file (index.html) and 404 error page (error.html) must be stored in the root directory of the bucket.
    4. Click Upload to upload the files.

  4. Configure static website hosting.

    After uploading the static website files, you need to perform the following steps to set the bucket to the static website hosting mode.

    You can also redirect the entire static website to another bucket or domain name. For details, see Configuring Redirection.

    1. Click the bucket that you want to configure. On the Overview page that is displayed, choose Basic Configurations > Static Website Hosting on the navigation pane on the left.
    2. Click Configure Static Website Hosting.
    3. In the dialog box that is displayed, select Use this bucket to host a website, set Default Home Page to index.html in the data plan, and set Default 404 Error Page to error.html in the data plan. See Figure 3.
      Figure 3 Configuring static website hosting

      You can also configure redirection rules based on service requirements to implement website content redirection. For details, see Configuring Static Website Hosting.

    4. Click OK.

  5. Bind a user-defined domain name.

    To bind a user-defined domain name to OBS, perform the following steps:

    1. Click the bucket name to go to the Overview page. In the navigation tree on the left, click Domain Name Management.
    2. Click Bind User Domain Name, and enter www.example.com in the User Domain Name text box, as shown in Figure 4.
      Figure 4 Binding a user domain name
    3. (Optional) Configure CDN acceleration.

      After CDN acceleration is enabled, select website acceleration, file download acceleration, or VOD acceleration based on the hosted static website type. CDN acceleration is billable, for details, see CDN Pricing Details.

      With CDN acceleration enabled, you also need to perform operations by referring to Why Is My .html Static Website File Directly Downloaded When I Access It? Otherwise, browse .html static website files may fail.

    4. Click OK. The user-defined domain name is bound to the bucket domain name.
    5. (Optional) If CDN acceleration is enabled, perform the following steps to configure CDN origin information:
      1. In the Operation column of the user-defined domain name that has been bound, click Manage CDN Acceleration.
      2. On the CDN Console page that is displayed, click the domain name. The page with basic information and settings of the domain name is displayed.
      3. In the Origin Server Setting area, click Edit, the Modify Origin Server dialog box is displayed. In the Primary Origin Server area, select Domain name for Type and enter the website hosting domain name in the Origin Server text box.

        Perform the following operations to obtain the website hosting domain name. On OBS Console, enter the bucket for website hosting, select Static Website Hosting from Basic Configurations in the navigation pane on the left. On the displayed page, the value of Endpoint is the website hosting domain name.

      4. Click OK.

  6. Create and configure domain name hosting.

    To facilitate unified management of your user-defined domain names and static websites and implement cloud-based services, you can directly manage your user-defined domain names on HUAWEI CLOUD DNS. After the hosting is configured, you can perform subsequent management of the domain name on DNS, including managing record sets and PTR records, as well as creating wildcard DNS records.

    You can also add a CNAME record to the DNS at the DNS registrar based on whether CDN acceleration is enabled.

    • If CDN acceleration is enabled when a user-defined domain name is bound, the added CNAME record must point to the acceleration domain name provided by CDN. For example: If the acceleration domain name of www.example.com is www.example.com.c.cdnhwc1.com, after CDN acceleration is enabled, you need to add a CNAME record whose value is www.example.com CNAME www.example.com.c.cdnhwc1.com at your DNS registrar.
    • If CDN acceleration is disabled when a user-defined domain name is bound, the added CNAME record must point to the access domain name of the bucket. For example: If the region of bucket example is CN North-Beijing1, add the CNAME record whose value is www.example.com CNAME example.obs.cn-north-1.myhuaweicloud.com at your DNS registrar.

    To create and configure domain name hosting on DNS, perform the following steps:

    1. Add a public zone.

      Use the root domain name example.com created in 1 as the name of the public zone to be created. For details, see "Create a Public Zone" in Configuring Record Sets for a Website (for Domain Names Registered with a Third-Party Registrar).

    2. Add a CNAME record.

      In DNS, add a record set for the sub-domain name www.example.com of the hosted domain name, to map the CNAME of the sub-domain name to the static website domain name hosted by OBS. Configure the parameters as follows:

      • Name: Enter www.
      • Type: Select CNAME-Canonical name.
      • Line: Select Default.
      • TTL (s): Retain the default value.
      • Value: Domain name mapped to the CNAME. If CDN acceleration is disabled when a user-defined domain name is bound, enter the static website hosting domain name of the bucket. If CDN acceleration is enabled, set this parameter to the acceleration domain name (CNAME) provided by CDN.

      For details, see Adding a CNAME Record Set.

    3. Change the DNS server address at your domain name registrar.

      At your domain name registrar, change the DNS server address in the NS record of the root domain name to the cloud DNS server address. The specific address is the NS value of the public zone in DNS.

      For details about how to change the IP address of the DNS server, see section "Change the DNS Servers of the Domain Name" in Configuring Record Sets for a Website (for Domain Names Registered with a Third-Party Registrar).

      Generally, the update takes effect within 48 hours, but the time may vary depending on domain name registrars.

  7. Verify that the configuration is successful.

    • Enter www.example.com in the address bar of the browser to check whether the default homepage can be accessed. For details, see Figure 5.
      Figure 5 Default homepage
    • In the web browser, enter a static file access address that does not exist in a bucket. For example: www.example.com/imgs to verify that the 404 error page can be returned See Figure 6.
      Figure 6 Default 404 Page

    Due to browser cache, you may need to clear the browser cache to view the expected effect.