How to Host a Static Website with Nginx

Static site generators are a fantastic way to manage a website. Static sites are faster and safer than dynamic sites. They can be easily generated by a wide variety of static site generators. My favorite is Hugo. Nginx is an ideal web server for serving these static files. In this tutorial we will set up a server and optimize it for serving our static site.

This server is going to be optimized for static sites. I recommend keeping your static websites and your dynamic websites on separate systems. In the long run, this separation will save time and frustration, VPSs are super cheap. I recommend Linode and I do so without an affiliate code.

This guide assumes that you already have a properly configured remote server. If you need help setting up a basic server, check out Setting Up a Basic Server with Ubuntu 16.04. This guide is intended for and has been tested on Ubuntu 16.04.

Install

Install Nginx web server.

sudo apt-get install nginx

Controlling Nginx

The following commands will help you control Nginx.

This will start Nginx

sudo systemctl start nginx

To stop Nginx

sudo systemctl stop nginx

To restart Nginx

sudo systemctl restart nginx

To reload Nginx configurations.

sudo systemctl reload nginx

Firewall

Your server should be running a firewall. I recommend the Uncomplicated Firewall (UFW). If you need help with UFW, check out, A Guide to the Uncomplicated Firewall (UFW) for Linux. The following command will allow HTTP and HTTPs traffic.

sudo ufw allow 'Nginx HTTP'

Then we need to reload the firewall rules.

sudo ufw reload

If you are using another firewall and don't know how to allow HTTP or HTTPS traffic, then you should consider switching to UFW. Firewalls are too import to be convoluted. UFW allows mere mortals to create firewall rules.

Verify

At this point, we should verify that the server is operational. Visit your servers IP address in a web browser. You should be greeted by a generic Nginx info screen from the default site. If that does not happen then something when wrong.

Make a Dummy Site

I want to serve files from a directory within my home directory. This directory will be called www.

cd ~
mkdir www

In this new directory we will make a dummy index.html page.

nano ~/www/index.html

Inside just put anything. We don't need actual html, just something kinda unique.

Welcome to test.jasonrigden.com. This is the dummy index page.

Now we need to change the www directory permissions. This will allow Nginx to access the files.

chmod 0755  ~/www

Nginx Configuration Directory

Let's enter the directory containing the Nginx configuration files.

cd /etc/nginx

ls this directory to take a look around. In this tutorial we only care about a couple files and directories. The file nginx.conf is the central configuration file for our Nginx instance. The sites-available and sites-enabled directories contain the site specific configuration files.

nginx.conf

It is a good practice to make backups of configuration files before editing them. Make a backup of of nginx.conf.

sudo cp nginx.conf OLD.nginx.conf

Now open up the primary Nginx configuration file and take look around.

sudo nano nginx.conf

First of all, lines starting with a # are comments and are ignored by Nginx. Directives need to end with a semicolon ;. Configuration is organized into blocks such as http, server, location. Nginx configuration files can also include other files. If l you look near the bottom of the http block you should see a line, include /etc/nginx/sites-enabled/*;. The configuration files in the sites-enabled will be included as part of the Nginx configuration. The sites-enabled will be where our website specific settings files will be. The nginx.conf will be where the server wide settings will be.

sites-available

Enter the sites-available directory.

cd sites-available

Generally speaking, the sites-available directory contains configuration files for individual websites. Let's take a look at the default configuration file.

sudo nano default

In this file you should see more blocks. Look for the server and location blocks. Exit nano and then copy this default file. Let's make a new configuration file for a new website. I would name the new file for the domain you will be using. In my case that is jasonrigden.com.

sudo nano test.jasonrigden.com

This will be the site specific configuration file for the website at test.jasonrigden.com. Edit the file and change the values as appropriate.

server {
        listen 80;
        server_name test.jasonrigden.com;
        root /home/jason/www;
        index index.html;
}

Nginx needs to know a few things before it can actually start serving up web pages. Notice that our settings will live in a server block. We tell Nginx to listen for connections on port 80. That this server block is for the domain test.jasonrigden.com. That the files to server are located at /home/jason/www.

Remember earlier when we talked about included configuration files? Configuration files in the sites-enabled directory will be included in our Nginx instance. Create a symbolic link for the configuration files we want to enable.

sudo ln -s /etc/nginx/sites-available/test.jasonrigden.com /etc/nginx/sites-enabled/

Then restart the Nginx server.

sudo systemctl restart nginx

Check to see if the sites is up.

curl test.jasonrigden.com

Which should return the contents of the index.html that we made earlier.

