How to Host a Static Website with Nginx

Have you ever wanted to make a simple website and share it with the world? Maybe you made a school project, a personal blog, or a photo gallery. In this post, I’ll show you how I hosted a static website using Nginx on my computer. It sounds a bit techy, but don’t worry—I’ll explain each step.

First, let’s go over what this all means.

A static website is a site made of regular files like HTML, CSS, and images. It doesn’t have moving parts or use a database. You can’t leave comments or log in, but it loads super fast and is great for things like portfolios or basic info pages.

Nginx (pronounced “engine-x”) is a web server. Think of it as a tool that helps your computer send your website to the internet so people can visit it in their web browser. It’s small, fast, and works really well for static sites.

I chose to use Nginx because it’s simple, lightweight, and doesn’t use a lot of memory. You don’t need to know a ton about programming to use it. I’ll help you get it running step-by-step.

What You’ll Need

Before we begin, here’s what you should have:

A computer running Ubuntu (or another Linux version)
Internet connection
Basic knowledge of the Terminal (just typing commands)

Ready? Let’s go.

Step 1: Install Nginx

First, we need to install Nginx. It’s available in the Ubuntu software repository.

Open your Terminal and type:

sudo apt update
sudo apt install nginx

The first command updates your software list. The second one installs Nginx.

After it finishes, check if it’s working:

sudo systemctl status nginx

You should see a message that says it’s “active (running).” That means it worked.

If you open your browser and go to http://localhost, you’ll see the default Nginx welcome page.

Step 2: Make Your Website

Now let’s create the files for your website. I like to make a folder for it in my home directory.

mkdir -p ~/my-website

This command makes a folder called my-website in your home folder. You can name it anything you like.

Next, go into that folder:

cd ~/my-website

Create a simple index.html file:

echo "<h1>Hello from Nginx!</h1>" > index.html

This creates a basic webpage that says “Hello from Nginx!”

You can also add more files like images, styles, or other pages later. But for now, we’ll just use this.

Step 3: Configure Nginx

Now we tell Nginx where to find your website files.

Nginx stores its settings in the /etc/nginx/sites-available/ folder. We’re going to make a new config file for your site.

First, open a new config file with your favorite editor. I’ll use nano:

sudo nano /etc/nginx/sites-available/my-website

Paste this inside:

server {
    listen 80;
    server_name localhost;

    root /home/your-username/my-website;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Make sure to replace your-username with your actual username.

Then save the file (in nano, press Ctrl + O, then Enter, then Ctrl + X to exit).

Next, link this file to the sites-enabled folder so Nginx will use it:

sudo ln -s /etc/nginx/sites-available/my-website /etc/nginx/sites-enabled/

Then test if your settings are okay:

sudo nginx -t

If you see “syntax is okay” and “test is successful,” you’re good to go.

Now restart Nginx:

sudo systemctl reload nginx

Go back to your browser and visit http://localhost. You should see your custom page now.

Step 4: Make It Public (Optional)

If you want others to visit your site on the internet, you’ll need:

A public IP address
Port 80 open in your firewall or router
Or, better, a domain name and hosting provider

If you’re just testing on your home network, skip this part for now. But later, you can:

Buy a domain name
Point it to your server’s IP
Use Nginx to handle traffic from that domain

That’s a more advanced topic, but it builds on what you just learned.

What You Can Add Next

Once your static site is working, you can:

Add a style.css file to make it look nice
Create more HTML pages like about.html or contact.html
Include images or even videos

To keep everything organized, make folders like:

/images for pictures
/css for styles
/js for scripts (if needed)

Here’s how you can link a CSS file in your HTML:

<link rel="stylesheet" href="css/style.css">

Tips From My Experience

Here are a few things I learned while doing this:

Always test your site with nginx -t before restarting
If your changes don’t show up, try clearing your browser cache
Keep file names simple (no spaces or special characters)

How Is This Different From Other Methods?

You might wonder, “Why not use GitHub Pages or Netlify?”

Those are great too. They’re easier for beginners and don’t require a server. But they have limits. If you want full control or you’re learning how websites really work, using Nginx is a great way.

Compared to Apache, Nginx uses less memory and is better at handling many visitors. It’s also popular for serving static content.

Advantages of Hosting a Static Site With Nginx

Let’s look at the main benefits:

Speed: Nginx is fast and doesn’t slow down your computer
Control: You get to decide how everything works
Learning: It teaches you how websites work behind the scenes

Final Thoughts

Hosting your own static website with Nginx may seem tricky at first, but it becomes simple once you try. I liked how everything clicked together—the files, the config, and the web server.

It’s a great weekend project. Plus, it makes you feel good when you see your own webpage load from your own setup.

If you ran into problems, don’t give up. Look at the error messages, and try again. That’s how I learned.

Have you tried hosting a site before? Do you use Nginx, or do you prefer something else? I’d love to hear what worked for you.

Thanks for reading and happy tinkering!