A Walkthrough on deploying Your Static Website on EC2 Using NGINX Server
Cloud computing has transformed how many businesses operate, allowing them to scale rapidly while maintaining cost-efficiency. As companies shift towards more scalable and distributed infrastructure, deploying websites on cloud platforms like AWS is becoming the norm. In this post, I will walk you through deploying a static website using an NGINX server on an EC2 instance with Amazon Linux. This setup is perfect for small websites and applications that don’t need a complex backend, yet are powerful enough for production-grade hosting. Here’s a step-by-step walkthrough on deploying a website on an NGINX server using AWS EC2 (Amazon Linux) and Git Bash CLI.
Prerequisites
AWS Account – You need an active AWS account.
EC2 Instance – Create an EC2 instance with Amazon Linux(AMI).
Git Bash – This will be your command-line tool for connecting to the EC2 instance.
SSH Key – Download the .pem key during the EC2 setup to connect to the instance.
Step 1: Launch an EC2 Instance
- Login to AWS Management Console.
Go to AWS Console.
Navigate to the Search bar and search for EC2 service.
- Create a new EC2 instance.
Click on Launch Instance.
Choose a name for your instance(In our case, we will use Test-demo-instance)
Choose Amazon Linux 2023 AMI (or Ubuntu).
Choose the instance type t2.micro(free-tier eligible).
Create a key pair, which will automatically downloaded when created. This key will be used to SSH into your instance(In our case, we will use:test-demo-nginx-key-pair)
Check the following boxes(Optional):
Allow SSH
Allow HTTPS
Allow HTTP
Launch Instance.
3. Configure Security Group:
Go to EC2 Dashboard.
- In the AWS Management Console, navigate to EC2 > Instances.
Update the Security Group.
Select your running instance and go to the Security tab.
Click on the Security Group associated with your instance.
Under the Inbound Rules tab, click Edit.
Add the following rule:
Type: HTTP
Protocol: TCP
Port Range: 80
Source: 0.0.0.0/0 (allows everyone to access it)
Save the changes.
Step 2: Connect to Your EC2 Instance
- Open Git Bash.
Navigate to the directory where your .pem key file is located(In our case it’s in the download directory)
Run the following commands to connect to your EC2 instance via SSH:
<chmod 400 "test-demo-nginx-key-pair.pem">
<ssh -i "test-demo-nginx-key-pair.pem" ec2-user@ec2-54-162-98-94.compute-1.amazonaws.com>
Verify Connection and Update the EC2 Instance Packages.
After running the command, you should be logged into your EC2 instance. You can check the connection by typing:
<uname -a>This will display the Linux version.
Update the EC2 Instance with this command: <sudo yum update -y>
Step 3: Install NGINX
- Install NGINX.
Install NGINX on your EC2 instance using the following command:
<sudo yum install nginx -y>
- Start NGINX.
Start the NGINX service:
sudo systemctl start nginx
- Verify NGINX is running
Open your web browser and go to the Public IP of your EC2 instance
You should see the default NGINX welcome page, as above, indicating that NGINX is working.
Step 4: Set Up Your Website Files
- Navigate to the web root directory by running the following commands:
The idea behind these commands is to locate the root directory of the nginx server, which in our case here, we will go into the nginx.conf to be able to get the root directory.
- Replace the default NGINX page in the root directory with your website files. ( In our case, we will be using an HTML website template file downloaded from html5up
So here we moved into the root directory and downloaded our HTML website template by using <sudo wget {the link address: https://html5up.net/phantom/download}>
Also, you can create a simple index.html file by using: <sudo nano index.html>
Add your HTML content (e.g., “Hello World”):
<html>
<head><title>My Website</title></head>
<body><h1>Hello from NGINX on EC2!</h1></body>
</html>
Press Ctrl+O to save, then Ctrl+X to exit.
Tip: Ensure that NGINX has the right permissions to serve the website by using this command: <sudo chmod -R 755 /usr/share/nginx/html>
Step 5: Test Your Website
- Access the website
In your browser, go to the Public IP of your EC2 instance
You should see your custom webpage (Just like the above)
Step 6: Deploy website Files from GitHub (Optional)
The first step here is to check if Git is installed on the EC2 instance by running this command < git –-version>
If Git is not Installed, then install it on your EC2 instance using this command:
<sudo yum install git -y>
Now proceed to Github go to open-source simple website projects and select any of your choice. In our case, we will be using the one here; [https://github.com/sdil/open-production-web-projects.git]
- Clone your repository.
Navigate to a directory where you want to store the website files, e.g., /usr/share/nginx/html.
Run the following command to clone the repository:
git clone https://github.com/sdil/open-production-web-projects.git
- Move website files.
Move your files into the /usr/share/nginx/html directory:
<sudo mv open-production-web-projects.git/* .>
- Restart NGINX.
After updating the website files, restart NGINX to apply changes:
<sudo systemctl restart nginx>
Key Takeaways
Launching an EC2 Instance and configuring it to host a website.
Installing and configuring NGINX to serve web content.
Hosting a static website by modifying the web root.
Hosting a simple HTML website project from Github repo.
Subscribe to my newsletter
Read articles from Victor Okeke directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by