Setting Up a Static Website with Amazon S3

Today we'll explore how to host a static website using Amazon S3. Static websites are composed of HTML, CSS and JavaScript files that do not require server-side processing. Amazon S3 provides a reliable and cost-effective way to host these websites with high availability and scalability. In this tutorial we'll walk through the process of setting up a static website on Amazon S3 including configuring bucket policies and custom domains.

What is a Static Website?

A static website consists of fixed content delivered to the user's web browser exactly as stored. This type of website is suitable for personal blogs, portfolios, documentation and simple informational sites. Static websites can be hosted on Amazon S3, leveraging its scalability, reliability and low cost.

Benefits of Hosting a Static Website on Amazon S3

Scalability :- S3 automatically scales to handle any number of requests.
Cost-Effectiveness :- Pay only for the storage and bandwidth you use.
High Availability :- Built-in redundancy ensures your website is always accessible.
Security :- Fine-grained access controls and SSL support.

Step-by-Step Guide to Hosting a Static Website on Amazon S3

Prerequisites

Before we begin ensure you have the following :-

An AWS account.
A custom domain (optional but recommended).

Step 1 :- Create an S3 Bucket

Log in to the AWS Management Console.
Navigate to the S3 Dashboard :-
- Search for "S3" in the AWS services search bar and select "S3".
Create a Bucket :-
- Click the "Create bucket" button.
- Bucket Name :- Enter a unique name for your bucket (e.g. my-website-bucket ). The name must be globally unique.
- Region :- Choose the AWS Region where you want to create the bucket.
- Block all public access :- Uncheck this option as our website needs to be public.
- Bucket Settings :- Leave other settings at their defaults.
- Click "Create bucket".

Step 2 :- Enable Static Website Hosting

Navigate to your bucket by clicking on its name in the S3 Dashboard.
Enable Static Website Hosting :-
- Click on the "Properties" tab.
- Scroll down to "Static website hosting" and click "Edit".
- Select "Enable".
- Index document :- Enter index.html .
- Error document :- Enter error.html (optional).
- Click "Save changes".

Step 3 :- Upload Website Files

Prepare Your Website Files :- Ensure you have your index.html , error.html and any other static files ready.
Upload Files to Your Bucket :-
- Click the "Upload" button in the S3 Dashboard.
- Add your index.html , error.html and any other files.
- Click "Upload".

Step 4 :- Configure Bucket Policy for Public Access

To make your website publicly accessible you need to configure the bucket policy.

Navigate to the "Permissions" tab of your bucket.
Edit the Bucket Policy :-
- Click "Bucket policy".
- Add the following policy to allow public read access :-

    {
      "Version": "2012-10-17",
      "Statement": [
        {
          "Effect": "Allow",
          "Principal": "*",
          "Action": "s3:GetObject",
          "Resource": "arn:aws:s3:::my-website-bucket/*"
        }
      ]
    }

Replace my-website-bucket with your actual bucket name.
Click "Save".

Step 5 :- Access Your Static Website

Get the Website Endpoint :-
- Navigate to the "Properties" tab.
- Copy the "Bucket website endpoint" URL.
Open the URL in your web browser to view your static website.

Custom Domain Configuration (Optional)

To use a custom domain for your static website you need to configure Route 53 or another DNS provider.

Step 1 :- Register a Domain (if you don’t have one)

Log in to the AWS Management Console.
Navigate to Route 53 :-
- Search for "Route 53" in the AWS services search bar and select "Route 53".
Register a Domain :-
- Click on "Register domain".
- Enter the desired domain name and follow the registration process.

Step 2 :- Configure Route 53

Create a Hosted Zone :-
- In Route 53 click on "Hosted zones".
- Click "Create hosted zone".
- Domain Name :- Enter your domain name.
- Type :- Public hosted zone.
- Click "Create hosted zone".
Add an S3 Website Endpoint Alias :-
- In the hosted zone click "Create record".
- Select "A – IPv4 address".
- Select "Alias to S3 website endpoint".
- Alias Target :- Choose your S3 bucket website endpoint from the dropdown list.
- Click "Create records".

Step 3 :- Update DNS Settings (if using another DNS provider)

Log in to your DNS provider’s management console.
Add a CNAME Record :-
- Name :- Enter the subdomain (e.g. www ).
- Value :- Enter the S3 bucket website endpoint.
- Save the changes.

Step 4 :- Test Your Custom Domain

Open your web browser.
Enter your custom domain (e.g. yourdomain.com ).
Verify that your static website is accessible.

Best Practices for Hosting Static Websites on S3

Optimize Your Content

Compress Files :- Use gzip or Brotli compression to reduce file sizes and improve load times.
Minify CSS and JavaScript :- Remove unnecessary whitespace and comments from your CSS and JavaScript files.
Use a Content Delivery Network (CDN) :- Integrate Amazon CloudFront to distribute your content globally and reduce latency.

Secure Your Website

Enable HTTPS :- Use Amazon CloudFront with an SSL/TLS certificate to enable HTTPS for your website.
Set Proper Permissions :- Ensure that your bucket policy grants the minimum necessary permissions.
Monitor Access Logs :- Enable S3 server access logging or CloudTrail to monitor access to your bucket.

Versioning and Backups

Enable Versioning :- Enable versioning in your S3 bucket to keep multiple versions of your website files.
Automate Backups :- Use AWS Backup or a custom script to regularly back up your website files.

Real-World Example :- Hosting a Portfolio Website

Suppose you want to host a personal portfolio website using Amazon S3. Here’s a step-by-step example :-

Step 1 :- Create and Configure the S3 Bucket

Log in to the AWS Management Console.
Navigate to the S3 Dashboard.
Create a Bucket :-
- Bucket Name :- my-portfolio-bucket
- Region :- Choose a region.
- Block all public access :- Uncheck.
- Create the bucket.
Enable Static Website Hosting :-
- Properties > Static website hosting > Enable.
- Index document :- index.html .
- Error document :- error.html.

Step 2 :- Upload Portfolio Files

Prepare Your Files :- Ensure you have index.html, about.html, contact.html and any other necessary files.
Upload Files :-
- Navigate to your bucket.
- Click "Upload".
- Add all your website files and upload them.

Step 3 :- Configure Bucket Policy

Permissions > Bucket policy :-

 {
   "Version": "2012-10-17",
   "Statement": [
     {
       "Effect": "Allow",
       "Principal": "*",
       "Action": "s3:GetObject",
       "Resource": "arn:aws:s3:::my-portfolio-bucket/*"
     }
   ]
 }

Save the policy.

Step 4 :- Access Your Portfolio Website

Get the website endpoint from the bucket properties.
Open the endpoint URL in your web browser to view your portfolio.

Step 5 :- Configure a Custom Domain (Optional)

Register a domain (e.g. myportfolio.com ).
Configure Route 53 :-
- Create a hosted zone.
- Add an alias record pointing to the S3 website endpoint.
Update DNS settings if using another DNS provider.

Conclusion

Hosting a static website on Amazon S3 is a straightforward and cost-effective solution for delivering content to users. In this tutorial we covered the steps to set up a static website on S3 including creating and configuring buckets, uploading files, setting bucket policies and configuring custom domains. By following best practices for content optimization and security you can ensure your website is fast, secure and reliable.