Welcome to test.jasonrigden.com. This is the dummy index page.

It works

At this point we have a working website. All you need now is to have your static site generator output to /home/jason/www. Anything in that folder will be served by the Nginx. The next few sections will cover various optional features and optimizations that you can choose.

Logs

Writing web logs takes resources. If you want to save these resources, disable logging. Open up the main Nginx configuration file.

sudo nano /etc/nginx/nginx.conf

Find the logging section.

##
# Logging Settings
##

access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;

Comment out the access_log and the error_log.

##
# Logging Settings
##

#access_log /var/log/nginx/access.log;
#error_log /var/log/nginx/error.log;

Client Side Caching

Telling our clients to cache resources like js, css, and images files can significantly improve performance. I like to use the a shortened version of the rules from H5BP's server-configs-nginx.

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|mp4|ogg|ogv|webm|htc)$ {
  access_log off;
  add_header Cache-Control "max-age=2592000";
}


# CSS and Javascript
location ~* \.(?:css|js)$ {
  add_header Cache-Control "max-age=31536000";
  access_log off;
}

These rules can be added to your site configuration file.

sudo nano /etc/nginx/sites-available/test.jasonrigden.com

Is should look something similar to this.

server {
        listen 80;
        server_name test.jasonrigden.com;
        root /home/jason/www;
        index index.html;
}

Add the caching rules to the end of the block.

server {
        listen 80;
        server_name test.jasonrigden.com;
        root /home/jason/www;
        index index.html;
        
        # Media: images, icons, video, audio, HTC
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|mp4|ogg|ogv|webm|htc)$ {
          access_log off;
          add_header Cache-Control "max-age=2592000";
        }

        # CSS and Javascript
        location ~* \.(?:css|js)$ {
          add_header Cache-Control "max-age=31536000";
          access_log off;
        }
}

Pre-compression

Compression should be already be activated by default on your server. We can save server resources and get higher compression levels with by pre-compressing our files. We will enable pre-compressed files by editing the main Nginx configuration file.

sudo nano /etc/nginx/nginx.conf

Find the section:

##
# Gzip Settings
##

gzip on;

And just add gzip_static on;.

##
# Gzip Settings
##
gzip_static on;
gzip on;

Then restart the Nginx server.

sudo systemctl restart

Our example index.html from earlier will not really benefit from compression. But, we will do it anyhow for the sake of the demonstration.

gzip -v -k -f --best index.html

-v is for verbose, -k is for keeping the original file, -f is to overwrite any older zipped file with the same name, and --best is for the best compression. Your static site generator will probably have an option for pre-compression. Check the documentation.

HTTPS

Properly enabling encryption in your web server used to be terrible. Signed certificates were expensive and the setup was complicated. Our friends at the EFF and Let's Encrypt fixed that. We are no longer beholden to the corrupt and frequently incompetent certificate authority cartel. Signed certificates are now available free from Let's Encrypt. And the certbot program sets up the server for us.

Install certbot.

sudo apt-get install software-properties-common
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-nginx

Run certbot.

sudo certbot --nginx

This should bring up a dialog.

    Which names would you like to activate HTTPS for?
    -------------------------------------------------------------------------------
    1: jasonrigden.com
    2: cryotek.jasonrigden.com
    3: test.jasonrigden.com
    -------------------------------------------------------------------------------
    Select the appropriate numbers separated by commas and/or spaces, or leave input
    blank to select all options shown (Enter 'c' to cancel): 

On my server I have a couple of sites. Select the site you would like to activate HTTPS for. After making your selection, certbot will do some work and then ask if you would like to redirect traffic to HTTPS.

Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
-------------------------------------------------------------------------------
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
-------------------------------------------------------------------------------
Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 

I would choose to redirect. If all goes well, you will see a congratulations message.

Then restart the Nginx server.

sudo systemctl restart nginx

Visit the site with your browser. If you chose to redirect you will automatically be sent to the HTTPS version of the site.

Certificates must be renewed or the will expire. The following command will do this. Add it to your crontab to run regularly.

sudo certbot renew

Enable HTTP/2

HTTP/2 is a major improvement for the web. It can give you a large improvement in client performance. You will need to have enabled HTTS for HTTP/2. Open up the configuration file for test.jasonrigden.com.

sudo nano /etc/nginx/sites-available/test.jasonrigden.com

You will see certbot has done some editing. Find the listen line.

listen 443 ssl; 

change that to:

listen 443 ssl http2;  

Then restart the Nginx server.

sudo systemctl restart nginx

Conclusion

You now have an web server optimized for serving static content.