Sarvar Nadaf for AWS Community Builders

Posted on Feb 20

💻 Step-by-Step: Hosting a Static Website on AWS EC2 🌟

#aws #beginners #learning #cloud

👋 Hey there! I’m Sarvar, a Cloud Architect passionate about cutting-edge technologies. With years of experience in Cloud Operations (Azure and AWS), Data Operations, Data Analytics, DevOps, and GenAI I've had the privilege of working with clients around the globe, delivering top-notch results. I’m always exploring the latest tech trends and love sharing what I learn along the way. Let’s dive into the world of cloud and tech together! 🚀

In this tutorial, we will walk through the process of hosting a static website on AWS using an EC2 instance. This solution is ideal if you want to control the server hosting your website and are looking to use AWS for scalability and flexibility.

Prerequisites

Before we get started, ensure you have the following:

An active AWS account
AWS CLI installed (optional)
A basic understanding of EC2, security groups, and static websites

GitHub Repository for Required Files: All the necessary files for this tutorial can be found in the following GitHub repository:

Static Website on EC2 Repository

Step 1: Launch an EC2 Instance

1. Sign in to the AWS Management Console and navigate to EC2 under the Compute section.

2. Click Launch Instance to start a new EC2 instance.

3. Choose an AMI: For this example, we’ll use the Amazon Linux 2 AMI. This is a lightweight, secure, and stable Linux server that can serve static content.

4. Select Instance Type: Choose t2.micro (free tier eligible) for basic hosting.

5. Create New Key: Click on "Create New Key Pair": In the EC2 dashboard, navigate to the Key Pairs section and click on Create Key Pair to begin the process of generating a new SSH key pair for your EC2 instance.

Click "Create": Once you've chosen a name and confirmed the .pem extension, hit the Create button. This will generate your private key and automatically download the .pem file to your computer.

6. Configure Instance: Leave the default settings, or configure them based on your needs. Ensure your instance has a public IP so you can access it from the internet.

7. Add Storage: You can stick with the default 8GB storage or increase it if necessary.

8. Configure Security Group: Create a new security group or use an existing one. Allow inbound HTTP (port 80) and SSH (port 22) access.

9. Configure Security Group: Click on Lunch Instance

Step 2: Connect to Your EC2 Instance

Once your instance is running, you can SSH into it.

From the EC2 dashboard, select your instance and click Connect.
From EC2 Instance Connect option click on connect to SSH into the instance using your private key.

Step 3: Install Apache HTTP Server

We’ll use Apache HTTP Server to serve the static website.

1. Update your EC2 instance:

   sudo yum update -y

2. Install Apache:

   sudo yum install -y httpd

3. Start Apache:

   sudo systemctl start httpd

4. Enable Apache to start on boot:

   sudo systemctl enable httpd

Step 4: Configure Static Website

Once you’ve successfully logged into the EC2 instance, follow these steps to install the necessary files from GitHub and set up your server:

1. Download the Static Website Files from GitHub: Use the git command to clone your repository directly into the instance:

   yum install git -y
   git clone https://github.com/simplynadaf/static-website-on-ec2.git

2. Move the Files to the Web Root: Copy the contents of the repository to the web root directory:

   cp -r static-website-on-ec2/* /var/www/html

3. Clean Up: Remove the cloned repository folder if it's no longer needed:

   rm -rf static-website-on-ec2

Step 5: Test Your Website

Now that everything is set up, open a web browser and visit your EC2 instance’s public IP (e.g., http://your-public-ip). If everything is configured correctly, your static website should appear.

Important Note 🚨

Always remember to use http://: By default, browsers will attempt to connect using HTTPS, which may result in a "failed to connect" error if HTTPS is not configured on your server.

To access your website, manually type the address in the format:

http://your-public-ip/

Conclusion: In this tutorial, we’ve covered how to host a simple static website using an EC2 instance on AWS. This method gives you flexibility and control over your server, making it a great option for small-to-medium static websites. With the ability to configure a custom domain and SSL certificate, you can further enhance your website's availability and security.

— — — — — — — —
Here is the End!

✨ Thank you for reading! ✨ I hope this article helped simplify the process and gave you valuable insights. As I continue to explore the ever-evolving world of technology, I’m excited to share more guides, tips, and updates with you. 🚀 Stay tuned for more content that breaks down complex concepts and makes them easier to grasp. Let’s keep learning and growing together! 💡