Setting Up a Static Website on Ubuntu EC2 with Nginx

Introduction:

In the ever-evolving landscape of web hosting, deploying a static website has become an efficient and cost-effective choice for many developers. Leveraging the power of cloud computing, AWS EC2 instances offer a scalable and reliable environment for hosting various applications. In this step-by-step guide, we will walk you through the process of setting up an Ubuntu EC2 instance and deploying a static website using the Nginx web server.

Whether you're a seasoned developer exploring new hosting options or a beginner eager to dive into the world of cloud computing, this tutorial aims to provide you with a comprehensive understanding of launching and configuring your own Ubuntu EC2 instance, along with the installation and setup of the Nginx web server. By the end of this guide, you'll have a secure and functional platform to showcase your static web content.

Scenario:

Imagine you have a personal portfolio, a small business website, or a static blog that you want to share with the world. Hosting it on a reliable server ensures that your content is accessible at all times, and AWS EC2, coupled with the Nginx web server, provides an excellent combination of performance and flexibility.

In this scenario, you might be looking to move away from traditional hosting services or explore cloud-based solutions for the first time. By following this tutorial, you'll gain hands-on experience in launching your own virtual server, installing essential software, and configuring it to serve your static website seamlessly. Whether you're a developer, entrepreneur, or someone with a passion for sharing content online, this guide empowers you to take control of your web hosting environment and enhance the visibility of your digital presence.

Prerequisites: AWS account, basic knowledge of the command line, and access to the AWS Management Console.

Step 1: Launching an Ubuntu EC2 Instance:

1.1. Log in to the AWS Management Console.

1.2. Navigate to the EC2 Dashboard.

1.3. Launch a new EC2 instance, choosing Ubuntu as the operating system.

1.4. Configure instance details, add storage, and configure security groups.

1.5. Review and launch the instance.

Step 2: Connecting to the EC2 Instance:

2.1. Go to the "Instances" section, choose the newly launched server, click on "Connect," then select "EC2 Instance Connect," and finally, click the "Connect" button.

2.2. Alternatively, establish a connection to the instance using SSH.

Step 3: Updating and Upgrading Ubuntu:

3.1. Update the package list.

3.2. Upgrade the installed packages.

Step 4: Installing Nginx:

4.1. Use the package manager to install Nginx.

4.2. Start and enable the Nginx service.

Step 5: Configuring Nginx for the Static Website:

5.1. Create a directory for the static website files.

5.2. Upload or create your static website content.

5.3. Configure Nginx to serve the static files.

5.4 Copy below server configuration to devops-site config file and save it and restart the nginx server.

server {
    # Listen on port 81 for both IPv4 and IPv6 connections
    listen 81;
    listen [::]:81;

    # Set the server name to devops-site.com
    server_name devops-site.com;

    # Define the root directory where website files are located
    root /var/www/devops-site.com;

    # Specify the default file to serve when a directory is requested
    index index.html;

    # Configure how Nginx should handle different URI paths
    location / {
        # Try to serve the requested file, or return a 404 error if not found
        try_files \$uri \$uri/ =404;
    }
}

5.4. Test the Nginx configuration.

Step 6: Opening the port 81:

6.1. Configure Security Group as follows to allow HTTP traffic.

6.2. Reload Nginx and test the website.

Alternatively, achieving the desired outcome is possible through a bash script. To do so, follow the instructions below. Initially, review the manual steps taken and automate them using the bash script:

Update the operating system:
```
 sudo apt update -y
```
Install Nginx:
```
 sudo apt install nginx -y
```
Navigate to the /var/www directory and create a folder named your_domain.com:
```
 cd /var/www
 sudo mkdir your_domain.com
 cd your_domain.com
```
Clone the GitHub repository:
```
 git clone your_repo_link .
```
Create a file named your_domain and paste the server configuration into it.

Move the file to /etc/nginx/sites-enabled/:

 sudo mv your_domain /etc/nginx/sites-enabled/

Restart Nginx:
```
 sudo service nginx restart
```

Create a bash file script.shnano script.sh and paste following configuration and save the file. ctrl s and ctrl x

#!/bin/bash

# Step 1: Update the operating system
apt update -y

# Step 2: Install Nginx
apt install nginx -y

# Step 3: Navigate to /var/www and create a folder named your_domain.com
cd /var/www
mkdir your_domain.com
cd your_domain.com

# Step 4: Clone the GitHub repository
git clone your_repo_link .

# Step 5: Move to the folder where your configuration file is located
cd ~ 
cd /etc/nginx/sites-enabled/

# Create a file named 'example_file' with some content
sudo echo "server {
    # Listen on port 81 for both IPv4 and IPv6 connections
    listen 81;
    listen [::]:81;

    # Set the server name to one-piece.com
    server_name your_domain.com;

    # Define the root directory where website files are located
    root /var/www/your_domain.com;

    # Specify the default file to serve when a directory is requested
    index index.html;

    # Configure how Nginx should handle different URI paths
    location / {
        # Try to serve the requested file, or return a 404 error if not found
        try_files $uri $uri/ =404;
    }
}" | sudo tee your_domain

# Step 7: Restart Nginx
sudo service nginx restart

Make sure to set the script as executable using sudo chmod +x script.sh before running it. Also, ensure that the user running the script has the necessary permissions for the tasks mentioned in the script: sudo bash script.sh

cd /etc/nginx/sites-enabled/
sudo nano your_domain
# Replace this line try_file with try_files $uri $uri/ =404;
sudo service nginx restart

Summary:

In this comprehensive guide, we've navigated the process of setting up a static website on an Ubuntu EC2 instance using the powerful Nginx web server. Beginning with the launch of your AWS EC2 instance, we covered essential steps, from connecting to the server through SSH to updating and upgrading the Ubuntu system.

Our journey continued with the installation of Nginx, a robust and high-performance web server, and progressed to configuring it for hosting a static website. You've learned how to create the necessary directories, upload your static content, and optimize Nginx to serve your website efficiently.

For those keen on securing their server, we explored optional steps such as configuring the firewall to control traffic. By the end of this tutorial, you've not only established a reliable hosting environment for your static website but also gained insights into managing server security.

As you embark on your web hosting journey, this guide serves as a foundational resource, equipping you with the skills to deploy and maintain your digital presence. Feel free to explore further customization options, enhance security measures, and share your newfound knowledge with others in the ever-expanding realm of cloud-based web hosting. Happy hosting!

Setting Up a Static Website on Ubuntu EC2 with Nginx: A Step-by-Step Guide