How 2 Build Website (ez way)

Hello gamer, welcome to very epic guide on how to make website by someone who's completely unqualified to teach anyone how to do anything.

This guide will use an AWS EC2 t2.micro instance running Ubuntu and Apache 2, although you can also use your own device such as a raspberry pi, but note that there will be a few extra steps with port forwarding and such.

If you get stuck hmu on discord @beluga#6796 or email me at jdixon2@mtu.edu


Prerequisites

Step 1: Creating an AWS EC2 Instance (Your Server)

So, your website needs a webserver to serve out the webpages like the hot pizzapies they are. One of the most common if not the most common way to do this is using a cloud service such as Amazon Web Services (AWS).

To start off, make an account if you don't already have one, then navigate to the AWS Console Home, go to Services > Compute > EC2

Once there, navigate to Instances.

Then, press the Launch Instance button at the top of the page.

This is where you'll choose your OS, for this example, I'll be using Ubuntu Server 18.04 LTS, which is a popular Debian-based Linux distribution that is generally easy to work with and will work nicely with the web server software we'll be using later. It also has a free version, which is ideal.

Next, you need to choose an instance type. For this example, I'll be using a t2.micro, for no other reason than it's free. It may only have 1 CPU core and 1 GiB of RAM, but it'll get the job done. Once you've chosen a type, press Configure Instance Details

The next page has many options that we won't need to change so, for now, move ahead to Add Storage

Now, you'll be choosing your secondary storage for your server. I recommend using a volume size of ~20GiB, which is what I'll be using in this example. Remember that this server will be running Linux and won't need as much storage to operate as a typical computer. Although it should be noted that this can be upgraded in the future.

Once you've selected your storage size, move on to Add Tags.

Here you have the opportunity to add tags to your instance, which is useful for organization when you have many instances but will likely not be needed for our purposes. For this example I won't be adding any tags. When ready, continue to Configure Security Group.

Next you'll need to configure your server's security group. This will decide what kind of connections are allowed to your server. Seeing as this will be a web server, we'll want to allow HTTP and optionally HTTPS traffic.

You'll notice that there should already be a rule allowing SSH. This will be how you connect to your server to administrate it, so make sure to not delete it.

To allow people to connect to your website, you'll need to add rules to allow HTTP traffic which uses TCP port 80. It's also recommended that you add a rule to enable HTTPS (TCP port 443), which will allow a secure connection to your website but will require additional configuration later on to get it setup. For the Source field, you'll want to allow traffic from any address, which should be the default 0.0.0.0/0, ::/0

Once you have everything properly configured, Move on to Review and Launch

Finally, review your settings and ensure everything is how it should be, then press Launch.

Note: You may see a warning about your security group being open to the world. This is because by default, it allows any address to connect to your server via SSH if they have the key. It's general practice that you change this to only allow certain addresses, such as your home IP address where you'll be connecting to the server, but seeing as most people have dynamic IP addresses that frequently change, this may not be convenient for many people. Remember that even if someone can try to get in, it's still unlikely if you take precautions.
In this example, I'll be allowing any SSH traffic for ease of demonstration.

Next, you'll be prompted to choose a key pair for connecting to your server. You'll have to provide this every time you use SSH to remotely connect to your server.

IMPORTANT: DO NOT LOSE THIS FILE!
This file will be your only way to connect to your server and without it you'll be locked out. It is also very important that you keep this file private as it enables anyone with it full access to your server.

Once you've saved your key file in a safe location, accept the acknowledgement and press Launch Instance.


Congratulations!

You completed step one and are now the proud owner of your very own AWS server! Your instance will take a few minutes to start up. You can view your instance in the Instances tab.



Step 2: Connecting to Your Server

For connecting to the server, we'll be using a tool called SSH (Secure SHell). which is a command line utility that allows remote access to a command line interface on another host.

Before you begin, you'll need some information.

  1. The location of your key file.
  2. Your server's public DNS.
  3. The username you'll use to login to your server.

To find your server's public DNS, select your instance and find where it says Public DNS (IPv4). It should look something like ec2-12-34-56-78.us-east-2.compute.amazonaws.com.

If you're using Ubuntu, the default username is ubuntu, otherwise, you'll have to find out what the default username is for your operating system/distro.

