View here to log in or access your console

OK

Host a Static Website on OSS

Introduction

You can use Alibaba Cloud to host websites comprised of static or rarely changing content (including client side scripts such as HTML, CSS and JavaScript).
This guide will help you complete the following tasks:

- 48547">Host your static website -
Use Alibaba Cloud Object Storage Service (OSS) to host your static website. You will save your files to Alibaba Cloud OSS which will then provide content to visitors to your site.
- 48547">Bind your custom domain name 
- You can bind a custom domain name to your bucket. This allows you to seamlessly move your storage space to OSS.

In order to host your static website on Alibaba Cloud, you must first complete the following operations:
1. Create a bucket where you will store your website's files such as images, scripts, and videos.
2. Upload your files to your bucket.
3. Set your bucket to Static Website Hosting Mode.
Once you have completed the above operations, visitors will be able to access your site using a link in this format: http://oss-sample.oss-cn-hangzhou.aliyuncs.com/, where Oss-sampleis the name of your bucket, and oss-cn-hangzhou.aliyuncs is your domain name.
Next, you can bind you custom domain name to your bucket and thereby seamlessly move your storage space to OSS. For example, if your domain name is my-domain.com and all your images were previously located at http://img.my-domain.com/x.jpg, after you move your storage to OSS and bind your custom domain name, the images can still be accessed at the original address.

Bind a custom domain name

After uploading an object to a bucket, you can obtain an object address including two parts: an OSS domain name address (<BucketName>.<Endpoint>) and an object file name. To avoid possible cross-origin or security problems in your business, you are advised to access the OSS using a custom domain name. After the domain name is successfully bound, you also need to add a CNAME record pointing to the Internet domain name of the bucket to ensure proper domain name-based access to the OSS.
After a custom domain name is successfully bound, access addresses of the files stored in your OSS will use the custom domain name. For example, if your bucket test-1-001 is located at the Hangzhou node, the object file name is test001.jpg, and the bound custom domain name is hello-world.com, then the access address of this object is as follows:
- Before the binding: test-1-001.oss-cn-hangzhou.aliyuncs.com/test001.jpg
- After successful binding: hello-world.com/test001.jpg

Bind a domain name

1.Go to the OSS Console.
2.Click the name of the target bucket to enter the bucket management page.
3.Select Bucket Properties > Domain name management.

4.Click Add a domain name. The Add a domain name page is displayed.
5.Enter the domain name you want to bind in the dialog box.

6.Click Next. The Add Canonical Name page is displayed.

Note: If the domain name you want to bind has been maliciously bound by another user, you can verify the ownership of the domain name by adding a TXT record. In this way, the domain name can be forcibly bound to the correct bucket and its binding to the previous bucket is released.

7.Select the automatic or manual adding method based on your domain name.

If the domain name meets the following conditions, you can select the automatic adding method.

