DEV Community

allen-woods
allen-woods

Posted on

How to Setup a Domain on VPS: From Registration to SSL Certification

Server Room

There is Never a "Right" Time

This article is meant for those who have been thinking about hosting their first domain, but may be holding back. The right project will come along, the right moment will line up, but not yet.

After going through this process, I can tell you that there is no better time than right now to get started hosting your first domain.

"The best way to predict your future is to create it."
Abraham Lincoln

This walkthrough is geared toward those who choose to do things manually and "learn by doing". If this is not your approach, you can still follow along using the easy one-click versions of what I discuss.

Disclaimer: This tutorial is written from a Mac user's perspective.

There are many different ways to achieve the same outcome, but for the purposes of this article we will be discussing domain name registration through Namecheap and VPS hosting through DigitalOcean.

Ready? Let's go!

What's In a Name

The hardest part of this entire process is unfortunately one I cannot help you with -- choosing your domain name. While I can't help you come up with the exact name itself, I can share the advice I have received to help make it easier for you.

Personal or Professional?

To start off on the right foot, we must be direct: what kind of programmer are you?

Are you career focused and want to build and maintain a selection of apps as a resume pitch toward landing a role?

Are you passionate about code and find yourself constantly diving into projects beyond your assignments or daily standups for the thrill of understanding and learning new things?

The difference comes down to commitment and time scale — both important factors that will guide how to choose your first domain name. For example, a personal site may adapt to changes within your career path while a professional site is more likely to represent a specific narrative within a set domain.

  Personal Professional
Based on Your legal name or nickname. Distinctive, memorable identifier.
Best for Developers who view tech as a chapter in their overall career path, rather than a passion. Aspiring Engineers who are passionate about code itself.
Typical use Resume pitch while job searching. Showcasing an ongoing body of work to build an online presence and curated brand image representative of your passion for code.
Note Can be used by passionate programmers to build an Asch phenomenon surrounding their online presence, but works best with distinctive legal names or nicknames. Harder to come up with and often harder to register.

The ideal case would be to have both types of domains as a "catch all" approach, but I would recommend starting with what your passion level is and use that to pick one domain to start with.

Checking Availability

Many, many, many times I have had a perfect idea in my head for a domain name, only to find out that it isn't available. This used to mean encountering landing pages on the sites I went to check for, but I have recently discovered that just because a site appears to be unregistered does not mean that it's unregistered.

This brings me to our first axiom:

A registered domain is more expensive than an unregistered domain.

Unless you really intend to make back your investment and can afford to pay the asking price, try to purchase an unregistered domain whenever possible.

To make sure your site is actually available instead of privately parked, I recommend taking the following steps:

  1. WHOIS (ICANN)
    • Look to see if the domain is registered by anyone.
  2. Namechk
    • If the site is available, look to see how much reach that name would have across social media platforms.

Once you have settled on your passion level and your domain name of choice, it's time to commit and make the purchase.

If you have read this far, you know that you're ready. Let's do it!

Registration

The domain name broker I went through was Namecheap.com. I highly recommend them when registering a domain because of how incredibly straight forward and easy to follow the overall process is.

That said, there are some things we should go over in terms of what you need to purchase and what you don't need to purchase.

What to Purchase

You should only be paying for or selecting the following items when registering your domain:

  • Domain name itself.
  • WHOIS Guard

That last one is important. WHOIS Guard effectively protects your email, address, and legal name from WHOIS searches. Without this selected, your personal information would not be anonymized and would be publicly available.

When entering "webmaster" type emails later in this guide, you can use the special "WHOIS" protected email address you are provided by this service instead of an established webmaster email address to remain anonymous.

