Deploying a Static Website on AWS EC2 with NGINX
Tags: aws, ec2, nginx, webdev
Published: 2024-07-06 03:02:11

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.

1. **Login to AWS Management Console:**
   Navigate to the EC2 dashboard and click on "Launch Instance."

2. **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.

3. **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.

1. **Open a terminal and navigate to the directory containing your private key file:**
   ```bash
   cd path_to_your_pem_file
   ```

2. **Connect to the instance:**
   ```bash
   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.

1. **Update the package index:**
   ```bash
   sudo yum update -y
   ```

2. **Install NGINX:**
   ```bash
   sudo amazon-linux-extras install nginx1.12
   ```

3. **Start and enable NGINX:**
   ```bash
   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.

1. **Use SCP (Secure Copy Protocol) to transfer your files:**
   ```bash
   scp -i "MyProfile.pem" -r /path_to_your_website_files/* ec2-user@your-ec2-public-ip:/home/ec2-user
   ```

2. **Move the files to the NGINX root directory:**
   ```bash
   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.

1. **Edit the NGINX configuration file:**
   ```bash
   sudo nano /etc/nginx/nginx.conf
   ```

2. **Update the server block to point to your website files:**
   ```nginx
   server {
       listen 80;
       server_name your-ec2-public-ip;

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

3. **Test the configuration and restart NGINX:**
   ```bash
   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](https://github.com/EkeminiThompson/hng.git) of the files used in this deployment:

#### index.html
```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
```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](https://hng.tech) website or my [github](https://github.com/EkeminiThompson/hng.git)

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