Host a static website on Alibaba Cloud Object Storage Service (OSS)

When planning for a website project, people usually talk about using a CMS (Content Management System). Think again as chances are you don’t really need a full-fledged CMS to run your website. A lightweight, high performance static site generator may be a good candidate to publish your content especially when you do not need to provide customized content or collect user input. However, if you wish to implement those features on your static site you can still do it with plugins.

In addition to selecting a content management tool, you also have to plan the website hosting. There are different ways to deploy your website to the Internet. You could go the traditional way to subscribe to a web hosting service. Alternatively, you could use a cloud storage service to run your website.

This tutorial will show you how to use Alibaba Cloud Object Storage Service (OSS) to host your static website. First we will have a quick overview of OSS and some key concepts. Second we will go through a step-by-step guide to publish your website using OSS.

An overview of OSS

OSS is a storage service that enables you to store, back up, and archive any amount of data in the cloud. It can be frequently accessed data or “cold” data which does not need to be accessed frequently. Like other cloud services, the benefits of OSS are cost effectiveness, high security and reliability and pay-as-you-go. Transferring data to and from OSS can be done by API or SDK interfaces.

For those who are more familiar with AWS, OSS is equivalent to S3. AliCloud provides a full list mapping its services to those of AWS.

Key concepts

  • Object: these are files that you store in OSS. They are image, audio, and video files for apps and websites. They may also be infrequently accessed data that you want to archive.

  • Bucket: this is a container for objects. Every object is contained in a bucket. Think of a bucket as a top-level folder in your file structure. It will contains other sub-folders and files.

  • Region: this is the geographical area where the data center resides. Please note that different regions may charge different prices for the same service.

  • Endpoint: this is the generated domain name that OSS assigns to your bucket. You can change it to your custom domain name later.

Activate OSS

Log in to Alibaba Cloud (AliCloud) Console, you will find Object Storage Service on the left menu.If this is the first time you use OSS, it will ask you to activate the service. Click on the checkbox to agree with the agreement and enable the service.

Publish your website to OSS

Step 1: Create a bucket

Click on the “+” icon to create a new bucket

create

Name the bucket and select a region for your bucket. There are 3 storage classes for an OSS bucket:

  • Standard: high reliability and availability for frequent access files

  • Infrequent Access (IA): long-term storage, infrequent access, lower storage price

  • Archive: long-term storage, very infrequent access, lowest storage price

As this is a public website, I am gonna set “Public Read” for the Access Control List.

Step 2: Upload files to the bucket

Creating folders and uploading files are pretty straight-forward. Just click on the buttons on the UI.

Step 3: View the website

After you have finished uploading all files of your website to your bucket, click on the “Overview” tab to view the URL.

However, you may not see the website when you navigate to that URL. Instead you may see an “Access denied” message. This is because you haven’t set the default homepage for the website. You can do it by clicking on the “Basic Settings” tab and scroll down to the “Static Pages” section.

Now go back to your website URL you will see the homepage.

Map a custom domain name to an OSS bucket

Automatically, OSS assigns a domain name to your bucket in the following format:

[bucket name].[endpoint]

where the endpoint is oss-[region-id].aliyuncs.com

If you have your own domain name you can map it in the “Domain Names” tab

After filling in the custom domain name, you can choose to switch on the CDN service.

That’s everything you have to setup on the OSS side. On the Domain Name System (DNS) setting of the custom domain name, you have to add a CNAME record to map it to the bucket domain name (which is [bucket name].[endpoint]). If you do not know how to do it, please contact the service provider where you buy the domain name.

Later on, if you want to unlink that custom domain name from your bucket, click on “Binding configuration” and then “Unbind”.

unbind

3 Likes