The beginner’s guide to making a website

Have you ever wondered how content gets on the web? I’m not talking about making a Facebook post, uploading an image, or commenting on a forum thread — but rather, the process by which a new website is born. In this article you will find a beginner’s guide on how to become a webmaster!

Let’s relate the domains, servers, and webpages to a smartphone because people are more familiar with phones than computers:

1. Domain Name: Picture a phonebook full of people and their phone numbers. Just like you have contact names, your website has a domain name.
2. Web Server: Your phone is a piece of hardware that runs an operating system (iOS/Android). Server hardware also runs an operating system (Linux, Windows Server, etc). Just like your phone has a phone number, web servers have an IP address.
3. Webpage: Smartphones run applications whereas web servers serve webpages.

Domain Name:
First things first, you need to register a domain name for your website! For more information on this topic, see my previous post about domains. My favorite registrar is Namecheap. There you can find cheap domains like .online for $0.88/year. On the other hand, GoDaddy frequently runs steep discounts on .com domains. When you buy the domain, disregard purchasing the add-ons like WhoIsGuard, PremiumDNS, and SSL Certificates. Thankfully, most of those features are either being offered by registrars for free or you can find free plugins to handle these services for you. Now you have your own domain name!

Web Server & Hosting:
Alright, now we need access to some hardware. Onward, to the cloud! My favorite hosting company is DigitalOcean for many reasons: reliable, detailed knowledge base, free support, easy to manage, and advanced technical features like snapshot backups. DigitalOcean is actually a virtual private server (VPS) company as opposed to a basic shared hosting company like HostGator. Their $5/month plan will give us plenty of resources to get started.

The type of web server that you choose is determined by the kind of tools that you will use to make a website, which we will discuss later.

Furthermore, the web server contains software that makes up the “stack.” The stack is what is required for the web server to serve webpages. Historically, the de-facto example of a stack is Linux-Apache-MySQL-PHP (LAMP). As mentioned earlier, Linux is an a server operating system. Apache is the go-to web server application that serves static or dynamic content from a file system to a web browser like (Chrome/Firefox/Safari/Internet Explorer). An alternative to Apache is NGINX.

You can install all of that on DigitalOcean with one click, but hold off until you read the whole guide!

Hook your domain name up to your web server:
If you used Namecheap to register your domain, go to the Manage section of Namecheap and change the nameserver settings to “Custom DNS.” Now enter the following three records in order to point your domain name to the DigitalOcean nameservers:

Alright, now go to DigitalOcean, and in the Networking tab, edit the @ “A” record. Insert the IP address of the server you created as shown in the screenshot below.

Then, add a “CNAME” for your domain in the Networking tab. This makes sure that if someone types in yourdomain.com OR www.yourdomain.com, your website will come up.

Now, your domain name will be associated with your web server’s IP address.

Webpage:
If you right-click on any website and hit “view source” then your browser will display all of the HTML (content) that the page is composed of. Alternatively, you can also right click and hit “inspect” to view a combination of the HTML (content) and CSS (style) that makes up a website. This view is fun because you can actually click on the HTML and edit it. Try it out! Go to your friend’s employer’s website, right click to inspect, change the title of the page to something silly about them, and send them a screenshot.

Messing with Inspect on the Giant’s Webpage

While there is merit to writing and understanding your own HTML/ CSS/ JS, there are platforms out there that allow you to tap into professionally made templates and plugins in order to rapidly make a professional-looking website. You don’t want to have to edit text files locally and then upload them to your web server using an FTP client every time that you need make a change. We want to edit files in the cloud.

Wordpress:
Referring back to the stack, Wordpress serves as a front end interface to PHP, MySQL, HTML, JS, and CSS. Basically, it gives you a graphical user interface (GUI) with the tools to manage and edit your website — in other words, you can click on stuff to trigger actions instead of having to manually type in commands to your web server over SSH.

Thankfully, DigitalOcean offers a “one-click install” that deploys your web server with WordPress on top of it! Here’s their knowledge base article on it → follow the instructions in the “Access your Droplet via SSH” section.

Now, you can navigate to www.yourwebsite.com/wp-admin and login to your Wordpress server! Congratulations — you are on your way to becoming a webmaster!

In the future, Million.ai founder Nicholas Lemieux, will write an article on WordPress plugins and themes.

Our Plug:
At Million.ai, we take the hassle out of creating your own personal website! We automate the entire process and pull data from your apps to create you a beautiful website!