This summer I set a goal to learn to make and deploy websites and after tons of Googling, I built my personal website and this blog to practice my skill.

Here's what I find most fascinating: Even though I just learned some very basic web development skill, this website is not any more or less real compare to the one made by the most skillful web developer, or the most resourceful company.

As a programmer, it's perhaps no surprise that I love building things. Since you are here, I suspect you are too! If that's the case then you came to the right place! In this quick guide, I'll help you build a static personal site.

What you will need

1. A computer that is connected to the internet.
2. Preferably a Unix or Unix-like system (e.g. Linux, OSX)
3. I will also assume you have some basic knowledge of computer science (let say, a semester of CS at university)
4. I anticipate it will take a few hours to complete this guide so make yourself a coffee and pick a good playlist. =)

Ok, enough of me talking, let just jump straight to it!

Step 0: Get Github Student Developer pack (Optional)

If you are a student I strongly encourage you to check out the
Github developer pack because you will pretty much get free money to help you learn to program! Just follow the link and fill in the required details. The verification should be done in a few minutes.

When you are done, go take a look at the perks you can get as a student! You will want to pay extra attention to Digital Ocean and NameCheap.

Step 1: Rent a cloud server

We are going to use Digital Ocean for this service (Another popular alternative is Amazon Web Service). Make an account and select Create > Droplet (Droplet is Digital Ocean's name for a server.).

Here you will notice that you have plenty of varieties to choose from. For our purpose we will go with:

• Ubuntu 16.04 x64
• 1 GB Memory
• 1 CPU
• 25 GB SSD
• 1000 GB data transfer.
• Singapore data center - if you are in Australia like me =)

Don't worry about the spec, we can always up/down grade it later.

ssh root@your_ip_addr

You should now be prompted to enter your password, which you should receive from through your email.

If you got in then Congratulation! You just visited your remote server in Singapore!

One last thing before we move on to the next step. It's usually not recommended to use your root account on a day-to-day basis. We will instead make a new user and provide it root or "sudo" privilege.

adduser your_username

Once you did that, add your new user to the "sudo" group with this command:

usermod -aG sudo your_username

passwd your_username 

Use su (switch user) to login to your newly created user.

su your_username

Step 2: Get a domain name

I personally recommend NameCheap, mostly because I'm using it, and they give a free .me domain as part of the Github developer pack. Another very popular website to register a domain name is Go Daddy.

All that is left to do is to purchase a domain that is available and you are good to go! (If you are eligible, don't forget to claim your free .me domain from the Github dev pack)

Step 3: Set up your DNS record

This can be done in your domain registry, in our case, Namecheap. Most other registries will have very similar ways to achieve the same result.

Go to your dashboard, select manage then Advanced DNS. Here we will add 2 new records by clicking add new record:

Keep in mind that it might take up to 48 hours (usually < 30 mins) for your change to propergate throughout the ISP around the world. But once that is done, you should be able to visit your website with your.domain.

Let's move on to the next step while we wait.

Step 4: Install a web server on to your remote machine

But first:

We'll use Nginx (pronounce: "Engine X") as our webserver. It's perfectly fine to use other webserver such as Apache, but I'd never work with that so Nginx it is! ;)

First of all, use ssh to access your server. Once that is done installing Nginx is super easy! Just type these on the console:

sudo apt-get update
sudo apt-get install nginx

And we got our web server!

There might be one last thing to do before we get to see if our webserver is working. The server we got comes with a firewall called ufw which might block the webserver from functioning properly.

Use this command to check:

sudo ufw status

If the status is not "inactive", you might need to grant Nginx http access by typing

sudo ufw allow 'Nginx HTTP'
sudo ufw allow 'Nginx HTTPS'

Let's now take a look at whether our webserver is working as expected:

service nginx status

If you visit http://your.domain with your browser you should now see a default Nginx page!

Step 5: Configure Nginx

At this point, you might have a few questions. Where is the default page stored? How do I build my own page?

The default folder from which Nginx serve its pages should be /var/www/html. Try navigate to that folder and you should see a files titled "index.nginx-debian.html" or something similar.

The location of the folder Nginx serve is specified by the file called default located at /etc/nginx/site-available/. This also means we can easily change it to a different folder.

Create a directory called your.domain in /var/www/. This will be where we store our site's file. You actually name it anything you want, but it's good practice to stick to the convention unless you have a good reason to do otherwise.

server {
    listen 80 default_server;
    listen [::]:80 default;
    
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    
    server_name _;
    
    location /{
        try_files $uri $uri/ =404;
    }
}

We will make a copy of the files and name it "your.domain" and edit it such that it looks like this:

server {
    listen 80 default_server;
    listen [::]:80 default;
    
    root /var/www/your.domain;
    index index.html;
    
    server_name your.domain www.your.domain;
    
    location /{
        try_files $uri $uri/ =404;
    }
}

we then activate (enable) the server block by creating a link to the sites-enable folder

ln -s /etc/nginx/sites-available/your.domain /etc/nginx/sites-enabled/