Skip to main content
  1. Posts/

How to Host Static Websites With Amazon S3 and Cloudflare

·754 words·4 mins·
tutorial
selfhosted - This article is part of a series.
Part 3: This Article

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>

Create Bucket #

Click on services and then select S3 from storage section.

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>

Update bucket properties #

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

  • 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

Update Permissions>

Update Permissions #

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

{
    "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>

Deployment user #

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

Create Policy>

Create Policy #

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

  • Click Create policy
  • Select JSON tab
  • Paste following content and change your ARN
{
    "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.

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

Create User>

Create User #

On left menu select Users and click on Add user

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

  • Click on Create group

  • 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

  • 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>

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>

Configure DNS rules #

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

  • 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>

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

Select Edge certificates from tab

  • Always Use HTTPS set to On

Setting up page rules>

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>

Done #

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

Bonus>

Bonus #

To deploy website to AWS you can use minio-cli Minio with following script manually or you can use CI/CD

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. :)

Photo by Billy Huynh on Unsplash



selfhosted - This article is part of a series.
Part 3: This Article