How to Make A Website
Here’s what goes into a website.
- A server (hardware).
- The software which runs on the server, also called a server.
- A domain (optional)
- An SSL certificate (technically optional but highly recommended)
I will explain what these terms mean, and how to get your own stuff set up. Please note that this is a guide for people who want to do everything from scratch. There are plenty of easier ways to set up a website. For instance:
- Any of a number of blogging systems, like wordpress.com, which will also help you hook up your own domain.
- nearlyfreespeech.com - an extremely cheap option if you want to do some things yourself. If your website is just a collection of static pages, this is an easy way to put it on the internet.
How the internet works
When you type “reddit.com” into your browser, here’s what happens:
- Your computer sends a signal to something called a “DNS server”, saying “I need to find ‘reddit.com’. Can you tell me where it is?”.
- Since the people who operate reddit have previously left their address at the DNS server, it says, “yes, you can find it at 151.101.193.140”.
- Then your computer sends a new message to 151.101.193.140, saying essentialy “I’d like your home page, please”
- (if you’d typed in “reddit.com/r/stuff”, it would say “I’d like what you have at ‘/r/stuff’, please”).
- Your ISP uses those numbers to find the reddit server, which is just a computer running in a warehouse somewhere.
- The reddit server sends a message back containing their home page
- Your browser displays the page.
Now, what we want to do is the same thing that reddit is doing. So, let’s go over the list of things again:
- We need a domain, a name for people to find the website. In principle, you can just tell people an IP address like 151.101.193.140, and not use a domain, but that’s kind of inconvenient to remember.
- Basically, to get a domain, you pay the people in charge of domains some money for ownership of it. Then they write down in the big list of domains that “awesome-website-stuff.xyz” belongs to so and so, and that the IP address is such and such.
- (In reality, you buy your domain from an intermediary organization, of which there are many)
- We need an actual server, to send the message to people who ask for it. A server is really just a computer - you could “serve” your website from your desktop computer, if you wanted to. In practice, you’ll want your server to be running all the time, so it’ll probably be easier to rent one. There are many services to do this.
- Then you’ll need to run a program on the server which can interpret the messages from people who want to see your website and respond with the website. Confusingly, this program is often also called a server.
- Lastly, for security reasons, you may want your website in HTTPS. This makes sure the contents of your site are secure. If you’ll be sending and receiving information which is not public, this is absolutely essential. Even if you just have a public-facing website with nothing secret on it, setting up HTTPS is a good idea - for instance, it ensures that an attacker can’t fake messages from your website, so people can trust that it’s really you writing what you put on your website.
Before we proceed, I should mention that I AM NOT A SECURITY EXPERT. If you’re going to be handling any sort of sensitive information, please, PLEASE, do some research, and try to consult with someone who knows what they’re doing. If you only follow my advice, you should assume that anything you put on your server is immediately compromised.
Server (hardware)
Basically, we’re going to rent a computer from someone for your website to run on. There’s a bunch of services to do this, each with their own advantages and problems.
My personal website uses Linode. Their servers start at $5/month for a so-called “nanode”. When I need to explain something, I’ll use that as the example.
I won’t say that I have any great familiarity with the market, so do your own research. The important point for this tutorial is that you get full root access to a server running something like Ubuntu linux.
A lot of services “manage” you in various ways - providing a standardized webserver (as in, software running on your server), limiting the stuff you can do on the server, etc etc. These are not necessarily bad ideas, but it’s not what we’re looking for.
You can also run whatever OS you want on your server. You’ll almost certainly want some variation of Linux. I’ll use Ubuntu for this guide. If you’re using a different version, things will obviously be different.
- Buy a server somewhere
- Set it up to run a recent version of Ubuntu.
- Make sure you know the root password of your server (you should be able to view or set this on the website of your provider)
- Then find its IP address.
- Here’s how this looks on Linode:
You can see the IP addresses on the right.
- Do
ssh root@x.y.z.w
, substituting the actual IP address - Log in using the root password
Now you’re running a terminal on your server.
Server (software)
We’re gonna use a program called nginx to serve our website.
- While
ssh
ed into your server, doapt update
andapt install nginx
to install nginx. - To start nginx, do
/etc/init.d/nginx start
- To test that it’s working, open up a browser and type your ip into the address bar. Your should see a page like this:
Now, I’ll explain how to configure nginx to serve your website.
- For this basic tutorial, we’ll just set up nginx to serve some .html files in a directory. For a more complicated website, you’ll probably want dynamic content, i.e content which is generated by a program running on your server, rather than just read from a file. You can set up nginx to do this, but I won’t cover that.
- By default, nginx uses the directory
/var/www/
for websites. We’re gonna stick with that. Now would be a good time to make up a domain name for your website. Domkdir -p /var/www/example.com/html
- Create
/var/www/example.com/html/index.html
usingnano
or another editor. For now, just put this text in it:
<html>
<head>
<title>Welcome to example.com!</title>
</head>
<body>
<h1>Success! The example.com server block is working!</h1>
</body>
</html>
- Now create the file
/etc/nginx/sites-available/example.com
. Paste this into it:
server{
listen 80;
listen [::]:80;
root /var/www/example.com/html;
index index.html index.htm index.nginx-debian.html;
server_name example.com www.example.com;
location / {
try_files $uri $uri/ =404;
}
}
- Create symlink to this file in the sites-enabled directory:
ln -s /etc/nginx/sites-available/example.com /etc/nginx sites-enabled/
- nginx is configured by default to serve out of
/var/www/html
- disable the default configuration by doingrm /etc/nginx/sites-enabled/default
- This will make the directory we’ve set up the default one. Don’t worry, the default configuration file is still available in
sites-available/
- This will make the directory we’ve set up the default one. Don’t worry, the default configuration file is still available in
- Now test that we didn’t fuck up by doing
nginx -t
- this scans the configuration files for errors - Then restart nginx:
systemctl restart nginx.service
- Hopefully going to your server in a browser (by typing in the ip) will now show the page we made.
Obtaining a domain
Now let’s buy the example.com
domain.
- As mentioned, there are tons of places to buy a domain. Let’s go with hover
- Create an account and buy your chosen domain.
- Now you’ll want to point your domain at the linode server.
- When using Linode, the easiest way to do this to use linode’s nameservers.
- On the Hover control panel, you can see a list of “Nameservers”
- Click edit, and set these to what you see there -
ns1.linode.com
etc - Then log on to Linode, go to “Domains” in the left-hand menu, click “add a new domain”, and fill out the information:
(Obviously you’ll type in your domain at the top). Note that you must enter an email address.
- The default settings created like this should work.
- For reference, here’s how mine looks:
- Now you should be able to go to
example.com
orwww.example.com
and see your website. - If you can’t, one possibility is that your browser (sensibly) won’t let you connect to an unsecured website. We’ll fix that now.
HTTPs
Now we’ll set up security for your site. Luckily, this is super easy.
ssh
into your server and doapt install certbot python3-certbot-nginx
- This installs the auto-setup tool
certbot
from the Let’s Encrypt project, as well as the plugin for nginx - Now simply do
certbot --nginx -d example.com -d www.example.com
, and follow the instructions. - Look in
/etc/nginx/sites-available/example.com
- you should see thatcertbot
has modified it. - Restart nginx and try to connect to your website.
What now?
Now you’re set up! Put any files you want to put on your website into /var/www/example.com/html
- Look at the nginx website for more information about configuring it
- Use static site generators like Jekyll or Hakyll to generate your website.
- Message me to complain about the problems in this guide.
- If you buy your domain or your server from somewhere else, they probably have their own guides that tell you how to point your domain at the server. Try googling around.