Skip to main content

Host a static website

Last update:

In an S3 public bucket, you can:

  • host a static website for quick file access and lower storage costs;
  • configure an error page. If a user requests a non-existent object, the request will be processed according to your settings: another object will be returned, or a redirect to an external URL will occur.

Host a static website

Static websites consist of a set of files (HTML, JS, graphics, fonts) that can be stored as objects in a bucket. The website will be accessible via the bucket public domain or a custom domain, if one is added to the bucket.

There are two ways to host a website:

  • hosting — you specify the website's home page, which is stored as an object in a public bucket;
  • web listing — instead of displaying a home page, you enable the return of a list of objects in the bucket and define your own CSS styles.

Configure hosting

  1. In the bucket upload an object — an HTML file that will be the home page.
  2. In the control panel, on the top menu, click Products and select S3.
  3. Go to the Buckets section.
  4. Open the bucket page → Website tab.
  5. In the Website block, turn on the toggle.
  6. Open the Hosting tab.
  7. Enter the path to the object with the home page and the .html extension.
  8. Click Save.

Configure web listing

  1. If you want to store the CSS file in the bucket, upload it.

  2. In the control panel, on the top menu, click Products and select S3.

  3. Go to the Buckets section.

  4. Open the bucket page → Website tab.

  5. In the Website block, turn on the toggle.

  6. Open the Web Listing tab.

  7. Enter the path to the CSS file. The format of the path depends on where the file is stored:

    • in the bucket — enter the path to the object with CSS styles;
    • on a third-party resource — enter the URL of the CSS file.

  8. Click Save.

Configure an error page

If users access a non-existent object, an error will occur, which can be handled in two ways:

Return an object from the bucket

  1. In the control panel, on the top menu, click Products and select S3.
  2. Go to the Buckets section.
  3. Open the bucket page → Website tab.
  4. In the Error Page block, turn on the toggle.
  5. Optional: if you want the object to be returned with a 200 code, select it as the response code. By default, the request will return a 400 code.
  6. In the Resource field, enter the path to the object with the error page and the .html extension.
  7. Click Save.

Redirect the request

  1. In the control panel, on the top menu, click Products and select S3.
  2. Go to the Buckets section.
  3. Open the bucket page → Website tab.
  4. In the Error Page block, turn on the toggle.
  5. Select the 307 response code.
  6. In the Resource field, enter a valid external URL to which the request will be redirected if the requested object is missing.
  7. Click Save.

Object paths

When hosting a static website or configuring an error page, you will need to enter the object path in the bucket — either absolute or relative.

Absolute path

An absolute path always starts with a / character and follows the format /<prefix>/<object_name>, where:

  • <prefix> — prefix (path to the object) — if any;
  • <object_name> — name of the object with its extension.

If an absolute path is specified, the storage logic will always search for an object relative to the bucket root — at the address <uuid>.selstorage.ru/<bucket_name>. If there is a prefix in the request after the bucket name, it will be ignored.

If an incorrect path is specified, the object will not be returned.

note

For example, if the full object address is <uuid>.selstorage.ru/bucket/prefix/file.html, you specified /prefix/file.html as the path and the request is made at <uuid>.selstorage.ru/bucket/prefix/, the object will be returned.

Relative path

A relative path never starts with a / character and follows the format <prefix>/<object_name> or <object_name>, where:

  • <prefix>/ — optional: prefix (path to the object);
  • <object_name> — name of the object with its extension.

If a relative path is specified, the storage logic will search for the requested object while considering the prefix specified in the bucket request.

note

For example, if the full object address is <uuid>.selstorage.ru/bucket/prefix/file.html, you specified file.html as the path, and the request is made at <uuid>.selstorage.ru/bucket/prefix/, the object will be returned.

note

For example, if the full object address is <uuid>.selstorage.ru/bucket/prefix/file.html, you specify prefix/file.html as the path, and the request is made at <uuid>.selstorage.ru/bucket/prefix/, the object will not be returned because the storage logic will search for the object at the non-existent address <uuid>.selstorage.ru/bucket/prefix/prefix/file.html.