How I Configured NGINX to Serve My Custom HTML Page: A First-Timer's Guide

#beginners #devops #devchallenge #tutorial

Configuring NGINX to serve applications is a fundamental skill for anyone starting their DevOps journey. Whether you're setting up a web server for a personal project or diving into Cloud Infrastructure, it's a rewarding challenge. Recently, I decided to deploy a custom HTML page on an Ubuntu VM in Azure using NGINX. To keep things smooth and effortless, I tweaked a template online to give my site a personalized touch. In this article, I’ll take you through my setup process, the obstacles I encountered, and the valuable lessons I learned along the way.

My first step was to search online for free templates, and I came across FreeCSS. After browsing through the options, I found one that I liked—Browny. You can check it out too!

I then modified the code to suit my taste, updating the content and styling to match my vision. It was a fun way to personalize the site without starting from scratch! 🚀

Next, I created a new Ubuntu VM on Azure, but feel free to choose any cloud platform you prefer. During the setup, I customized the settings to suit my needs and ensured that port 80 was enabled to allow web traffic, as this was a test environment and not for production. For a production setup, I would recommend implementing additional security measures.

Once the VM was up and running, I ssh to it using MobaXterm to access the terminal. You can also use SSH or any other terminal tool of your choice.

Installing NGINX on Ubuntu

With the VM up and running, I first ran an update on it before installing NGINX, a powerful and lightweight web server that can handle traffic loads efficiently. Here's how you do it:

sudo apt update             # Updates the package list to ensure you're installing the latest versions of Ubuntu
sudo apt install nginx -y   # Installs NGINX and automatically confirms the installation without further prompts
sudo systemctl status nginx #To confirm if NGINX is running

You should see a result like below:

File Structure Overview

Below is the file structure of the application I used to better understand how everything fits together:

/var/www/html/Folashade_HNG0/
│── index.html
│── assets/
│   ├── css/
│   ├── js/
│   ├── images/
│   ├── fonts/
│   ├── download/
│   ├── logo/

Next, I navigated to the directory where my application files are stored using the following command:

cd /var/www/html/Folashade_HNG0  # Moves to this directory
sudo nano index.html             # Where to place your `index.html` code

To save the changes, I pressed Ctrl + O (to write the changes), then Enter to confirm. Finally, I exited by pressing Ctrl + X.

Configuring NGINX to Serve My Custom Page

With the HTML files and other necessary assets placed in the appropriate folder, it was time to configure NGINX to serve the custom page.

I navigated to the NGINX directory:

cd /etc/nginx
sudo nano sites-enabled/default  # where to modify the defauly NGINX configuration

I edited the default NGINX configuration file located at /etc/nginx/sites-available/default to point to the directory where I uploaded my files.

Here’s how I updated the configuration:

server {
    listen 80;
    server_name <your-server-ip>;

    # Root directory for your site
    root /var/www/html/Folashade_HNG0;

    # Default index file
    index index.html;

    # Serve the main site content
    location / {
        try_files $uri $uri/ =404;
    }

    # Serve static assets (CSS, JS, images, fonts, logos)
    location /assets/ {
        root /var/www/html/Folashade_HNG0;
    }
}

After saving the changes, I ran the following commands:

sudo nginx -t                 # Check if configuration is successful or give error if any issues found
sudo systemctl restart nginx  # Restart NGINX

At this point, my custom page was live! By visiting the VM’s IP address, I could see the page I had set up.

Challenges Faced

At first, I couldn’t access my HTML files because the NGINX configuration pointed to the wrong directory. NGINX couldn’t find the files, leading to errors when trying to load the page. Once I identified the issue, I updated the NGINX config to correctly point to the folder where my HTML files were located. After making this change, everything worked as expected, and my custom page was live!
Writing this article was a bit tricky, I had to explain technical details in a way that would be easy for beginners to understand, while still covering all the important steps. However, it helped me better understand troubleshooting and thinking critically about each step.
As the demand for cloud computing and automation grows, skills like these are becoming essential for professionals looking to work in roles such as DevOps Engineers and Cloud Engineers.

Completing this project was an excellent learning experience. It helped me get hands-on experience with server configuration and troubleshooting, which are key skills in web hosting and DevOps.

I hope this guide helps you on your path to mastering web server setup, and I encourage you to explore further as you expand your knowledge in Cloud and DevOps technologies.