Host website on Nginx with SSL

Host website on Nginx with SSL

You will learn how to host a website on an Nginx server using domain mapping and a free SSL certificate.

Nginx is an open-source web server used to run websites on the internet and can perform load balancing, and we can also use Nginx for reverse proxies. Every System administrator and DevOps engineer should be familiar with Nginx and its configuration files.

Step 1: Host a website on Nginx

Set up a server or VM.

I will be using an AWS instance for this article. You can go with DigitalOcean or Redswitches for Vm and physical servers or any other provider of your choice.

NOTE: Please note that if you are using a user account with limited privileges, you may need to use the "sudo" command when executing certain commands. However, if you have root access to your system, you can run commands without using "sudo".

Now SSH into your server, then update and install Nginx if you are using Ubuntu, then run:

sudo apt-get update
sudo apt-get install nginx

Check the Nginx running status by:

sudo systemctl status nginx

Open your browser and enter your server's IP address to check whether Nginx is running. If you see the expected page, then you can proceed with the next steps.

You need to transfer the static files of your website to the server

To run your website on the server, you must add its files to the server. To do this, create a directory with a name that corresponds to your domain name in the "/var/www" directory. For example, if your domain name is "openteam.store", you should create a guide called "openteam.store".

Once you have created the directory, transfer your website files to it using the "scp" command or a tool such as FileZilla FTP for file transfer.

Here I am using a free website template from Free CSS. Make sure to unzip file content under your domain name like below.

To serve your website, you must configure Nginx accordingly.

To configure NGINX for your website and enable it to serve content, you will need to inform NGINX about your website. This can be done by navigating to the /etc/nginx/ directory, where the NGINX configuration files are located.

Within this directory, you will find two important subdirectories: sites-available and sites-enabled. The former contains separate configuration files for each of your static websites, while the latter contains symbolic links to the configuration files that NGINX will use to serve your website.

To set up your website, you can create a new configuration file named "openteam.store" in the sites-available directory and add below code to that file. Once you have added the relevant configuration details, you can create a symbolic link in the sites-enabled directory to enable NGINX to serve your website using this file.

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

Execute the command sudo nginx -t to test whether there are any syntax errors in the NGINX configuration files.

When executed, NGINX reads the configuration files and checks for any syntax errors. If there are errors, NGINX will display an error message and specify the location of the error in the configuration file. If there are no errors, NGINX will display a message indicating that the configuration file test was successful.

Now creates a symbolic link (a pointer) from the NGINX "sites-available" directory to the "sites-enabled" directory.

This command creates a symbolic link named "openteam.store" in the "sites-enabled" directory that points to the configuration file for the website located in the "sites-available" directory. This allows NGINX to read and use the configuration file to serve the website.

Replace openteam.store with your domain name

sudo ln -s /etc/nginx/sites-available/openteam.store /etc/nginx/sites-enabled

Restart Nginx and verify if your site is loading or not.

sudo systemctl restart nginx

If the site fails to load, that means Nginx is loading default file located under cd /etc/nginx/sites-enabled

The default file is usually the default server configuration file that NGINX loads when no other server block matches the incoming request.

Remove default file by :

sudo rm default

Restart Nginx and then open your browser and enter your server's IP address to verify if your site is now accessible.

Step 2: Map your domain name to the new server

To map your IP address to your domain, you must access the DNS section in your domain registrar panel. The following steps will help to do so, I am using Cloudflare as an example. However, this process should be similar for other domain registrars.

As shown below, create an A record that maps your IP address to your domain.

Once you've created the A record, please be patient and wait for DNS resolution to take place. Only after this process is complete, you should try to access your website using your domain name.

Step 3: Enable HTTPS and install Letsencrypt SSL on Website

Running the commands below will install Letsencrypt for free:

sudo snap install core; sudo snap refresh core
sudo apt remove certbot
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot
sudo nano /etc/nginx/sites-available/example.com

Check if the UFW firewall is enabled, and if so, execute the following commands:

This will allow access to both HTTP (port 80) and HTTPS (port 443) connections through the firewall.

sudo ufw allow 'Nginx Full'

Certbot to obtain SSL/TLS certificates for the specified domains (example.com and www.example.com) and configures NGINX to use them.

sudo certbot --nginx -d example.com -d www.example.com

To check the status of the Certbot service responsible for automatically renewing SSL/TLS certificates.

sudo systemctl status snap.certbot.renew.service

The output of the command sudo systemctl status snap.certbot.renew.service indicates that the snap.certbot.renew.service is not currently running, and is instead in an inactive (dead) state.

However, it appears that the service is set up to be triggered by a timer called snap.certbot.renew.timer. This suggests that the certbot service will be automatically started by the system at regular intervals to check if any certificates need to be renewed.

To verify that the certificate renewal process is working correctly, use the following:

sudo certbot renew --dry-run

After applying SSL, refresh your browser and you should see a padlock icon indicating that the SSL certificate has been applied, along with details about the certificate.

Congratulations, your site is now hosted with an SSL certificate!