Object Storage - Hosting a static website in an Object Storage bucket

Objective

This guide explains how to create, configure and activate a static website hosted in an Object Storage bucket.

Requirements

• An Object Storage bucket with ACL public-read
• Your static resources (HTML, CSS, images, js, etc.)

Instructions

Step 1: Uploading website resources

In Object Storage, a bucket is a flat container of objects. It does not provide any hierarchical organization as the file system on your computer does. However, you can create a logical hierarchy by using object key names that imply a folder structure.

Example:

• index.html: Object is the root of the bucket.
• doc/page1.html: Object is in a subfolder.

Step 2: Setting the permissions

The bucket hosting the website and its contents must be publicly accessible i.e., with READ permission set for all users.

Example:

Using the predefined PUBLIC-READ ACL at the bucket level:

aws --profile <profile_name> s3api put-bucket-acl --bucket <bucket_name> --acl public-read

Applying the predefined PUBLIC-READ ACL on all the objects:

#!/bin/bash
declare -a output=($(aws --profile `<profile_name>` s3api list-objects-v2 --bucket `<bucket_name>` --query='Contents[].Key' | jq -r '.[]'))
for value in "${output[@]}"
do
    aws --profile `<profile_name>` s3api put-object-acl --bucket `<bucket_name>` --key "$value" --acl public-read
done

Step 3: Setting the website configuration for a bucket

To activate website hosting, upload a website configuration.

Example:

aws --profile `<profile_name>` s3 website s3://`<bucket_name>`/ --index-document index.html --error-document error.html

Or

aws --profile `<profile_name>` s3api put-bucket-website --bucket `<bucket_name>` --website-configuration file://website-conf.json

If you use the AWS low-level commands with website-conf.json:

{
    "IndexDocument": {
        "Suffix": "index.html"
    },
    "ErrorDocument": {
        "Key": "error.html"
    }
}

Step 4: Testing the endpoint

Once the website configuration has been successfully uploaded, you can test the endpoint in your web browser. The default endpoint will depend on the region of your bucket.

http://`<bucket_name>`.s3-website.`<region>`.io.cloud.ovh.net

Go further

Enable HTTPS on a static website using a custom fqdn

For training or technical assistance implementing our solutions, contact your sales representative or visit our Professional Services page to request a quote and have your project analysed by our experts.

Join our community of users.