Make Your Own Site!

Nov 10, 2022 @ 11:26:17 PM (+0200)

I made my first sites back when I was 12, so coding a site can be done at any age. In this guide, I will show you how to create a basic website that loads relatively quick. This will require basic Linux and HTML knowledge.

To summarize how HTML works — everything is a component. You start it with <component>, add the contents (text, images, whatever) and then end it with </component>. Now you have a container with stuff in it!

A per Linux — it's a little complicated, but isn't as scary as it sounds.

ls – Shows the files in a folder.
mkdir – Creates folders.
cd – Changes what folder you're in.
pwd – Shows what folder you're in.
cp – Copies files.
mv – Moves and renames files.
rm – Deletes files.

Make sure to include -vr to include folders and to know what it's doing.

Linux and HTML tutorials are a YouTube search away, so make sure to watch them.

Some of them are not terribly long, so learning HTML & adapting Linux commands as a habit should only take you a couple of days.

I use this starter boiletplate for all of my sites. You can add navigation & footers outside this <main> tag, then search engines like Google will only focus on the content inside this <main>.

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Your website title, or basically the text showing in the browser tab</title>
    </head>

    <body>

	<main>
	    <!--  CONTENT GOES HERE  -->

	    <!--  CONTENT ENDS HERE -->
	</main>

    </body>
</html>

Getting your site online

To have your site public, you don't need to necessarily buy hosting, unless you want to integrate it with a domain name & host your own email. This section will cover getting it online using external sites, and getting it online by buying a domain & hosting.

Free hosting

Neocities is a great starting point. It has a text editor built-in and even a search engine!

Codeberg is a privacy-friendly GitHub alternative, which can be used to get your site on Codeberg Pages. You should have a link that looks like this. They also have instructions on how to point your domain to them.

The Internet works like real life addresses. They are identified with something like 308 Negra Arroyo Lane, Albuquerque, New Mexico 87104, but in reality lead to specific coordinates for a specific location. It's the same for the Internet — domain names lead to IP addresses. The URL bar identifies this lead as the domain.

For the regular Internet there are domain registrars, which hold all of the domain names. You need to buy one, doesn't really matter where, just somewhere cheap. I'm satisfied with Porkbun, because of how cheap their domains are.

Create a Porkbun account and register a domain to your liking, although I highly advise you to go with .xyz — it has one of the cheapest costs. Don't forget to enable WHOIS protection, it prevents the WHOIS results from showing your personal details.

You will also need a server to host your site on. Vultr, LunaNode & BuyVM/Frantech offer great services at amazing prices!

Now that you've bought your domain name and VPS — it's time to wire them together. Go to the Porkbun dashboard and click on the "DNS" link. Add an A record pointing to the VPS IP address. (Select the AAAA record, if you're using IPv6.)

Assuming you've already written your site and bought an Ubuntu VPS, now we're gonna log into it and install nginx and certbot. Alright, so your VM panel page should give you the username and password to log in.

ssh <username>@<vps ip address>

NOTE: Make sure to change your password to prevent compromisation.
$ sudo passwd <username>

$ sudo -i to get access to the root shell.

$ apt update && apt dist-upgrade -yy to update the system.

$ apt install nginx certbot python3-certbot-nginx will install nginx (the web server), certbot (HTTPS) and python3-certbot-nginx (integrate certbot into NGINX).

Create the NGINX site file — /etc/nginx/sites-available/YOUR.DOMAIN. Replace YOUR.DOMAIN with your domain name.

server {
    listen 80;
    listen [::]:80;
    root /var/www/html;
    index index.html;
    server_name YOUR.DOMAIN;
    location / {
	try_files $uri $uri/ =404;
    }
}

The root parameter is the webroot directory — that's where your website is hosted. You also need to change YOUR.DOMAIN to your domain name.

To enable the site:
$ ln -sv /etc/sites-available/YOUR.DOMAIN /etc/sites-enabled/

Your website is currently insecure, so let's NOT make that the case!

$ certbot --nginx – Generate a SSL certificate.

$ systemctl restart nginx – Restart the web server.

Updating your site

Since you're just starting out — I'd recommend using WinSCP or FileZilla to upload the website files to /var/www/html or wherever your webroot directory is.

Shell scripting, although optional, is more powerful than you can imagine. Since you'd know some utility commands — you'd have nothing to worry about.

Knowing HTML & CSS can make all the difference in sites, so please check out Hugo.
Hugo is pretty cool.

~Vicky (Reply-To)