---
title: "Host a static website"
sidebar_label: "Host a static website"
description: "How to host a static website in a bucket and configure an error page"
sidebar_position: 8
---

import Formbricks from '@theme/MDXComponents/Formbricks'

# Host a static website

In an S3 public bucket, you can:

* [host a static website](#configure-website) for quick file access and lower storage costs;
* [configure an error page](#configure-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 \{#configure-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](/s3/manage/domains.mdx#bucket-public-domain) or a [custom domain](/s3/manage/domains.mdx#user-domain), if one is added to the bucket.

There are two ways to host a website:

* [hosting](#configure-hosting) — you specify the website's home page, which is stored as an object in a public bucket;
* [web listing](#configure-weblisting) — 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 \{#configure-hosting}

1. In the bucket [upload an object](/s3/objects/upload-object.mdx) — an HTML file that will be the home page.
2. In the [control panel](https://my.selectel.ru/storage/), 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](#path-to-object) with the home page and the `.html` extension.
8. Click **Save**.

### Configure web listing \{#configure-weblisting}

1. If you want to store the CSS file in the bucket, [upload it](/s3/objects/upload-object.mdx).
2. In the [control panel](https://my.selectel.ru/storage/), 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](#path-to-object) with CSS styles;
   * on a third-party resource — enter the URL of the CSS file.
8. Click **Save**.

## Configure an error page \{#configure-error-page}

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

* [return another object from the bucket](#return-object);
* [redirect the request to an external URL](#redirect).

### Return an object from the bucket \{#return-object}

1. In the [control panel](https://my.selectel.ru/storage/), 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](#path-to-object) with the error page and the `.html` extension.
7. Click **Save**.

### Redirect the request \{#redirect}

1. In the [control panel](https://my.selectel.ru/storage/), 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 \{#path-to-object}

When [hosting a static website](#configure-website) or [configuring an error page](#configure-error-page), you will need to enter the object path in the bucket — either absolute or relative.

### Absolute path \{#absolute-path}

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

* `<prefix>` — [prefix](/s3/objects/manage-folder.mdx) (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 \{#relative-path}

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

* `<prefix>/` — optional: [prefix](/s3/objects/manage-folder.mdx) (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`.

:::

<Formbricks />