🚢 How to Host Static Websites With Amazon S3 and Cloudflare ☁
Published: 2021-03-08 21:08:33

Hi! I moved my website to s3 + cloudflare for SSL certificate. Do you want to know how? I will show you:

First you will need to create new storage so Login to your AWS console as admin.

## Create Bucket

Click on services and then select **S3** from storage section.

![](https://www.themaymeow.com/img/2021-03-08-19-59-51.png)

On page click on Create Bucket in right corner and:

* Change Bucket name in my case `www.themaymeow.com`
* Choose AWS Region
* Uncheck **Block all public access**
* Keep other unchanged
* Click **Create Bucket**

## Update bucket properties

You will see bucket lists so select you bucket and from bucket page select **Properties tab**

![](https://www.themaymeow.com/img/2021-03-08-20-04-19.png)

* From Bucket overview copy somewhere **Amazon Resource Name** ARN. you will need it later
* Scroll down to **Static Website hosting** Click Edit
* Set "Static website Hosting" to enabled
* Hosting Type is "Host static website"
* Indes documment set to `index.html`
* Other things keep unchaged
* Scroll down and clik on **Save Changes**
* Copy somewhere your **Bucket website endpoint**

![](https://www.themaymeow.com/img/2021-03-08-20-08-27.png)

## Update Permissions

Select second tab **Permissions** scroll down to **Bucket Policy** click Edit and paste following policy.

``` json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Public",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "<change-me-to-youw-ARN>/*"
        }
    ]
}
```

* Update your ARN you have copied
* Click Save cnages

Thats all for bucket configuration. Now you will need to create user who will be allowd to write content to you bucket.

## Deployment user

So search for Identity and Access management **IAM** and open it.

![](https://www.themaymeow.com/img/2021-03-08-20-14-17.png)

## Create Policy

First you will need to create policy. Find **Policies** in left menu and open it.

![](https://www.themaymeow.com/img/2021-03-08-20-22-30.png)

* Click **Create policy**
* Select **JSON** tab 
* Paste following content and change your ARN

``` json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListAllMyBuckets"
            ],
            "Resource": "arn:aws:s3:::*"
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket",
                "s3:GetBucketLocation"
            ],
            "Resource": "<change-me-to-youw-ARN>"
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:DeleteObject"
            ],
            "Resource": "<change-me-to-youw-ARN>/*"
        }
    ]
}
```

Important thing you will see `"Resource": "<change-me-to-youw-ARN>"` and `"Resource": "<change-me-to-youw-ARN>/*"` this is correct do not remove the `/*` on second one.

![](https://www.themaymeow.com/img/2021-03-08-20-20-22.png)

* Click **Next Tags**
* Click **Next Review policy**
* Update name
* Click **Create Policy**

![](https://www.themaymeow.com/img/2021-03-08-20-21-30.png)

## Create User

On left menu select Users and click on **Add user**

* Change Name
* Access type select **Programatic Access**
* Click **Next: permissions**

![](https://www.themaymeow.com/img/2021-03-08-20-25-07.png)

* Click on **Create group**

![](https://www.themaymeow.com/img/2021-03-08-20-26-17.png)

* Change Group name
* Select policy you created. you can use search or filter to show only users created policies
* Click **Create gourp**
* Click **Next Tags**
* Click **Next Review**
* Click **Create User**

![](https://www.themaymeow.com/img/2021-03-08-20-29-30.png)

* Copy **Access key ID** and **Secret access key** to some place (you will need it)
* Click close

OK Thats All for settings on AWS. Next step is to configure our domain in Cloudflare

# Add Domain to cloudflare

Login to cloudflare and click to **+ Add a site**

* Enter your site 
* Click add site
* Select Cloudflare Free
* If you have dns records cloudflare will try to collect them
* Login to your privder and update your nameservers
* Cloudflare now try to verify you domain. (you can wait on page or you can close clodflare for now). Tehy will notify you.

## Configure DNS rules

Ok if you are back you have configured domain name. So click on it and select 3rd tab **DNS**

![](https://www.themaymeow.com/img/2021-03-08-20-55-53.png)

* Create rule type CNAME
* name set to `www`
* target set to your AWS website endpoint without `https://`
* Proxy status set to proxy

Create second rule

* Set type to CNAME
* name set to `@`
* target set to `www.yourdomain.tld`
* Proxy status set to enable

## Configure SSL/tls

Select 4th tab **SSL/TLS**

* Your ssl/tls encryption mode set to Flexibile because because we using certificates from AWS and not self signed ones

![](https://www.themaymeow.com/img/2021-03-08-21-01-04.png)

Select **Edge certificates** from tab

![](https://www.themaymeow.com/img/2021-03-08-21-02-05.png)
 
* Always Use HTTPS set to **On**

![](https://www.themaymeow.com/img/2021-03-08-21-03-15.png)

## Setting up page rules

Next and last thing is to redirect our naked domain `domain.tld` to `www.domain.tld`.

So select 10th tab **Page Rules**

* Click **Create page rule**
* Set If the rule matches `yourdomain.tld/*`
* Then The setings select **Forwarding Url**
* Next fiels select **301 Permanent redirect**
* Set the desitnation url `https://www.yourdomain.tld/$1`
* Click save and deploy.

# Done

Sot that all for prepare AWS + Cloudflare to your static website.

## Bonus

To deploy website to AWS you can use **minio-cli** [Minio](https://min.io) with following script manually or you can use CI/CD

``` bash
mc config host add cdn https://s3.amazonaws.com <access-id> <secret-access-key> --api s3v4
mc cp -r paath/to/website/files cdn/bucket-name
```

Now just navigate to your new website and enjoy. :)

Originally posted on [themaymeow.com](https://www.themaymeow.com)

<span>Photo by <a href="https://unsplash.com/@billy_huy?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Billy Huynh</a> on <a href="https://unsplash.com/s/photos/cloud?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>