In this practice, users can host a static website on Tencent Cloud object storage (Cloud Object Storage, COS). Visitors can access the hosted static website through the static website domain provided by COS or a bound custom domain (for example, www.example.com). Whether you want to host an existing static website on COS or build one from scratch, this practice can help you host a static website on COS. Here are the specific steps:
Note:
For buckets created after January 1, 2024, when users use the default domain name (including the static website domain) to access files, preview is not supported. For details, please see COS Bucket Domain Usage Security Management Notification. It is recommended that you enable the static website and configure a custom domain name (set the type of the origin server to static website), and then use the custom domain name to access.
Use COS default domain to access. No static website effect.
Prerequisites
The following services will be used in the steps outlined below:
After completing domain registration, you need to perform the following tasks in the COS console to create and configure website content:
1. Create a Bucket
Please log in to the COS Console with your Tencent Cloud account and create a bucket for your website. This bucket can be used to store website content and data.
If you are using COS for the first time, you can create a bucket directly by clicking Create Bucket on the Overview interface of the console or click Bucket List on the left sidebar to create one. For details, see Create Bucket documentation.
2. Configure Bucket and Upload Content
1. Enable the static website settings of the bucket. The steps are as follows. For detailed directions, please see set up static website.
1.1 Log in to the COS Console, click in the left menu bar on Bucket List, find the bucket just created, and click on the right on Configuration.
1.2 Select Basic Configurations > Static Website in the left menu bar, click Edit, set the current status to Enable, set the index document to index.html, do not configure the rest for now, and then click Save.
2. Upload your website contents to the bucket. For detailed directions, see Uploading Objects.
You can use the bucket to store any content you want to host, including text files, photos, and videos. If you haven't built your website yet, just create a file as described in this document.
For example, you can create a file with the following HTML code and upload it to the bucket. The filename of the website homepage is usually index.html. In subsequent steps, you will need to provide this file as an index document for your website.
<!DOCTYPE html>
<html>
<head>
<title>Hello COS!</title>
<meta charset="utf-8">
</head>
<body>
<p>Welcome to the static website feature of COS.</p>
<p>This is the homepage!</p>
</body>
</html>
Note:
After the COS static website feature is enabled, if a user accesses any first-level directory that does not point to any files, COS will first match index.html in the bucket directory and then index.htm by default. If this file does not exist, a 404 error will be returned.
Step 3: Binding Custom Domains
1. Add a Domain Name
1. Log in to the COS Console, go to the Bucket List page on the left sidebar, and click the bucket that hosts your website.
2. In the left menu bar, click Domain and Transfer > Custom Endpoint to enter the custom origin server domain name management page.
3. In the "Custom Endpoint" column, click Add Domain. The main configuration items are described as follows.
Domain Name: Enter your purchased custom domain name (for example, www.example.com). For more information, please see Enable Custom Origin Site Domain.
Origin Server Type: Select Static Website Endpoint.
4. Click Create. Once configured, wait a few minutes and wait for the domain name deployment to complete. Then copy the corresponding CNAME record and proceed with the domain name resolution procedure.
2. Domain Name Resolution
You need to add a CNAME record for your custom domain name at your service provider and point it to the corresponding CNAME record in the above domain addition steps. For more information about configuring domain name resolution, please refer to Appendix: Configuring Domain Name Resolution.
Step 4: Verify the result
After completing the above steps, verify the result by entering the domain name, e.g. www.example.com, in your browser:
http://www.example.com: Returns the index page (index.html) in the bucket named example.
http://www.example.com/folder/: Returns the index page (folder/index.html) under the folder directory in the bucket named example.
http://www.example.com/test.html (a non-existing file): returns 404 error. If you want to customize the error document, you can do so in step 2 when configuring the static website, so that when an access attempt is made to a non-existing file, this error document will be displayed.
Note：
In some cases, you may have to clear your browser's cache to see the expected result.
For each bucket, you can configure only one error document, which can be placed in a sub-directory, such as pages/404.html.
