Deploying a Static Website on AWS EC2 with NGINX

In today’s digital age, having a personal or professional website is almost essential. Whether you’re a budding DevOps engineer, a web developer, or a business owner, knowing how to deploy a website is a crucial skill. This guide will take you through deploying a static website on an AWS EC2 instance using NGINX. By the end of this article, you’ll have your website live and accessible to the world.

Prerequisites

Before we dive in, make sure you have the following:

An AWS account
Basic understanding of AWS EC2, SSH, and NGINX
Your static website files ready (HTML, CSS, JavaScript)

Step 1: Launch an EC2 Instance

First, we need to launch an EC2 instance on AWS.

Login to AWS Management Console:
Navigate to the EC2 dashboard and click on "Launch Instance."
Configure Instance:
- Choose an Amazon Machine Image (AMI). We will use the Amazon Linux 2 AMI for this guide.
- Select an instance type (t2.micro is suitable for our needs).
- Configure the instance details, and add storage if necessary.
- Add a tag (optional, but recommended for organization).
- Configure the security group to allow SSH (port 22) and HTTP (port 80) traffic.
Launch Instance:
- Review your settings and launch the instance.
- Download the private key (.pem) file, which you will need to access your instance via SSH.

Step 2: Connect to Your EC2 Instance

With your instance running, the next step is to connect to it using SSH.

Open a terminal and navigate to the directory containing your private key file:

   cd path_to_your_pem_file

Connect to the instance:

   ssh -i "MyProfile.pem" ec2-user@your-ec2-public-ip

Step 3: Install NGINX

Now that you're connected to your instance, it's time to install NGINX, the web server that will serve your static website.

Update the package index:

   sudo yum update -y

Install NGINX:

   sudo amazon-linux-extras install nginx1.12

Start and enable NGINX:

   sudo systemctl start nginx
   sudo systemctl enable nginx

Step 4: Transfer Your Static Website Files

Next, you need to transfer your website files to the EC2 instance.

Use SCP (Secure Copy Protocol) to transfer your files:

   scp -i "MyProfile.pem" -r /path_to_your_website_files/* ec2-user@your-ec2-public-ip:/home/ec2-user

Move the files to the NGINX root directory:

   sudo mv /home/ec2-user/* /usr/share/nginx/html/

Step 5: Configure NGINX

To ensure that NGINX serves your website correctly, we need to adjust its configuration.

Edit the NGINX configuration file:

   sudo nano /etc/nginx/nginx.conf

Update the server block to point to your website files:

   server {
       listen 80;
       server_name your-ec2-public-ip;

       location / {
           root /usr/share/nginx/html;
           index index.html index.htm;
       }
   }

Test the configuration and restart NGINX:

   sudo nginx -t
   sudo systemctl restart nginx

Step 6: Access Your Website

Finally, open your web browser and enter your EC2 instance’s public IP address. Your static website should now be accessible via HTTP on port 80.

Example Files

Here's a glimpse of the files used in this deployment:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ekemini Thompson - DevOps Engineer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="header-content">
            <h1>Ekemini Thompson</h1>
            <p>DevOps Engineer HNG Intern <a href="https://hng.tech">https://hng.tech</a></p>
            <nav>
                <a href="#about">About</a>
                <a href="#skills">Skills</a>
                <a href="#projects">Projects</a>
                <a href="#contact">Contact</a>
            </nav>
        </div>
    </header>
    <!-- Other sections -->
</body>
</html>

style.css

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    color: #333;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
header {
    background-color: #1a1a1a;
    padding: 20px;
    text-align: center;
    color: #fff;
}
nav a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
nav a:hover, nav a.active {
    color: #00ADB5;
}

Conclusion

Congratulations! You successfully deployed a static website on an AWS EC2 instance using NGINX. This setup ensures that your website is accessible via a public IP address on port 80, providing a reliable and scalable solution for hosting static content.

For more details or to explore further enhancements, visit the HNG Internship website or my github

Deploying your website can seem daunting at first, but it becomes a manageable and rewarding process with the right steps. Happy deploying!

Blog