Websites for the Curious Beginner

Introduction

For most people who want to build a website, their first option is a website builder. This is a great option for those without coding and technological knowledge, but it hides a lot of the intricate (and interesting!) details. The curious beginners may ask:

  • What is going on behind the scenes of a website builder?
  • How does typing a domain name take me to a website?
  • Can I do what these website builders do on my own?

The answer to the third question is yes! In this post, I’ll answer the first two questions (while pushing aside a lot of technical details) and walk through how I set up my own website.

Contents

What is a website?

A website is a collection of webpages that can be navigated by following hyperlinks. A webpage, put simply, is just a file. Specifically, it is an HTML file, which means it is in a format that your web browser can read and display. In reality, there are usually multiple files involved (CSS stylesheets, scripts, images, etc.) and more complex webpages also utilize server-side scripts and APIs, but the core of a webpage is the HTML file. So when you see “website,” just think of a collection of files.

How do you get to a website?

We now know that a website is just a collection of files. So what happens when you visit a website? How does the webpage (a file) get shown to you in your web browser? There are two key systems at play: a web server and DNS.

Web servers

A web server is a program on some computer that sends you files for a website. So when you visit a website, your web browser will send a request to that website’s web server. In response, the web server will send your computer the file(s) for the requested webpage.

Think of a web server as a concession stand. A worker sits at the concession stand window and waits for a customer. A customer walks up to the window and asks for some nachos. The worker goes to the kitchen, finds the requested nachos, and gives them to the customer. The analogies here are:

  • concession stand → a webserver
  • nachos → a webpage
  • customer → your web browser

Now, how does the browser know where the web server is? Consider how a customer might find out where the concession stand is. They can ask another worker, maybe a security guard or another stand merchant, and get directions to the concession stand. Similarly, your web browser asks another computer for directions to the web server. This other computer is known as a DNS server, which just means it utilizes DNS (the domain name system) to give you an answer.

DNS

DNS (the domain name system) is how your computer finds a web server for any website you visit. You give DNS a domain name, and it gives you the IP address of that domain’s web server. Using the IP address, your computer can directly ask the web server for the web page.

Suppose you type “google.com” into your URL bar. Your browser will reach out to the nearest DNS server and ask “where is the google.com web server?” If this DNS server knows where the google.com web server is, it will reply with its IP address. If it does not, it will ask another “higher-level” DNS server. The process continues until it gets to a DNS server that knows the location of the google.com web server, at which point its IP address will make its way back to your web browser.

Website walkthrough

There are three main steps to setting up a website. I’ll detail exactly how I completed each step when I set up my own website.

Set up a web server

We need to find a suitable computer that can host our web server, and then spin up the web server on that computer.

By “suitable,” I mean a computer with a public IP address that can be reached from the Internet. A computer on your home network may seem like a possible option, but there are a few issues:

  • Your computer likely doesn’t have a public IP address. Instead, your router has a public IP address and forwards traffic to your computer via NAT (network address translation). So additional configuration is required to reach your computer from the Internet (using port forwarding).
  • Your ISP may disallow hosting a public web server on your home network, especially if you have a residential plan. Check your terms of service to be sure.
  • Your ISP likely changes the public IP address of your router regularly. So additional tools and configuration is required to continually update DNS records (using Dynamic DNS).
  • Exposing your home network to the Internet may be dangerous, especially if you have weak firewalls, poor network segmentation, and not enough time to update and maintain web server software.
  • If your internet service or power is unreliable, then your web site will have more frequent downtime.

To avoid these issues, I opted to use a VPS (virtual private server). Think of it as your own computer that is out in the wild. It has its own public static IP address (it doesn’t change) and you have complete control over it, but you can only access it remotely (via a GUI or the terminal).

For my VPS, I got one through Hostinger. They offer a VPS with 1 CPU core, 4 GB of RAM, and 50 GB of disk for $15 a month. It is a little overkill for a web server (especially one without much traffic), but you can spin up whatever services you want on it since you have full control over the VPS. I installed Ubuntu on my VPS, and I access it via SSH (the terminal).

Once you have a suitable computer, the next step is to spin up a web server. I opted to use nginx, but any web server software will work. You can follow the nginx beginner’s guide here. You’ll need an HTML file to use for your web page, and there are many templates and tutorials available online. You can find the files on my web server on my GitHub.

Buy a domain name

Next, we need our own domain name. Since domain names need to be unique, there is an organization that oversees the assignment and transferring of domain names to individuals: the Internet Corporation for Assigned Names and Numbers (ICANN). There are several domain registrars that are accredited by ICANN from which we can buy a domain name. I opted for Namecheap and bought the grantmullins.net domain.

Configure DNS records

Finally, we need to link our domain name to our web server. When someone types our domain name into the URL bar, DNS needs to answer their request with the IP address of our web server. We can tell DNS which IP address to reply with by adding a DNS record. Likely using the same domain registrar from which we bought our domain name, we can add an A Record (or AAAA Record for IPv6 addresses). This record will link the IP address of our web server to our domain name (along with some other technical details). Instructions for adding an A Record on Namecheap can be found here.

That’s it! You can now set up your very own website. I hope this post gave you some insight into the workings of a technology that we use every day.

Appendix 1: Configuring nginx on Ubuntu

Once we have the IP address of our VPS, we can SSH into it and install nginx

apt install nginx

Ensure Nginx is running:

systemctl status nginx

Create the directory for the domain:

mkdir -p /var/www/grantmullins.net/html

This will create parent directories as needed (-p), in this case the grantmullins.net directory and the html directory.

chown -R www-data:www-data /var/www/grantmullins.net

This will grant ownership of http://grantmullins.net and all sub-files (-R) to the www-data user and group. This is the user/group used by nginx.

chmod -R 755 /var/www/grantmullins.net

This will grant read-write-execute permission to the www-data user (nginx), as well as read-execute permission to the www-data group and other users, to files and subdirectories (-R) of grantmullins.net.

We will store the webpage HTML file at /var/www/grantmullins.net/html/index.html. Next, we create a server block:

server {
  listen 80;
  listen [::]:80;

  server_name grantmullins.net www.grantmullins.net;

  root /var/www/grantmullins.net/html;
  index index.html;

  access_log /var/log/nginx/grantmullins.net.access.log;
  error_log /var/log/nginx/grantmullins.net.error.log;

  location / {
  try_files $uri $uri/ =404;
  }
}

We will store this file at /etc/nginx/sites-available/grantmullins.net. Finally we enable the site:

ln -s /etc/nginx/sites-available/grantmullins.net /etc/nginx/sites-enabled/

and reload Nginx:

systemctl reload nginx

We’ll use certbot to get a free Let’s Encrypt cert and edit our nginx configuration.

apt install certbot python3-certbot-nginx
certbot --nginx -d grantmullins.net -d www.grantmullins.net

Now, we’re able to use HTTPS with our web server.

Appendix 2: DNS A Record

In Namecheap’s dashboard, we can add two A Records:

Type: A Record, Host: @, Value: 203.0.113.1, TTL: Automatic
Type: A Record, Host: www, Value: 203.0.113.1, TTL: Automatic

The first record corresponds to grantmullins.net, and the second corresponds to www.grantmullins.net. Both will point to the same web server (located at 203.0.113.1). TTL (Time to Live) specifies how long DNS caches should store this record. “Automatic” tells each DNS server to use its default TTL value, but we could specify our own time instead (in seconds).