This content originally appeared on DEV Community and was authored by Ekemini Thompson
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!
This content originally appeared on DEV Community and was authored by Ekemini Thompson
Ekemini Thompson | Sciencx (2024-07-06T03:02:11+00:00) Deploying a Static Website on AWS EC2 with NGINX. Retrieved from https://www.scien.cx/2024/07/06/deploying-a-static-website-on-aws-ec2-with-nginx/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.