How I deploy a website in a few minutes (and how you can too)

How I deploy a website in a few minutes (and how you can too)

I code websites on an Ubuntu VPS from Contabo. I don't receive anything from Contabo for saying this, but I do love their VPSes and if you are looking for a cheap, good quality VPS, you should seriously check them out.

Step 0: Setup

To start, I am using:

  • A Linux Ubuntu VPS from Contabo;
  • code-server (open-source online VS Code) to write/save code to the server;
  • the in-built terminal in VS Code to run commands; and
  • an nginx web server set up and ready to go.

Step 1: Domain

Next, I need a domain to connect the website to. I register domains from Porkbun and TheNames.co.uk, but you can get yours from anywhere. (Check out TLD-list.com to compare providers)

Once I purchase a domain, I point the domain (root) to my server's IP address with an Address (A) record. I do this on the DNS settings on Cloudflare's free plan, as this gives me free SSL, but you can always just use your domain registrar's DNS settings to do this. I also find Cloudflare's DNS propagation to be faster.

Step 2: Starting the webserver

Before we can connect the webserver to the domain, we need to start it. I am not talking about nginx, but the actual code. I use Node.js with an Express server, so I can just start my server with:

const listener = app.listen(8080, () => {
  console.log("Listening on port " + listener.address().port);
});

where 8080 can be any port number you want.

Then I just go to ipaddress:8080 (e.g. 1.1.1.1:8080) and the website should show up! Now to connect it to that domain!

Step 3: Adding the domain to nginx

Great, now we can access it on the IP address, but what we really want is to be able to go to the domain name (e.g. eddiestech.co.uk) and see the site. Right now on the domain, you'll probably see a default nginx page or an error. Don't panic! This is expected behaviour with nginx. With nginx, you need to configure each domain to show what you want it to show.

We'll be using nginx as a reverse proxy, meaning nginx will take in the requests to the IP and direct the user to the right port of our IP address depending on the domain they are using to access the server.

"Reverse proxy", courtesy of H2g2bob (Wikimedia Commons), licensed under Creative Commons CC0 1.0 Universal Public Domain Dedication

(Disclaimer: I learnt the following commands and server configuration here: https://webdock.io/en/docs/how-guides/shared-hosting-multiple-websites/how-configure-nginx-to-serve-multiple-websites-single-vps. Webdock, however, does not own the copyrights to the commands or server configuration as these are general nginx configuration and Linux commands)

To start adding to the nginx config, you need to make a new file. I'll use nano, like so:

sudo nano /etc/nginx/sites-available/domainname.com.conf

with the following contents (where the domain/server name and proxy port are changed for your config)

server {
       listen 80;
       listen [::]:80;
       server_name domainname.com;
       location / {
           proxy_pass http://127.0.0.1:8080;
       }
}

Then make a copy to enable the domain in nginx:

sudo ln -s /etc/nginx/sites-available/domainname.com.conf /etc/nginx/sites-enabled/

Then check that the config is safe to deploy. Any errors will show.

sudo nginx -t

If everything is OK, reload the nginx server and your domain should show your site:

sudo service nginx reload

And that's it! That's how I deploy my websites!