IIn 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.
Preparations
The following are related services that may be used during the practice:
Domain Registration (optional): Before hosting a static website, you need to have a domain name, such as www.example.com. You can apply for a domain name through Tencent Cloud Domain Registration. If you are using the static website domain provided by COS, you do not need this service.
COS: You need to create a bucket in COS for storing the uploaded webpage contents.
DNSPod: Utilize DNS resolution to achieve the purpose of accessing static websites using custom domain names.
Note
All steps in this guide use www.example.com as an example domain. In actual operations, please replace this domain with your own domain name.
Step 1. Register a domain name and obtain ICP filing (optional)
Domain registration is a prerequisite for any service built on the Internet. After the domain name is registered, it needs to go through the MIIT filing procedure before your website can be accessed.
If you have already registered a domain name and obtained ICP filing for it, skip this step and proceed to step 2.
If you have already registered a domain name but have not obtained ICP filing for it, please apply for ICP filing.
After completing the domain name registration and filing, you need to perform the following tasks in the COS Console to create and configure the website content:
1. Creating Bucket
Please log in to the COS Console with your Tencent Cloud account and create a bucket for your website. The bucket is used to store data, so you can store your website contents in it.
If you are using COS for the first time, you can create a bucket directly by clicking Create Bucket on the overview page of the console, or by clicking the Bucket List navigation bar on the left side. For detailed instructions, please refer to the Create Bucket documentation.
2. Configure the bucket and upload content
1. To enable the Static Website setting for a bucket, follow these steps:
1.1 Log in to the COS Console. In the left sidebar, click Bucket List. Locate the bucket you just created and click Configuration Management on the right.
1.2 In the left sidebar, select Basic Configuration > Static Website, click Edit, set the current status to Enabled, the index document to index.html, leave the rest unconfigured, 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. Bind a custom domain name
1. Adding a Domain
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 storage bucket named example.
http://www.example.com/folder/ —— Returns the index page (folder/index.html) in the folder directory of the storage bucket named example.
http://www.example.com/test.html (non-existent file) —— returns a 404 error. If you need to customize the error document, you can add the Error Document setting in Step 2 Configure Static Website. When accessing a non-existent file, the specified 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.
