#GroundUp: Hosting a Static Website on AWS using S3 and EC2

Welcome once again to the #GroundUp series. One thing you will be doing as you start on your journey in the cloud is to share your work for others to see and what better way to get that done than to have a static website (or portfolio) that can easily show your skills and learning.

In this post, we will be looking at how you can host your first site on S3 and EC2. Hosting a static website on AWS is cost-effective and scalable, making it an excellent choice for various use cases, such as personal portfolios, documentation, or small business websites.

Part 1: Setting Up S3 for Website Hosting

Step 1: Create an S3 Bucket

1. Log in to the AWS Management Console here
2. Navigate to the S3 service.
3. Click on the “Create bucket” button.
4. Enter a unique and meaningful name for your bucket.
5. Enable “Versioning” if desired, and click through the remaining settings.

Versioning ensures that you can keep multiple copies of your files as you make changes.

6. Click “Create bucket” to finish.

Step 2: Configure S3 for Website Hosting

1. Select your newly created bucket.
2. Click on the “Properties” tab, and then choose “Static website hosting”
3. Select the “Use this bucket to host a website” option.
4. Set the “Index document” and “Error document” to match your desired file names (e.g., index.html).
5. Save the changes.

Step 3: Configure S3 for Website Hosting

1. In the newly created bucket.
2. Click on the “Permissions” tab, and then scroll to Bucket policy.
3. Click on edit and paste the JSON code.

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

4. Make sure to change the “example-bucket” to your bucket name.

This policy is used for making objects in an S3 bucket publicly accessible, such as for hosting our static website content.

5. Save the changes.

Step 4: Upload Your Website Files

1. In the S3 bucket, click on the “Upload” button.
2. Add your website files, including HTML, CSS, JavaScript, images, videos, and any other assets you will need for your sites.
3. Once uploaded, your static website is ready to be served from S3.
4. Copy the URL of the created bucket from Step 2 and paste that in a new tab and you are good to go.

Part 2: Configuring EC2 to Serve the Website

Step 1: Launch an EC2 Instance

1. Navigate to the EC2 service in the AWS Management Console.
2. Click on “Instances” in the left-hand navigation pane.
3. Click the “Launch Instances” button.
4. Enter the Name of the instance
5. Choose an Amazon Machine Image (AMI) for your EC2 instance, in this case we will use the Amazon Linux.
6. For the instance type, select “t3.micro” (we’d work with that for our tutorial)
7. Under the “Network settings” tick the “Allow HTTP traffic from the internet” option
8. Maintain the remaining configurations in their default states.
9. Review your settings and click on “Launch the instance”.

Step 2: Connect to Your EC2 Instance

1. Once your EC2 instance is running, select it in the Instances list.
2. Click on the “Connect” button to get connection instructions.
3. Connect to your instance using the EC2 Instance Connect option.

There are other options including using the SSH client, EC2 Serial Console, or the Session Manager

Step 3: Install a Web Server (Apache)

1. Update your package manager (we are using Amazon Linux which is based off RedHat Linux):

# For Amazon Linux
sudo yum update -y

2. Install the Apache web server.

sudo yum install nginx -y

Step 4: Configure the Web Server

1. Change the directory into the root folder for the web server

cd /var/www/html

2. Clone or copy your files into the root folder (You may need to be the root user)

git clone <repository-url>

Alternatively
You can create a new file and add some content to the page

echo "This is my test webpage" > index.html

3. Restart your Apache (httpd) server

sudo service httpd restart

Step 5: Access Your Website

1. Open your web browser and navigate to your EC2 instance’s public IP address or domain. You can find the public IP Address in the window for the EC2 Instance connect
2. Your static website, hosted on S3 and served through EC2, should now be accessible.

Conclusion

Congratulations! You’ve successfully hosted a static website on AWS using S3 for storage and EC2 for serving the content. This setup is scalable, cost-effective, and provides reliable performance for your static web assets. Feel free to explore additional AWS features, as a challenge you can look at implementing a CloudFront Distribution to deliver your content.

I hope you enjoyed reading this post. You can check the other posts in this series here. See you in the next post.