Configuring a static website on ubuntu vps

Web Hosting

When you buy a web hosting, you are buying space on a server in a data center with a connection to the Internet. Your site’s files are stored on the server, and that server — or the network interface it’s connected to — has an IP address. An IP address is a set of numbers that routers, switches, and other servers use to find a particular server from the millions that constitute the internet.

Prerequisites

  1. A VPS with Ubuntu 16.04 or 18.04 configured.
  2. Basic understanding of Linux systems.
  3. Systemctl and systemd configured on VPS.
  4. You have a domain name available and is pointing to this VPS IP address.
  5. You have enabled port 80 and 443 for HTTP and HTTPS routing respectively.
  6. You can and know how to ssh into your VPS from the local machine.

Procedure

  1. First, we are going to configure Nginx on Ubuntu VPS.
  2. We are going to configure a static HTML page using Nginx.
  3. We are going to set encryption for our website using an SSL certificate.

Understanding basics of Nginx

Whenever you write a web application, for example, using Django you run those web servers using the framework defined commands. But the problem with this approach is that these commands are tested and developed only for the use of the development environment. Thus here comes the services which provide web servers for web frameworks in the production environment. Nginx and apache are one of the widely used web servers.

Nginx was created as a web server to solve the C10k problem. And, as a web server, it can serve your data with blazing speed. But Nginx is so much more than just a web server. You can use it as a reverse proxy, making for easy integration with slower upstream servers. You can distribute your traffic properly (load balancing), stream media, resize your images on the fly, cache content, and much more. The basic Nginx architecture consists of a master process and its workers. The master is supposed to read the configuration file and maintain worker processes, while workers do the actual processing of requests.

With the basics cleared let’s configure Nginx on our VPS, shall we? If you still have any doubt related to Nginx let me know in the comment section below.

Configuration steps

1. Nginx configuration

First, let’s update our local package index so that we have access to the most recent package listings. If it asks for updating the package index press y.

root@ubuntu:~$ sudo apt-get update

Once the apt-get update command has finished let’s install Nginx.

root@ubuntu:~$ sudo apt-get install nginx

After this command, apt-get will install Nginx and any required dependencies to our server. nginx will automatically configure it has a system daemon process using systemd. We can check the status of Nginx using the below command.

root@ubuntu:~$ systemctl status nginx

Output to verify if Nginx is working properly:

● nginx.service - A high performance web server and a reverse proxy server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
   Active: active (running) since Tue 2019-08-13 16:14:00 GMT; 4min 2s ago
 Main PID: 12857 (nginx)
   CGroup: /system.slice/nginx.service
           ├─12857 nginx: master process /usr/sbin/nginx -g daemon on; master_process on
           └─12858 nginx: worker process

Before doing the below step first check if port 80 ( which by default Nginx uses for routing HTTP requests ) is opened. You can use tools like ufw to check the status. If port 80 and 443 is not enabled then enable them on your VPS.

Now open your favorite browser and enter the ip-address or domain name

http://server_domain_or_IP

You’ll see a default landing page with the banner of Welcome to Nginx and some information below that.

2. Commands to control nginx service

Start the Nginx service:

root@ubuntu:~$ sudo systemctl start nginx

Stop the Nginx service:

root@ubuntu:~$ sudo systemctl stop nginx

Restart the Nginx service:

root@ubuntu:~$ sudo systemctl restart nginx

Enable the Nginx service:

root@ubuntu:~$ sudo systemctl enable nginx

Disable the Nginx service:

root@ubuntu:~$ sudo systemctl disable nginx

Reload the Nginx service:

root@ubuntu:~$ sudo systemctl reload nginx

3. Setting up a static HTML Page using Nginx

It’s time to create our Amazing HTML page. Copy the snippet below into a file on your local machine and name this file as index.html.

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Hello folks, This is our amazing website</h1>
  </body>
</html>

Important Note: I’ll be using example.com to denote the domain name you need to replace that with your real domain name.

SSH into your VPS and create an example.com directory under /var/www/ path.

root@ubuntu:~$ mkdir -p /var/www/example.com

Important Note: I don’t personally recommend to keep your website directory in /var/www/ path. You can keep your website directory wherever you want. Just keep in mind that you’ll need to change this path of root in the Nginx configuration below.

If you are using Linux / Mac as a local machine then you can use the SCP tool and for windows user, you can download and use WinSCP.

The SCP tool in Linux / Mac comes by default. Go to the path where index.html exists and copy-paste on that path. Note: Change the IP-address from the below SCP command to your VPS IP address. Change the host-name to your VPS hostname.

Sometimes due to the permission issues, you may be unable to copy the file to the directory. In that case, you can either grant the required permission or copy the code to /home/<hostname>/ directory on your VPS.

root@localmachine:~$ scp index.html <host-name>@<ip-address>:/var/www/example.com

Now go to the directory to /etc/nginx on your VPS using the below command.

root@ubuntu:~$ cd /etc/nginx/

Using your favorite text-editor let’s create and edit a configuration file that has the same name as your website name.

root@ubuntu:~$ nano sites-available/example.com

Let’s copy-paste the below content in your example.com configuration file.

Note: Don’t forget to change the server_name according to your domain name.

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 $uri/ =404;
  }
}

Let’s create a soft link for our website configuration inside the sites-enabled directory.

root@ubuntu:~$ ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/example.com

Now restart the Nginx web server to apply all our changes.

root@ubuntu:~$ sudo systemctl restart nginx

Go to your favorite browser and enter the IP-address or domain name. You will see that our amazing website is up and running.

4. Configuring encryption using Certbot

Now it’s time to protect our amazing website from those intruders. To achieve this objective we will configure an SSL certificate using Certbot service. This will encrypt all the communication happening on our website encrypted.

For configuring SSL there are 2 prerequisites.

So before proceeding please make sure that you have configured those records with your domain provider.

Now we will add the repository. You’ll need to press ENTER to accept.

root@ubuntu:~$ sudo add-apt-repository ppa:certbot/certbot

As we have added a new repository let’s update our local package index using the below command.

root@ubuntu:~$ sudo apt-get update

Once the above steps are done let’s configure a Certbot Nginx package.

root@ubuntu:~$ sudo apt-get install python-certbot-nginx

Certbot provides a variety of ways to obtain SSL certificates, through various plugins. The Nginx plugin will take care of reconfiguring Nginx and reloading the config whenever necessary.

root@ubuntu:~$ sudo certbot --nginx -d example.com -d www.example.com

The above command will run Certbot with Nginx plugin. We use -d flag to specify the domains for which we want to configure the SSL certificate.

For the users who are configuring Certbot first time, you will be prompted with the email id, terms, and services. Enter the email and accept those terms and services.

After this Certbot will communicate with Let’s encrypt server then run a challenge and verify if you control the domain that you have requested a certificate for.

Once the Certbot is successful it will ask you how to configure the certificate. Below is the example of the output you will get on your console.

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):

Now you can either select 1 or 2. Usually, I select 2 i.e. Redirect. This makes all the requests redirect through a secure https tunnel.

Once this is done Certbot will output with Fail or Success on your terminal. If anything went wrong then you can mention the error in the comment below. For those of you whose configuration is successful open your browser and enter your domain name [ https://example.com ]

Hurray!! We have configured a web server, hosted a static website and secured it using an SSL certificate.

If you liked my work give it a heart or if you think I missed something mention it in the comment section.

My Twitter and Github Handle.