How to Host Static Sites using NGINX default

I write this as some sort of public note that I can refer to for when I need to do this again and I forget. Funny enough, this is what did happen as I did not write about it the first time I did.

One thing I have decided to do for 2020 is to document my processes a lot more. Here goes a thing on deploying static sites on a Virtual Private Server (VPS).

Well, is it DevOps? Hmmm… Okay, you decide!

So, I have a project I’m working on and I already bought the domain and have an account with Linode (which took a lot of hassle to purchase!) and I decide to put up a coming soon static template. I downloaded one from startbootstrap here.

Linode:

create a new server on linode

This article assumes that you already own a Linode account (Haha! I really hope you do!) Well, if you are on another service that provides a VPS, you can go to the section on setting up NGINX to host your static site.

On your Linode Dashboard Click Create will present you a drop-down menu with a couple of options

Create drop down

We are concerned with the section that says: Linode.

Schmuck! It is basically still a server. Just like Digital Ocean will call it a droplet. Well, server! This article doesn’t go into the explanation of what the other menu items represent. We focus on setting up the Linode (server) and hosting a static site 😁

Select the Linode to create a server.

I selected an Ubuntu 18.04 LTS as it is what I have been using since it was released and I’m very familiar and thus comfortable with it. You can choose a 16.04 or a 19.04 both LTS.

Pick a Region. I live in Lagos, Nigeria, hence I picked the UK. Furthermore, the product I’m building will be serving users in Nigeria for starters. This helps solve latency issues, hopefully… 😆

Select a Linode plan. Trust your decision on this one based off on your budget.

It is important that you set a Root Password for your server before you click Create on the right hand of the screen.

When you click Create, a server is made available to you for use!

Connect to your server via SSH

You are most likely to have done this over this terminal before. We are going to connect from your local machine via the terminal to the remote server that you have already created on Linode.

Click on Linodes on the left navigation menu bar to reveal a list of your servers.

Click on the server name that you just created. Click on Networking to see the IPv4 and IPv6 addresses. To ssh into your server you can use the IPv4 address or the IP address. Type the command in your terminal:

$ ssh root@<ip-address>

You are in!

Welcome to Ubuntu 18.04.2 LTS (GNU/Linux 4.15.0-50-generic x86_64)
* Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage
System information as of Sun Mar  8 17:52:27 UTC 2020
System load:  0.0                Processes:              95
  Usage of /:   13.1% of 24.06GB   Users logged in:        0
  Memory usage: 20%                IP address for eth0:    x.x.x.x
  Swap usage:   0%                 IP address for docker0: x.x.x.x
* Multipass 1.0 is out! Get Ubuntu VMs on demand on your Linux, Windows or
   Mac. Supports cloud-init for fast, local, cloud devops simulation.
https://multipass.run/
* Latest Kubernetes 1.18 beta is now available for your laptop, NUC, cloud
   instance or Raspberry Pi, with automatic updates to the final GA release.
sudo snap install microk8s --channel=1.18/beta --classic
* Canonical Livepatch is available for installation.
   - Reduce system reboots and improve kernel security. Activate at:
     https://ubuntu.com/livepatch
153 packages can be updated.
93 updates are security updates.
Last login: Sat Mar  7 13:48:35 2020 from x.x.x.x
root@localhost:~#

This is your own bare server that you can do anything that you so wish with.

We focus on setting up NGINX for this tutorial and we will go ahead and do just that.

NGINX

Install NGINX

$ sudo apt install nginx

At this stage, it is recommended to adjust your firewall settings for NGINX

Get a listing of the application profiles using Nginx service: ufw which makes it straightforward to allow Nginx access.

List the application configurations that ufw knows how to work with by typing:

$ sudo ufw app list

Output:

Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

As you can see, there are three profiles available for Nginx:

• Nginx Full: This profile opens both port 80 (normal, unencrypted web traffic) and port 443 (TLS/SSL encrypted traffic)
• Nginx HTTP: This profile opens only port 80 (normal, unencrypted web traffic)
• Nginx HTTPS: This profile opens only port 443 (TLS/SSL encrypted traffic)

It is recommended that you enable the most restrictive profile that will still allow the traffic you’ve configured. Since we will not configure SSL for our server yet, we will only need to allow traffic on port 80.
You can enable this by typing:

sudo ufw allow ‘Nginx HTTP’

You can verify the change by typing:

sudo ufw status

You should see HTTP traffic allowed in the displayed output:

Status: active
To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere                  
Nginx HTTP                 ALLOW       Anywhere                  
OpenSSH (v6)               ALLOW       Anywhere (v6)             
Nginx HTTP (v6)            ALLOW       Anywhere (v6)

The web server should already be up and running. You can confirm by typing:

$ systemctl status nginx

Output:

● 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 Fri 2018-04-20 16:08:19 UTC; 3 days ago
     Docs: man:nginx(8)
 Main PID: 2369 (nginx)
    Tasks: 2 (limit: 1153)
   CGroup: /system.slice/nginx.service
           ├─2369 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
           └─2380 nginx: worker process

To confirm that NGINX is up and running, enter the IP address into your browser’s address bar:

http://your_server_ip

Output:

Now we are set to host the static site!

HOSTING YOUR STATIC SITE

We are using coming soon static template. I downloaded one from startbootstrap here.

We will learn how to host the Static Site in the Part 2 of this article!

Thank you for reading this far!

And if you liked the article, then please leave me a Clap — after all it costs nothing ❤