# Configure a static website using S3 Bucket

## Prerequisite

* The project's wallet balance must be greater than 0 ([see how to top up a project's wallet](https://docs-epc.gitbook.io/ncs-documents/ncs-documents-en/nipa-cloud-space-overview/billing-and-wallet/topup-a-project-wallet)).
* A bucket must already be created ([see how to create a bucket](https://docs-epc.gitbook.io/ncs-documents/ncs-documents-en/storage/object-storage-s3/create-an-object-storage-bucket)).
* A bucket policy must be created to grant access permissions ([see how to create a bucket policy](https://docs-epc.gitbook.io/ncs-documents/ncs-documents-en/storage/object-storage-s3/create-bucket-policy)).

## Instructions

### 1. **Upload Files for the Static Website**

Upload your files to the S3 bucket. In this example, we will use the root path.

```
s3cmd put ${OBJECT} s3://${BUCKET_ENDPOINT}/${PATH_TO_FILE} --acl-public
```

**example command:**

```
s3cmd put index.html s3://test-static-website/ --acl-public
```

{% hint style="info" %}
Note: The --acl-public flag grants "Everyone" read-only access to the file.
{% endhint %}

Run the s3cmd ls command to check that the files have been uploaded.

```
s3cmd ls s3://${BUCKET_ENDPOINT}/${PATH_TO_FILE}
```

**example command:**

```
s3cmd ls s3://test-static-website/
```

**example result:**

```
2024-07-24 05:28 139 s3://test-static-website/index.html
```

### 2.  **Configure Static Website Hosting**

Go to the **NIPA Cloud Portal > Object Storage > Buckets**.

For your bucket, go to **Action > Enable Static Website Hosting**.

<figure><img src="https://content.gitbook.com/content/4csDFrNQz0Q4tDnx3xyT/blobs/ROOelTnuBELH6nJie7eG/image.png" alt=""><figcaption></figcaption></figure>

Configure the **Index Document** (Required) and **Error Document** (Optional).

* **Index Document:** The path to your index.html file. In this case, index.html (at the root).
* **Error Document:** The path to your error.html file. In this case, error.html (at the root).

<figure><img src="https://content.gitbook.com/content/4csDFrNQz0Q4tDnx3xyT/blobs/f05yTUyLcZRim6jnnBUM/image.png" alt="" width="375"><figcaption></figcaption></figure>

Once configured, click **Confirm**. A window will appear. **Copy the Website Endpoint URL.**

<figure><img src="https://content.gitbook.com/content/4csDFrNQz0Q4tDnx3xyT/blobs/Ltrgn0arzcD1Sr2y5yjf/image.png" alt="" width="375"><figcaption></figcaption></figure>

Try accessing the URL you copied from the Website Endpoint.

**example result:**

<figure><img src="https://content.gitbook.com/content/4csDFrNQz0Q4tDnx3xyT/blobs/7f989niXmqsZlG0Gy00P/image.png" alt="" width="333"><figcaption></figcaption></figure>

## **Using a Custom Domain with a CNAME Map**&#x20;

After hosting your website on the object storage bucket, you can map your custom domain to the bucket's Target domain using a CNAME record.

<figure><img src="https://content.gitbook.com/content/4csDFrNQz0Q4tDnx3xyT/blobs/H5nWClkse6ZpSTcYEvts/image.png" alt=""><figcaption></figcaption></figure>

When you test the access via your custom domain, you will find that it works and is secured with HTTPS. This is because the NIPA Cloud proxy system automatically generates an SSL certificate for the bucket.

<figure><img src="https://content.gitbook.com/content/4csDFrNQz0Q4tDnx3xyT/blobs/WJF5nnXbkYI7SDDqelq3/image.png" alt=""><figcaption></figcaption></figure>

## Troubleshooting

### Error 404 Not found

* **Cause:** The Index Document cannot find the index.html file or its dependency files.
* **Solution:** Check if the file paths you uploaded via Cyberduck or the s3cmd CLI are correct.

<figure><img src="https://content.gitbook.com/content/4csDFrNQz0Q4tDnx3xyT/blobs/8vTOzcRo9pYGlXNvLSoj/image.png" alt="" width="375"><figcaption></figcaption></figure>

### Error 403  Access denied

* **Cause:** The public read permission is missing, preventing files from being accessed.
* **Solution:** Check the file permissions. Right-click the file > **Info > Permissions**. "Everyone" must be set to **READ**. If it is not, re-upload the file using the s3cmd CLI with the --acl-public flag and check again.

<figure><img src="https://content.gitbook.com/content/4csDFrNQz0Q4tDnx3xyT/blobs/31OW0iEj2aC5WSInI6SY/image.png" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/4csDFrNQz0Q4tDnx3xyT/blobs/3OfEuv4nsE4YQBXJkopL/image.png" alt="" width="375"><figcaption></figcaption></figure>

### **CSS/JS File Content-Type is text/plain**

* **Cause:** The MIME type was not detected during the upload via the s3cmd CLI.
* **Solution:** If you find that the Content-Type does not match the file type (e.g., application/javascript is being served as text/plain), add the following flags to your s3cmd put command: --guess-mime-type --no-mime-magic.

<figure><img src="https://content.gitbook.com/content/4csDFrNQz0Q4tDnx3xyT/blobs/G5Kfogv5KvoYeEfTJxds/image.png" alt="" width="375"><figcaption></figcaption></figure>