Writing a Nginx configuration file to host HTML Website on Ubuntu.

How Nginx Maintain Its Directory Structure?

Usually, in Ubuntu, application configurations will be placed in /etc/ the folder. For Nginx, this is /etc/nginx/ by default. The main configuration file will be /etc/nginx/nginx.conf.

user  www-data www-data;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  \'$remote_addr - $remote_user [$time_local] \"$request\" \'
                      \'$status $body_bytes_sent \"$http_referer\" \'
                      \'\"$http_user_agent\" \"$http_x_forwarded_for\"\';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;
    gzip  on;
    gzip_disable \"msie6\";
  include /etc/nginx/conf.d/*.conf;
  include /etc/nginx/sites-enabled/*.conf;
}

view raw
nginx.conf
hosted with  by GitHub

At the end of the file check for these two lines.
sudo nano /etc/nginx/nginx.conf

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*.conf;

if missing append them.
Common configurations are placed at conf.d/ and site configurations are placed at  /etc/nginx/sites-available/*.conf . Some times, we need to enable or disable some sites according to the requirements that come. And at that situation, we do not want to move or remove the conf. file. So nginx follows a pattern of creating site configurations in  ‘sites-available/‘ folder and link a shortcut in the sites-enabled/ folder.

Create Your Index.Html

Let us create an index.html now. if you already have one file. just place it under 

/var/www/html/simple-site/ .

Create a directory named ‘simple-site‘ in ‘/var/www/html‘

sudo mkdir -p /var/www/html/simple-site/

Create an ‘index.html‘ file in ‘/var/www/html/simple-site/‘

sudo touch /var/www/html/simple-site/index.html

Give Read permission for all users in the system. [: OPTIONAL]

sudo chmod 0666 /var/www/html/simple-site/index.html

If you do not have an index.html right now, you can use this sample template.

wget https://gist.githubusercontent.com/jerinisready/a796e3f7a365b9dcca8e603b7d57ee81/raw/805c388c2daa7d92b1a013da60fec848c4e97de1/index.html -O /var/www/html/simple-site/index.html

How To Write The Basic Nginx Configuration File To Host Your Index.Html?

Let’s try creating a local domain name for our site just for fun ;-p .

Open file in your favorite editor. I am using nano here.

sudo nano /etc/hosts

Ubuntu uses this file to get IP mapping first, before it goes to look into an external network for any kind of matches.

# default
127.0.0.1       localhost    
# append this 
127.0.0.1       simplesite.local

Open file in your favorite editor. I use nano for the editing here.

sudo nano /etc/nginx/sites-available/simple-site.conf

This is the simplest configuration to host a folder the way it is.

server {
       listen 80;
       server_name simplesite.local;
       index index.html index.htm;
       root /var/www/html/simple-site/;
}

Use [CTRL] + [o] & [ENTER] to save the file; [CTRL]+[x] to quit nano.

Link the file into sites-enabled the directory.

nx/sites-available/simple-site.conf /etc/nginx/sites-enabled/simple-site.conf

Test nginx server configuration before restarting the server.

sudo nginx -t

This must be shown as the output:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

or else take note of the error, find the error line; fix it and try again. Once we get configuration error-free, restart Server.

sudo service nginx restart

Now go to your browser and go to “simplesite.local” and have the first experience of hosting your first site on your server.