How To Host Static Website Using NGINX

Intro

NGINX is open software for web serving, load balancing, reverse proxying, caching and a lot of other awesome things. It focused on maximum performance and stability from the beginning. Today, more than 50% of the busiest sites on the web are powering by NGINX.

Keep in mind there exist a lot of other methods for hosting static pages, this one just one of them.

Get a server and a domain name

At first, you should have shell access to your server to complete all steps below. You can start with $5/month Droplet on DigitalOcean or Linode. Secondly, you should purchase a domain name from the domain name registrar. You can use NameCheap or GoDaddy to do it.

Connect a domain name with your server

Right now you should literally connect your domain name and server with each other. Go to networking settings of your hosting providers (e.g. DigitalOcean) and create an A record, pointing your domain name(e.g. example.com) to server IP address(e.g. 173.245.58.51). Also, you should say domain name registrar with which name server connect your domain name. More info you can read here.

Install NGINX and Configure NGINX

Connect to your server using ssh. Then using package manager install NGINX. If you are using Ubuntu run this command:


                        sudo apt-get update
                        sudo apt-get install nginx 
                    
By default, NGINX expects your static files in a specific directory. In most cases, it should be in /var/www/ directory (You can override this in the configuration). Let's assume that our case is this one. Go to /var/www/ directory, create a new folder and move into it. Let's say our domain name is example.com

                        cd /var/www/
                        mkdir /var/www/example.com
                        cd example.com
                    
If you already have your website's static files copy it in current folder using scp command, GitHub/Bitbucket(Both of them allows create private repositories) or any other way. If don't then create index.html file with "Hello" message.

It's time to tell NGINX how to serve your website. Go to /etc/nginx folder. In this folder located NGINX configuration files.


                        cd /etc/nginx/
                    
In this guide, we will use 2 folders.

Go to sites-available folder, create file example.com with the following config::

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/example.com;
    index index.html;
    server_name example.com www.example.com;
    location / {
         try_files $uri.html $uri $uri/ =404;
    }
}
Don't forget to change example.com to your domain name. It's time to create link in sites-enabled folder to our confing. Then test and restart NGINX.
ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/example.com

sudo nginx -t
sudo systemctl restart nginx
If you don't see any error - that's all. You can stop on this step but if you want to enable HTTPS - let's continue and do few more steps.

Enable HTTPS

Using LetsEncrypt you can get free SSL certs. Execute these commands and follow the instructions:


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
sudo certbot --nginx certonly                        
                    
Don't forget to enable auto-renew for certs. To do this you should create cron job. Execute this command:

sudo crontab -e               
                    
Add the following line:

21 6 * * * certbot renew --post-hook "systemctl reload nginx"           
                    

It's time to tell NGINX to use HTTPS. Go to /etc/nginx/sites-available folder and modify the configuration file which we created before - example.com:


server {
       listen [::]:443 default_server;
       listen 443 ssl;

       server_name example.com www.example.com;
       root /var/www/example.com;
       index index.html;
       location / {
            try_files $uri.html $uri $uri/ =404;
       }

       ssl on;
       ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
       ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
}
                    
Congrats. You just enable the HTTPS protocol. What else? For example, you can enable client-side caching and gzip compression to improve website performance.