Customising an NGINX Site
We are going to create a custom .conf file and point it to a new location on your the server where the site files will live.
In the previous section, we took note of two locations: /etc/nginx/sites-enabled/ where the .conf file is saved, and /var/www where the default html files are saved.
Before we create the custom .conf file, we must create the html location that it will serve the website files from. ### Create your website
We are now going to make a simple index.html page at the path that you specified in the .conf file, e.g. /var/www/yoursite from above.
cd /var/www
Next make a new directory to match the name of your site that you set as the root path:
sudo mkdir <yoursite>
Change directory into that new folder:
cd <yoursite>
Now make your index.html using the touch command:
sudo touch index.html
Open it up to edit in your command line text editor of choice. We will use nano:
sudo nano index.html
You can copy this starter index.html page for a quick test:
<!DOCTYPE html>
<html>
<head>
<title>Your Site Title</title>
</head>
<body>
<p>
The content of your website.
</p>
</body>
</html>
Create a custom .conf for you site
Now we will navigate to the where the NGINX config files are saved and create a new one to point to the new custom html website we just made.
Make a copy of the default file and rename that copy. In the below example, remove the triangle brackets and write the name you want to give your site. For this guide we will use <yoursite> as a placeholder.
cd /etc/nginx/sites-enabled/
cp -i default.conf <yoursite>.conf
Note that the new file is created in the same directory. We will now move the default config file to sites-available which is where you can keep any configuration files for sites that are not currently active.
mv -i default.conf /etc/nginx/sites-available
[!NOTE] Notice that we are using the
-ioption after the copy and move commands. This makes the command interactive and asks the terminal to check before executing in case you made any mistakes.
Editing your custom .config file
Make sure your in sites-enabled, lets edit our .conf file:
nano <yoursite>.conf
server {
# 80 the default port for listening for http traffic
listen 80 default_server;
listen [::]:80 default_server;
# the root folder that your website will be served out of
root /var/www/yoursite;
# Allowed file formats for the index / home page
index index.html index.htm;
# The server name that you would set
server_name yoursite.local;
# A location directive for any incoming URI requests
location / {
# First attempt to serve request as file, then as directory,
# then fall back to displaying a 404 not found error
try_files $uri $uri/ =404;
}
}
You can now remove the default config:
rm default
Creating a symbolic link
As you start creating and hosting several projects, you should work on editing all your files in /sites-available folder. NGINX looks for the configuration files in /sites-enabled but we do not want to duplicate our files. Instead we will create a symbolic link (also called a symlink) to point to the file in /sites-available.
First, lets make sure we move our <yourproject>.conf to /sites-available:
cd /etc/nginx/sites-available ls
mv <yourproject>.conf /etc/nginx/sites-enabled
Now lets make create the symbolic link. ln is the link command and the -s option specifies that it should be a symbolic link.
sudo ln -s ../sites-available/<conf-name>.conf ./sites-enabled/
Restart and reload nginx
We need to reload NGINX to apply the changes we made :
nginx -s reload
To see the nginx options you can always do the help command:
nginx -h
Test that your site is up and available by going to the IP of your pi in your web browser! You can now edit the html file with new content to update what content is being served by your Nginx web server.