●The domain name is to be resolved by Alibaba Cloud DNS with this account. The system will automatically add the corresponding CNAME record in the Alibaba Cloud DNS.

  • ●This domain name has not been resolved in Alibaba Cloud DNS: The system will automatically add the corresponding CNAME record in the Alibaba Cloud DNS. However, you must change the domain name's DNS to Alibaba Cloud DNS.

    If the domain name has already been resolved in the Alibaba Cloud DNS of another account, you can only select the manual adding method.

    8.Click Finish to complete domain name binding.

    Verify domain name ownership

    1.Wait for the system to generate a TXT record based on your information.
    2.Log on to your DNS provider and add the corresponding TXT record.
    3.Click Verify on the console. If the system detects that the TXT record value for this domain name is as expected, the domain name ownership passes verification.

    Deploy a static website

    The process of deploying a static website is as follows:
    1. [Create a bucket](48547#Create a bucket)
    2. [Upload files to the bucket](48547#Upload files to the bucket)
    3. [Set your bucket to static website hosting mode](48547#Set your bucket to Static Website Hosting mode)

    Once you have completed the above operations, visitors will be able to access your site using a link in this format: http://oss-sample.oss-cn-hangzhou.aliyuncs.com/, where oss-sample is the name of your bucket, and oss-cn-hangzhou.aliyuncs.com is the domain name (Endpoint), which is comprised of your region + .aliyuncs.com

    Create a bucket

    You can use OSS buckets to store all of the content for your static website including images, scripts, and videos. Each file is an object that is stored in your storage space (bucket).

    Operation procedure
    1.Log on to the OSS Console.
    2.Click Create Bucket, and the Create Bucket dialog box appears.
    3.In the Bucket Name field, type the name of your bucket.

    Note:

    • The name of your bucket must meet the naming rules.
    • The name of your bucket must be unique among all the existing buckets on Alibaba Cloud OSS.
    • Once the bucket has been created, its name cannot be changed.

    4.In the Region field, select the region of your ECS. The region cannot be changed after subscription.

    Note: For more information on regions, refer to Endpoints and Regions
    .

    5.In the ACL field, select Public Read/Write.

    Note: For more information on visitor permissions, refer to Create a bucket.

    6.Click Submit. Bucket creation is complete.

    Upload files to your bucket

    You can upload any type of file to your bucket. Using the OSS console, you can only upload files smaller than 500 MB. If the file you want to upload is larger than 500 MB, refer to Upload files.

    Operation procedure
    1.Enter the OSS Console.
    2.Click the name of the target bucket to open the bucket management page.
    3.Click Object Management to open the object management page.
    4.Click Upload to open the Select File dialog box.
    5.Select one or multiple files to be uploaded and click Open. After the files are uploaded successfully, click Refresh to display the uploaded files.

    Create folders in your bucket

    Alibaba Cloud OSS does not has the term "folder". All elements are stored as objects. To use a folder on the OSS Console, you actually create an object with a size of 0 ending with a slash (/) used to sort the same type of files and process them in batches. By default, the OSS Console displays objects ending with a slash as folders. These objects can be uploaded and downloaded normally. On the OSS Console, you can use OSS folders like using folders in the Windows operating system.

    Notes:

    The OSS Console displays any object ending with a slash as a folder, whether or not it contains data. The folder can be downloaded only using an API or SDK. For more information on the creation and use of simulated folders, refer to:
    - API:31965">Get Bucket
    - SDK: Folder Simulation Functions in Java SDK-32013">Object

    Operation procedure
    1.Log on to theOSS Console.
    2.Click the name of the target bucket to open the bucket overview page.
    3.Click Object Management to open the object management page of the bucket.
    4.Click Create Folder to open the Create Folder dialog box.

    5.Enter the name of the folder to be created in the Folder Name textbox.

    Click Submit to save the created folder.

    Set your bucket to static website hosting mode

    You can use the console to convert your bucket configuration to static website hosting mode and access this static website through the bucket domain name.
    The OSS provides two functions to help users manage static websites hosted on the OSS more easily:

    ●Index Document Support
    The index document refers to the default index document (equivalent to index.html of the website) returned by the OSS when a user directly accesses the root domain name of the static website. If you have set static website hosting mode for a bucket, you have to specify an index document.
    ●Error Document Support
    The error document refers to the error page the OSS returns to a user if the HTTP 4XX error (the most typical error is 404 "NOT FOUNT") occurs when the user accesses the static website. By specifying the error page, you can provide your users with appropriate error prompts.

    For example: The user sets the index document support as index.html, the error document support as error.html, the bucket as oss-sample, and the endpoint as oss-cn-hangzhou.aliyuncs.com. Thus:
    When the user accesses http://oss-sample.oss-cn-hangzhou.aliyuncs.com/ and http://oss-sample.oss-cn-hangzhou.aliyuncs.com/directory/,
    This is the same as accessing http://oss-sample.oss-cn-hangzhou.aliyuncs.com/index.html
    When the user accesses http://oss-sample.oss-cn-hangzhou.aliyuncs.com/object, OSS will return http://oss-sample.oss-cn-hangzhou.aliyuncs.com/error.html if the object does not exist.
    For more details, refer to Static website hosting in the OSS Developer Guide.

    Operation procedure
    1.Log on to the OSS Console.
    2.Click the name of the target bucket to enter the bucket overview page.
    3.Click Bucket Properties > Website.

    4.Set Default webpage, which is the index page (equivalent to the website's index.html). Only HTML files that have been stored in the bucket can be used.
    5.Set 404 Error default webpage, which is the default 404 page returned when an incorrect path is accessed. Only HTML and image files that have been stored in the bucket can be used. If this field is left empty, the default 404 page is disabled.
    6.Click Set to save the static website setting.