Namecheap does make an SSL certificate available to you that lasts for a period of one year, but this is not required in order to setup HTTPS on your domain. (I learned that the hard way so you don't have to.)

We will cover how to configure Certbot to generate an SSL certificate through Letsencrypt.org toward the end of this article.

You will not really need to setup anything more advanced than this to get started. Now that your domain name is newly registered, it may take up to 72 hours for the registration to be completed. In the mean time, let's set up our hosting!

Creating A Droplet on DigitalOcean

I researched many hosting providers before I committed to a decision. The primary providers that I ultimately chose from were:

I selected DigitalOcean because their name kept getting mentioned and recommended by other devs in threads on web-development subreddits and because their free documentation has so much depth.

I am very much a "learn by doing" type of person and the predominantly DIY nature of DigitalOcean's services felt like a right fit with what I wanted — to develop skills by doing things myself.

That said, this can feel daunting for one reason in particular.

Linux

It takes a certain kind of person to make it through this tutorial. To put that more succinctly, you have to feel slightly more excitement than fear when you open bash and only see this in your terminal:

$
Enter fullscreen mode Exit fullscreen mode

That is not very much to go on. Luckily, there are tons of resources online regarding the use of Linux and the community is very welcoming and supportive.

This brings us to our second axiom:

The more dynamic your skill set is, the more valuable you are.

You don't need to already know Linux to follow along, but placing yourself in the position of having to learn it should be bundled into your desire to embark on this experience.

Being able to navigate and use Linux, as well as being able to say that you manage your own VPS, is better than not knowing those supportive technologies first-hand.

For now, I have journeyed long into these rabbit holes and done all the research for you. Onward, to the command line!

Commanding the Line (Ubuntu)

There are a lot of Linux distributions — known as "distros" — but we will be focusing on the server version of Ubuntu Linux for this walkthrough.

Linux is versioned in varying levels of granularity all the way down to a frequency of as often as nightly build changes. However, the version type that we want to use on our VPS is something called Long Term Support or LTS for short.

As of this writing, the current LTS release is Ubuntu Server 18.04, released in April of 2018. This is what we will select to have pre-installed on to our VPS.

LTS versions remain dependable for a period of up to two years, requiring far fewer updates to your server and less maintenance to perform. We should probably take this opportunity to go over our third axiom:

Always use the LTS version.

There are not just LTS versions of Linux, but NodeJS and other frameworks as well. Ideally, you should aim to identify and use an LTS versioned stack whenever possible to reduce pain points maintaining a project. Alternatively, you can create Docker containers for your applications.

If you would like to know more about Docker, please see the following article by one of my peers at Flatiron School Seattle:

Docker Basics by Matthew Brophy

This is a lot to go through before getting started, so let's take this a step at a time. To start things off, we need to do some things on your local machine first.

Using Secure Shell (SSH)

Everything we do regarding how we interact with our VPS should be encrypted to remain secure. To accomplish this, we use Secure Shell, or "SSH" to connect. In order to prepare, before even purchasing a VPS on DigitalOcean, we need to generate a new SSH key pair.

Open terminal on your computer and enter the following command:

ssh-keygen -f ~/your-domain-name-here-rsa -t rsa -b 4096
Enter fullscreen mode Exit fullscreen mode

For more, see: SSH Keygen

Be sure to replace your-domain-name-here with the name of your newly registered site.

If you are prompted that creation of the new key will overwrite an existing key, cancel. Agreeing to overwrite an existing key is a permanent and destructive act that will erase the overwritten key forever.

Now that we have the keys we need to create our Droplet on DigitalOcean, let's start building our castle.

Choosing a Droplet Type

You should generally aim for the amount of hosting you need based on your comfort level, available time, budget, and the demands of your project(s).

I would also say that there should be some element of incentivized participation trough economic pressure, whereby increased use of the VPS is insured as a result of "having to pay for it."

In my case, I knew that I wanted to build apps that would use computationally more expensive functions for some things, as well as the need to stream data in real time to achieve some of the results I wanted to accomplish. To that end, I measured twice and cut once by getting their $20 a month option.

At the time of this writing, this is what DigitalOcean offers on their $20 VPS tier:
4 GB Memory, 2 vCPU, 80 GB SSD, 4 TB Transfer

Select the Droplet configuration that meets your criteria. Follow the setup procedure, but once you see an option button titled "Add SSH Keys" appear on screen, wait until you have read the next step before continuing.

Binding SSH

Back in your bash terminal, go ahead and type the following command:

pbcopy < ~/.ssh/id_rsa.pub
Enter fullscreen mode Exit fullscreen mode

This will copy your personal SSH key to the clipboard, so don't select and copy any text until you have attached this key to your Droplet.

Click the "Add SSH Keys" button on DigitalOcean and paste the key's text into the form that appears. You should see a very large hash of encrypted data when pasting the text if this is successful.

For more, see: How to Upload SSH Public Keys to a DigitalOcean Account

The reason we are binding the SSH key to our Droplet in this way is because it does three things that are very important.

  1. It disables password authentication at time of creation for the Droplet.
  2. It makes all use of the Droplet secure over SSH from the start.
  3. It prevents email delivery of any login information related to our VPS.

This makes sure that people can't even attempt a password access on the VPS at the moment it becomes activated, much less before we are able to login.

By default without an SSH key attached, the VPS would have password authentication enabled, which is less secure and requires manual deactivation. It also would require us to add the SSH key in a far less easy manner, although DigitalOcean does allow you to add an SSH key from the browser while in the managing editor for the Droplet itself.

The Importance of IPv6

Make sure that you have selected the checkbox for "IPv6" on your VPS options. This will generate a longer IP address that will allow your server to be accessible once the older IPv4 standard is phased out years in the future.

Many technologies provided by DigitalOcean, as well as web technologies in general, benefit from the availability of an IPv6 connection, so it's a nice option to have activated.

At this point, we are ready to communicate with our VPS for the first time and get down to business. Be sure to copy down your IPv4 address from DigitalOcean and prepare to login to your server!

Becoming a Superuser

For the sake of clarity, I will be condensing the necessary commands into coherent blocks. For those unfamiliar to the syntax, all lines beginning with a # symbol are descriptive comments, not bash commands.

ssh root@<your_server_ipv4>
# Confirm "yes" to connect.

adduser <your_first_name>
# Type a strong password and skip everything else.

usermod -aG sudo <your_first_name>
ufw app list
# You should see OpenSSH listed.

ufw allow OpenSSH
ufw enable
# Type yes to confirm.

ufw status
# You should see OpenSSH and Open SSH (v6) ALLOW from Anywhere.

rsync --archive --chown=<your_first_name>:<your_first_name> ~/.ssh /home/<your_first_name>
Enter fullscreen mode Exit fullscreen mode

In your bash terminal press Command+T to create a new parallel tab. Remain logged into the "root" user in the first terminal tab. This is important in case anything goes wrong during the configuration of your user account.

Inside the parallel tab, enter the following:

ssh <your_first_name>@<your_server_ipv4>
Enter fullscreen mode Exit fullscreen mode

If you are logged into your user account in the second tab, you can now toggle back to your "root" session and continue. Enter the following in the "root" user tab:

sudo nano /etc/ssh/sshd_config
# Press the down arrow to scroll the editor until you see PermitRootLogin.
# Edit the line to read: PermitRootLogin no

# Press the down arrow to scroll the editor until you see PasswordAuthentication.
# Edit the line to read: PasswordAuthentication no

# Press Ctrl + X, then Y and Enter to save and exit the editor.

sudo systemctl restart ssh
Enter fullscreen mode Exit fullscreen mode

Switch back to your user account tab and enter the following:

logout
ssh <your_first_name>@<your_server_ipv4>
Enter fullscreen mode Exit fullscreen mode

If all has gone well up until this point with no snags, you can now safely logout of the "root" user terminal and close all terminal tabs.

To briefly summarize what we just did:

  • We gained access to our VPS.
  • We created a new user.
  • We gave our user account the same powers as "root" (sudo).
  • We raised the firewall against everything except for SSH logins.
  • We allowed our user account SSH access.
  • We removed the "root" user from being able to login again.

The reason we removed the "root" user is because most attacks on a server will come through the "root" login. By preventing this user from accessing the system, we add a layer of security to the system.

Now that our user account has been granted the same powers, we don't need "root" to be accessible anymore.

For more, see: Initial Server Setup with Ubuntu 18.04

Setting Up the Server

Now that our VPS is secured, it's time to get everything up to speed in terms of system updates and necessary software. Log in using your user account and enter the following commands:

sudo apt-get update
sudo apt-get upgrade
# Press Y and Enter to confirm.

sudo apt-get install curl imagemagick subversion wget lynx iperf rsync
# Press Y and Enter to confirm.

sudo apt-get install unrar unzip iptraf nmap tcpdump sysstat zip
# Press Y and Enter to confirm.

sudo apt remove cmdtest
# This might say cmdtest doesn't exist, but better to be sure.
# We remove this application to allow for installation of Yarn.

sudo nano ~/.bash_aliases
# Inside the editor, add this line (without leading # symbol):
# alias node=nodejs
# Press Ctrl + X, Y and Enter to save and exit the editor.
Enter fullscreen mode Exit fullscreen mode

For more, see: How to Enable .bash_aliases

A Word About NodeJs on Ubuntu
The way that the alias for NodeJS works on Ubuntu Server, a separate alias called "nodejs" must be made to point to the NodeJS install on the VPS.

The workaround we have used in the last file edit process above is to use a new alias named "node" to point to the "nodejs" command, thereby patching the node command to be canonical with the local environment. |

The ground work is nearly complete for serving our first page over HTTP. We only have two more major installs to carry out.

Installing Nginx

If you are hosting a more advanced project using a stack, such as MERN or similar, you will need to do further reading on these topics in addition to this walkthrough. For now, we just want to serve a static page over HTTPS. This is our first time going through this process, so we will stick to the basics.

The HTTP server that our VPS uses is called "Nginx". The installation is the following series of commands:

sudo apt update
sudo apt install nginx
sudo ufw app list
# The output should show new options for Nginx Full, Nginx HTTP, and HTTPS.

sudo ufw allow 'Nginx HTTP'
sudo ufw status
# The output should show ALLOW from Anywhere for Nginx HTTP and Nginx HTTP (v6).

systemctl status nginx
# The output should include "Active: active (running)".
Enter fullscreen mode Exit fullscreen mode

For more, see: How To Install Nginx on Ubuntu 18.04

Now that we have Nginx setup, we need to have something to serve and a way to serve it. Nginx is a tool, but it doesn't run by itself. We'll need to setup a server block for it to run, as well as upload our "hello world" to the server.

Uploading Your Hello World

It's time to place your first static page on the VPS itself. Follow this sequence in your VPS login terminal session:

sudo mkdir -p /var/www/yourdomainname.com/html
# Be sure to replace "yourdomainname" with your domain name.

sudo chown -R $<your_first_name>:$<your_first_name> /var/www/example.com/html
sudo chmod -R 755 /var/www/yourdomainname.com
Enter fullscreen mode Exit fullscreen mode

Inside of a second terminal tab pointing to your local machine, enter the following command to transfer the local root folder to the VPS root folder being used by Nginx:

scp -r /local/root <your_user>@<your_ipv4>:/var/www/yourdomainname.com/html
Enter fullscreen mode Exit fullscreen mode

For more, see: Copying a Directory with SCP

If this is successful, you should see your files uploading into the server. Great, your files are on the internet now. But using an IPv4 address to reach them isn't the most attractive option. Let's fix that.

Binding Your Domain to Your Host

By default, Namecheap will park your domain name on their nameservers. These addresses associate your registered domain as an idle "parking" page that shows a form letter message suggesting your domain could be for sale.

We need to change these nameservers to reflect our VPS on DigitalOcean, as well as bind our domain name to the IP of the VPS itself. Let's go through the steps needed to complete this.

Nameservers, IP and SSL

Log into your Namecheap account and click "Manage" on your domain name. Once inside of your dashboard, scroll down to "Nameservers" and enter the following addresses:

Nameservers
ns1.digitalocean.com
ns2.digitalocean.com
ns3.digitalocean.com

Scroll down until you find an option named "Parking Page" and disable it. This will unlink the domain from the template saying "this site might be for sale" that is automatically hosted by Namecheap.

Now the domain name will point to the nameservers on DigitalOcean where the actual data of your VPS will be located and served to your visitors. The second half of binding will be carried out on DigitalOcean. Log into your DigitalOcean account and add your domain to your dashboard.

Inside of this domain's management features, you will need to create the following records:

Type Hostname Value TTL
CAA www.yourdomain.com authorization: letsencrypt.org [issue] 3600
AAAA www.yourdomain.com directs to IPv6 3600
A www.yourdomain.com directs to IPv4 3600
NS www.yourdomain.com directs to ns1.digitalocean.com 1800
NS www.yourdomain.com directs to ns2.digitalocean.com 1800
NS www.yourdomain.com directs to ns3.digitalocean.com 1800

Binding to your VPS occurs by choosing your Droplet in the dashboard of each record entry. The IPv6 and IPv4 addresses are entered for you automatically by entering the @ symbol in those fields on DigitalOcean. Additionally, the issue flag is a dropdown menu selection within the DigitalOcean dashboard when filling out this section.

What we have just done is complete the link between the domain we registered and our VPS, as well as enable SSL certification through Letsencrypt.org. But enabling the possibility of SSL certification is not the same as being certified. Let's configure and generate an SSL certificate for our "hello world".

SSL Certification

There are two steps to completing this process. Installation of Certbot, and generation of a SSL key pair. This proved to be the trickiest part for me during my experience setting this up on my VPS, but lucky for you I am able to set you off on the right path to make this as easy as possible.

Installing Certbot

Letsencrypt.org provides a utility for issuing and renewing SSL certificates using OpenSSL. From the VPS login session terminal, the installation process is as follows:

sudo apt-get update
sudo apt-get install software-properties-common
sudo add-apt-repository universe
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python3-certbot-dns-digitalocean
sudo certbot --nginx
sudo certbot -a certbot-dns-digitalocean -i nginx -d "*.example.com" -d example.com --server https://acme-v02.api.letsencrypt.org/directory
Enter fullscreen mode Exit fullscreen mode

For more, see: Nginx on Ubuntu 18.04 LTS

Now that Certbot is installed on the VPS, we must generate and use an SSL key pair to enable it. Follow these commands to complete our SSL certification:

sudo apt install python-certbot-nginx
sudo nano /etc/nginx/sites-available/yourdomainname.com
# Locate lines that begin with: server_name
# These lines should read: server_name yourdomain.com www.yourdomain.com;
# If this is not how it reads, update the lines to match.

sudo nginx -t
# The output should show no errors.

sudo systemctl reload nginx
sudo ufw status
# Output should show ALLOW from Anywhere on OpenSSH and Nginx HTTP

sudo ufw allow 'Nginx Full'
sudo ufw delete allow 'Nginx HTTP'
sudo ufw status
# Confirm that Nginx HTTP has been disabled from the ALLOW from Anywhere list.
Enter fullscreen mode Exit fullscreen mode

If all has gone well, the following command will be the last step in the process:

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com
Enter fullscreen mode Exit fullscreen mode

For more, see: How To Secure Nginx with Let's Encrypt on Ubuntu 18.04

Conclusion

This has been quite the journey. If you have paced yourself and made it through this process, give yourself a standing ovation because this really is a rather "involved" undertaking.

The main point of this article is to show how important it is to set yourself ambitious but obtainable goals. Yes, it was difficult and complicated, but the achievement of having accomplished something that pushed you past your prior perception of your personal limits makes it all worth it.

I hope that anyone reading this from a novice perspective comes away from this walkthrough with a greater sense of confidence and the beginning of a whole new set of skills. I had no experience in this, just as you might not have. Yet, here we are.

There is no telling how far you will go from here, but the odds are good it will be very far. You have already begun to master an important concept that a famous quote sums up nicely:

Whether you believe you can do a thing or not, you're right.
— Henry Ford

Happy hosting!

If you have questions, I will do my best to answer in the comments.
You can visit my own humble "hello world" of a random doodle at The Supertask.

Top comments (2)

Collapse
 
eduardonwa profile image
Eduardo Cookie Lifter • Edited

wow thanks now i need to figure out how to use the SSL i purchased on namecheap, because i need to use that cert on forge i guess lol

Collapse
 
darshana0611 profile image
Darshana0611

@allenwoods This is an awesome post . Do check for our VPS hosting plans on Webnexs VPS servers and Webnexs' Cloud VPS