4. Static S3 Website
Tags: aws
Published: 2020-12-31 15:25:02

After creating the HTML and CSS files, I created the `static` website, hosted on [AWS S3](https://aws.amazon.com/s3/). Static sites do not need to be served by a web server. You don't need the infrastructure that is otherwise required to host a web framework. Let's take a look.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8374m2ehoe66bq0153g7.gif)

#[Prerequisites](https://aws.amazon.com/s3/)
[AWS profile set up](https://aws.amazon.com/getting-started/)
[index.html](https://github.com/jicoing/git-komlalebu/blob/master/index.html)
[error.html](https://github.com/jicoing/git-komlalebu/blob/master/error.html)
[styles.css](https://github.com/jicoing/git-komlalebu/blob/master/styles.css)

I have named the files `index.html`, `styles.css` as per naming conventions. You don't need the CSS file to make it work, however it has all the styling information. `Error.html` is returned when an error occurs. Here is a sample `HTML` file content. 

                  <!DOCTYPE html>
                  <html>
                  <body>
                  Hello World!
                  </body>
                  </html>
#[Create a bucket](https://docs.aws.amazon.com/AmazonS3/latest/dev/UsingBucket.html)

I created a bucket from the S3 console on AWS and called it `blog.komlalebu.com`, ignoring all the settings.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fuomz31x15slrsqk4qpk.PNG)

Once inside the bucket, I clicked on the `properties` tab for the bucket.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ev4kish8b0aftftu54ap.PNG)

Then I clicked on edit, in the static website hosting card.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/666be0rnrwba2a54dse9.PNG)

Then I `enabled` static website hosting, and set Host a static website as the `Hosting type`. I also mentioned the names of my `Index` document and `Error` document, within the bucket.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w53qu3eyjh8x6dmfngvy.PNG)

Once it was turned on I got back the endpoint from the S3 bucket. This the static website URL: http://blog.komlalebu.com.s3-website-us-east-1.amazonaws.com

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f8wd8nerdja1gpm1sdz5.PNG)

#[Upload the documents](https://docs.aws.amazon.com/AmazonS3/latest/user-guide/upload-objects.html)

Once the bucked was created I uploaded the files (index.html, error.html, styles.css) to the bucket

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e544yffynr6m50ytvns3.PNG)


#[Edit the bucket permissions](https://docs.aws.amazon.com/AmazonS3/latest/dev/example-bucket-policies.html)

I modified the bucket permissions to allow everyone to getObject's from the bucket. As basic policy could look like the below. Just make sure to update the "Resource" to be the name of your S3 bucket. This may not be the most `secure` way to do it.

                      {
                        "Version": "2012-10-17",
                         "Id": "Policy1604391079488",
                          "Statement": [
                          {
                          "Sid": "Stmt1604391073964",
                           "Effect": "Allow",
                           "Principal": "*",
                          "Action": "s3:GetObject",
                      "Resource": 
                      "arn:aws:s3:::blog.komlalebu.com/*"
                          }
                          ]
                        }


And it was done. However there are other ways of doing it using AWS CLI.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0vobgcej8t0ytnl5d9l4.gif)