To begin, open a terminal with SSH abilities, such as Windows command prompt, Powershell, BASH, or ZSH. In this example, I'll be using Powershell, although the command syntax will be pretty much the same for all of them.

Once you have a terminal open, use the command:
ssh -i [KEY FILE] ubuntu@[PUBLIC DNS]

When prompted, type "yes" and press enter.

You should then be connected to your server and presented with a login banner.

Congratulations!

You completed step two and have remotely connected to your server! You can now take the time to familiarize yourself with your new server and move on to the next step when ready.


Step 3: Basic Updates

The first thing we'll do is install any updates. This can be done using the commands:
sudo apt-get update
sudo apt-get upgrade

This may take a while.

Tip: Using sudo before a command will run the command as the root user, which has the highest permissions on the system. You can use this when performing actions that are restricted for normal users. But be careful, running commands as root can be dangerous as they can modify anything and everything on the system, meaning there's a lot of room to break things.

That's it for step 3! Now on to the fun part...


Step 4: Installing the Apache Webserver

Now it's time to install the web server. In this guide, we'll be using Apache 2.

To install apache, use the command:
sudo apt-get install apache2

When prompted, type "Y" and press enter.

When finished, you can check the status by running the command:
sudo systemctl status apache2.service

Now for the best part...

Open a web browser and enter your server's public IP. You should see a page like this

Note: Remember that your private IP will be different than your public IP and can be found on the instance panel where you found the public DNS.


Congratulations!

You completed step four and have a webserver able to be connected to by anyone in the world!



Step 5: Editing Your Website Pages

By default, if you're using a Debian-based distro like Ubuntu, the root directory for your website will be /var/www/html/. Other distros may have it at /srv/www/htdocs/.

Now, you can navigate to the root directory and replace the default index.html file with your own webpages. The default setup is that the filesystem hierarchy from the root directly corresponds to the path in the URL.

For Example:

/var/www/html/ = https://www.example.com/
/var/www/html/directory/ = https://www.example.com/directory/
/var/www/html/another-directory/ = https://www.example.com/another-directory/
/var/www/html/index.html = https://www.example.com
/var/www/html/webpage.html = https://www.example.com/webpage.html

When a user requests a webpage that corresponds with a directory in the filesystem, it'll look for a file named "index" at the root of that directory.


Step 5.1: Remote File Transfer

For transferring files from your computer to the webserver, I recommend using an (S)FTP client like FileZilla which has a GUI. But you can also copy files over using the command line with the command:
scp -i [KEY FILE] [LOCAL FILE] [USERNAME]@[HOSTNAME]:[DESTINATION]

Note: When moving directories, you have to specify the -r flag.

Example:
scp -i ~/.ssh/key.pem ./my-file.html beluga@aws-server:/home/beluga/

Note: By default you won't be able to scp files directly into the webroot without permissions so you'll have to copy them to another directory then move them into the webroot on the server itself with elevated permissions.



Congratulations!

Have I said that too much? Eh, I don't care; You can now edit your website to include whatever you want!



Step 6: DNS

Right now, people can only connect using your public IP address or your instance's public DNS, which isn't very memorable, or ├Žsthetic, let's assign it a domain name.

First, you need to get a domain name from a registrar. Popular registrars include: GoDaddy, namecheap, HostGator, BlueHost, and Domain.com. Prices can range anywhere from $5 to well over $5000 depending on the name and TLD.

For this example, I'll be using namecheap, although the process should be about the same for all of them.

First, find where you can configure your DNS records for your domain. For namecheap, that's in Manage > Advanced DNS > Host Records

Then, create a new 'A' record that will point to your server's public IP address.

On namecheap, the host field indicates the subdomain (i.e. www.domain.com). The host '@' indicates that it's the naked domain (i.e. domain.com). Typically, webserver's are put in the "www" subdomain, although this doesn't really matter. I personally like having the www so I'm going to make my A record point that to my web server and set the naked domain as an alias for the www subdomain, which just refers any query for the naked domain to the www subdomain's A record.

Note: You may want to assign more than one domain name to the same webserver as it can lead to confusion and could become annoying later on when using SSL/TLS certificates.



Congratulations!

You have a fully functioning website!

Now anyone in the world with internet access can go to your website and see whatever you wanna show them.

Some future ideas to improve your website: