Mumen Tayyem
Blogs

Host your static website on AWS S3

What is Amazon S3?

Amazon Simple Storage Service (Amazon S3) is like a super reliable and secure storage space on the internet. It's designed for storing all kinds of information, whether you're running a website, using mobile apps, or managing data for your business. Think of it as a virtual warehouse where you can keep your data safe and easily access it whenever you need. It's versatile enough for various uses like storing pictures, running websites, keeping backups, or handling big data projects. Plus, it comes with handy tools that help you organize and control who gets to see and use your stored information based on your specific needs.

Steps:

  1. Prepare your index.html file.
  2. Create a new S3 Bucket and make sure to untick the Block all public access checkbox.
  3. Navigate to the newly created bucket and select the Properties tab.
  4. Scroll down to the bottom of the page where you can find Static website hosting and click Edit.
  5. Choose the Enable radio button.
  6. Choose the Host a static website radio button.
  7. for the Index document, type in your index file name, in our case it's index.html.
  8. Save changes.
  9. Go back to the Objects tab.
  10. Click on Upload and select your index file.
  11. Now, we need a Bucket policy for our bucket to allow public access. Navigate to the Permissions tab and scroll down to Bucket policy and click on Edit.

  12. Copy and paste the below policy in the editor and make the needed changes:

    {
    "Version": "2012-10-17",
    "Statement": [
    {
    "Sid": "PulbicReadGetObject",
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::{change-this-to-your-bucket-name}/*"
    }
    ]
    }

    Notes:

    • Sid (Statement ID): This is just an optional identifier that you provide for the policy statement.
    • Effect: Values here are only Allow or Deny.
    • Principal: A human user or workload that can make a request for an action or operation on an AWS resource. In out case it's * for public access.
    • Action: This describes the specific action or actions that will be allowed or denied.
    • Resource: This specifies the object or objects that the statement covers.
  13. Save changes.
  14. Navigate to the Properties again and scroll down to the bottom until you find Static website hosting.
  15. In that section, you will find a link similar to this http://{your-bucket-name}.s3-website.me-central-1.amazonaws.com.
  16. Click on it and you will be redirected to your static website!

Important:

Amazon S3 can host static sites only.

A static site refers to a type of website that is made up of fixed, unchanging files. The content and layout of a static site are typically written in HTML, CSS, and sometimes JavaScript, and these files remain the same for every user who visits the site. Unlike dynamic websites that generate content on the fly, static sites do not change based on user interactions or inputs. In a static site, each page is pre-built and exists as a separate file. When a user requests a page, the server simply sends that specific file to the user's browser. This simplicity can result in faster loading times and efficient performance, as there's no need for server-side processing or database queries for every page request. However, static sites may have limitations when it comes to interactive features or content that frequently changes. They are well-suited for websites with straightforward content and where frequent updates or user interactions are not essential. Common use cases for static sites include portfolios, blogs, informational sites, or landing pages.