Intro

Welcome back to our introductory tutorial on Nginx. Yesterday we got a good introductory walkthrough on Nginx including how it works and what makes it unique. We also installed a prebuilt binary of Nginx on an instance of FreeBSD so we can begin working without any hiccups or unnecessary complications.

Today, we're going to focus on how to host static websites using Nginx. It's important to remember that in the beginning, Nginx was started as as experiment to speed up loading static content on an HTTP server. To this day, this is the number one place where Nginx is still the champion. So knowing this, let's crack open the terminal and get to work.

ssh freebsd@your_server_ip_address

For accessibility purposes, we previously installed Nano on to our FreeBSD server to have quick and easy editing capabilities. For some of you, this will suffice and you will want to follow along just using that. However, I will be using the SFTP add on to Sublime Text to edit future documents remotely. This will make things much easier to read and reason about because let's face it... nobody likes staring a document with no text coloring or convenient formatting options. For those who wish to learn more about the Sublime SFTP plugin, a link will be provided below. So knowing this, let's move forward.

This time, we're going to focus on how to locate the central Nginx config file. This will vary from system to system so it's worth knowing this trick in the event that you are following this tutorial from Ubuntu, CentOS, or whatever other system you may be using.

nginx -V

There, now pay attention here where the --conf-path flag is located. This is telling us exactly where the file is located. Let's go ahead and navigate to the directory right quick.

cd /usr/local/etc/nginx/
ls

Great, now we can see nginx.conf located here. Let's open the file in our text editor and have a look at the file.

You may remember a lot of this from yesterday so now, to make things easier to comprehend, let's clear out most of the config file so we can write out our own details from scratch.

clear file

Good, before we begin with writing our web site configuration, we of course need a website.To do this, let's open a new window in our terminal so we can build us a super simple web page in HTML and CSS.

cd to/your/project/directory
mkdir nginx-test-site
cd nginx-test-site
touch index.html app.css

Ok, now let's write the HTML file.

<!DOCTYPE html>
<html>
<head>
    <title>Fun with Nginx</title>
    <link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
    <header>
        <h1>
            My Big Fancy Headline!
        </h1>
        <h3>
            This is a website. It is simple. It is beautiful.
        </h3>
    </header>
    <content>
        <p>
            No fanciness, no nothing. Simple, easy, clear.
        </p>
        <p>
            For those who don't like it. <span class="red">Deal with it.</span>
        </p>
    </content>
</body>
</html>

See? Simple is the goal for now. Let's right the CSS file to give Nginx something else to serve.

header h1 {
  color: blue;
}

.red {
  color: red;
}

There, we're done with that. Now let's close out of our text editor for the time being and configure an SFTP client for our FreeBSD server. To do this, we're going to use CyberDuck but you may use whatever SFTP client you wish to accomplish this task. Let's get it done.

video of SFTP client being setup with CyberDuck upload to directory /usr/local/www/nginx/

Excellent, now let's load our newly built website to our FreeBSD server.

sudo su root
mkdir /var/www/nginx
chown -R freebsd /var/www/nginx

video showing the drag and drop upload to /var/www/nginx/

chown -R freebsd /usr/local/etc/nginx/nginx.conf

That's it, not too bad wasn't it? Now we need to go our text editor and edit that nginx.conf file we cleared out earlier.

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 80;
        server_name test;

        location / {
            root /var/www/nginx/nginx-test-site;
            index index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/local/www/nginx-dist;
        }
    }
}

Excellent, now let's take a quick look at how our website renders.

video showing website load on browser

Conclusion

That's it, now we have our static website loaded and working on our Nginx server. If we wanted, we could easily create more server contexts within Nginx to host different websites but this will do for now.

Tomorrow, we will shift our focus to handling an Express.js application by having Nginx serve the static files that our Express application would depend on for rendering web pages.

Helpful Links

Alex Allen

Alex is an independent developer who is obsessed with both performance and information security. When not writing code, Alex is either playing guitar or working in his garden.

  1. Comments for Hosting Static Websites

You must login to comment

You May Also Like