When you’re building a website or web app, you’ll often need to show static files. These include things like images, CSS, and JavaScript. They don’t change when users visit your site.
Nginx (pronounced “engine-x”) is a popular web server. It’s great at handling static files. I use it all the time when I build websites. It’s fast, lightweight, and simple to set up once you get the hang of it.
In this guide, I’ll show you how to use Nginx to serve static files the right way—clean, fast, and with a touch of nerdy fun.
What Are Static Files?
Let’s break it down.
Static files are files that stay the same. Every visitor gets the same file. They include:
- HTML files – basic structure of web pages
- CSS files – styling (colors, fonts, layout)
- JavaScript files – adds some logic and interaction
- Images, fonts, icons – stuff users see but don’t interact with directly
Static files are different from dynamic files, which are built on the fly (like a blog post from a database).
Nginx is really good at sending static files to your visitors quickly. It doesn’t need to think about it—it just delivers.
Why Use Nginx?
There are many web servers out there. I like Nginx because it’s:
- Fast and lightweight
- Easy to configure
- Built for high traffic
Think of it like this: Apache is like a big Swiss army knife. Nginx is more like a fast pizza delivery guy. He doesn’t cook the pizza, he just gets it to you quickly.
For static files, that’s exactly what we want—speed and simplicity.
Step 1: Install Nginx
On Ubuntu, installing Nginx is easy. Open your terminal and type:
sudo apt update
sudo apt install nginx
Once that’s done, check that it’s running:
systemctl status nginx
You should see something like “active (running)”. If not, start it:
sudo systemctl start nginx
And enable it so it runs when your computer boots:
sudo systemctl enable nginx
Boom. Nginx is up.
Step 2: Create a Folder for Your Static Files
I like to keep my files in a neat folder. Let’s say I want to serve a simple HTML page and an image.
Make a new folder:
sudo mkdir -p /var/www/mysite/static
Now put your files in there. For example:
/var/www/mysite/static/index.html/var/www/mysite/static/style.css/var/www/mysite/static/cat.png
(Yes, cat pictures are always necessary. Meow-nificent.)
Make sure Nginx can read them:
sudo chown -R www-data:www-data /var/www/mysite/static
sudo chmod -R 755 /var/www/mysite/static
Step 3: Configure Nginx to Serve Static Files
Let’s tell Nginx where to find our files.
Edit your Nginx config. You can create a new site file:
sudo nano /etc/nginx/sites-available/mysite
Paste this:
server {
listen 80;
server_name localhost;
location / {
root /var/www/mysite/static;
index index.html;
}
location ~* \.(jpg|jpeg|png|gif|css|js|ico|html)$ {
root /var/www/mysite/static;
expires 30d;
add_header Cache-Control "public, no-transform";
}
}
What this does:
- Tells Nginx to listen on port 80 (default HTTP port)
- Serves files from
/var/www/mysite/static - Caches files for 30 days (good for performance)
Save the file.
Now link it to Nginx:
sudo ln -s /etc/nginx/sites-available/mysite /etc/nginx/sites-enabled/
Then test your config:
sudo nginx -t
If all looks good:
sudo systemctl reload nginx
Step 4: Visit Your Static Site
Now open your browser and go to:
http://your-server-ip
You should see your static page, with all its files loaded fast.
If you see an error, double-check the file paths and permissions. Or maybe the cat photo got lost in cyberspace.
Three Benefits of Serving Static Files with Nginx
Here’s what I’ve noticed when using Nginx to serve static stuff:
- Speed – Nginx uses less memory and CPU. Visitors see your site faster.
- Simplicity – No PHP, no database, just files and Nginx.
- Caching – With proper headers, browsers store files and load them instantly next time.
These perks make a huge difference, especially for websites with lots of images or CSS.
More Performance Tweaks (Optional)
If you want to go the extra mile, try these:
- Enable Gzip Compression – Makes your files smaller.
gzip on;
gzip_types text/plain text/css application/javascript;
- Use
try_files– Avoids 404s by falling back to a default.
location / {
try_files $uri $uri/ =404;
}
- Set MIME Types – Helps browsers understand file types.
types {
text/html html;
text/css css;
application/javascript js;
image/png png;
}
These are small touches, but they help your site feel snappy.
Troubleshooting Tips
Serving static files isn’t hard, but things can go wrong. Here are three things to check:
- Wrong file paths – Make sure Nginx is pointing to the right folder.
- Permissions – Files must be readable by Nginx (
www-datauser). - Nginx not reloaded – Always run
sudo systemctl reload nginxafter changes.
Sometimes I forget to reload and wonder why nothing works. Classic facepalm moment.
Real-Life Example
I once made a landing page for a side project. It only had one HTML file, some CSS, and a few images. No need for a database or server-side code.
I used Nginx to serve it. Everything loaded in under a second, even on a slow mobile network.
And I didn’t have to install anything heavy. Just plain files and Nginx. Fast, light, and headache-free.
Three Common Use Cases
You’ll want to serve static files with Nginx when:
- You’re building a simple website or one-page app
- You have a React, Vue, or Angular frontend
- You’re using Nginx as a reverse proxy and need it to serve static assets
In each case, Nginx is like a waiter who never forgets your order. Quick and reliable.
Final Thoughts
Serving static files with Nginx is one of those skills that feels small—but helps a lot. Once you set it up, you get faster pages, fewer errors, and a smoother user experience.
Plus, you don’t need to be a Linux wizard to do it. Just a few commands and a little attention to detail.
So next time you build a site or app, think about your static files. And let Nginx do the heavy lifting.
Why serve files slowly when you can do it like a pro?
(P.S. If your cat photos load faster, you’re officially a static site ninja.)
