Hosting a website on DigitalOcean Droplets

This guide is aimed at non-technical people looking to have a website of their own on the world wide web, and who are considering achieving that with something called Droplets by the company DigitalOcean. If you don't know what those are, that's fine! We'll talk about that too.

In the preliminary section, we discuss the fundamentals of web hosting. If you already know terms like "client", "server", "host", and "static site", you can probably skip that.

Then we talk about what Droplets are and whether they make sense for you to use instead of the various other options to get your website out to the world. If you then think that a Droplet fits your needs, the bulk of the guide gives step-by-step instructions on how to publish your site with one.

This guide is intended to be very info-dense. This means it contains some information that may not be 100% necessary for what you're doing. The process is simpler than the length of this guide would imply, but I wanted to be sure to actually teach you what you're doing, within reason.

Completing this guide will give you:

• A real live website
• With your own domain name
• And a server to self-host other software on

Completing this guide will require at minimum:

• Around 4 hours of your time
• Around $12 to buy a domain name
• At least $4/month to run the Droplet (a fixed price of your choice)

Table of Contents

• Hosting a website on DigitalOcean Droplets
  • Table of Contents
• Preliminary Stuff
  • What is web hosting, really?
    • Important Note on Self-Hosting
    • Static vs. Dynamic Sites
  • Should I even use DigitalOcean Droplets?
    • A closing note on pricing:
• Step-by-step Guide
  • 1: Make a website locally
  • 2: Create an SSH key locally
    • Open a shell
    • Generate a key pair
  • 3: Create a DigitalOcean Droplet
  • 4: Install Web Server software
    • Getting comfy with the shell
    • Install Caddy
    • Create a location for our website files
    • Configuring Caddy
  • 5: Upload site files
  • 6: Configure DNS
    • Add HTTPS
  • 7: Visit your site via its domain name
    • Wrap-up

Preliminary Stuff

What is web hosting, really?

For your site to be on the web, you need:

1. Files that make up your website (source code)
2. A computer that has those files on it (server)
3. A connection to the internet from that computer
4. A tool on that computer that sends the files that make up your website to people who ask for them, via its connection to the internet

That should make pretty intuitive sense, right?

Note on Self-Hosting

"Self-hosting" refers to running a site or service using your own server instead of someone else's. But there's a sneaky ambiguity there in what constitutes "your own server"! We don't need to understand this for our guide, but if you're interested, expand the box below.

Static vs. Dynamic Sites

So, now that we know that a host is just a computer with an address, and a server is just a host that serves data over a network, we can ask ourselves this interesting question:

Can a server do anything my computer can do?

The answer is yes! (Assuming it's got the same hardware and software on it) So you could have a server that is playing a video game or editing text files, or opening Steam or Discord, or opening up a web browser and going to sites...anything! But here's the important thing: Unless you are self-hosting, you do not own your server - your hosting service owns it. And some hosting services have restrictions on what you can do on their servers. For example, if you are hosting your site on neocities, you actually can't run a video game on your server, because neocities is a web hosting service, specifically for hosting websites, not hosting some weird bot that plays video games.

In particular, neocities and nekoweb host static websites. A static website is simply one where the server doesn't need to run any kind of programs or do any calculations in order to figure out what files to send to the client. It just gets the files that it has saved, and sends those out. It can sometimes be hard to tell if a site is static or dynamic, but if you're coming from neocities, your site is definitely static! Some examples of dynamic sites would be forums, internet radio stations, sites where people make accounts and log in, and many sites with user-generated content.

You most likely have no need to build a dynamic site if you're coming here from the standpoint of building a small-web personal website - but there are some potential exceptions. If you'd like to consider building a dynamic site, check out the details below.

Should I even use DigitalOcean Droplets?

A DigitalOcean droplet is a Virtual Private Server. My goodness, more terms already?! It's okay, this one is pretty simple to explain on a high level. Basically, the idea is that you take one big mondo powerful computer and then run a bunch of smaller virtual computers within it. Then, the company rents out those smaller virtual computers to different people. What's great about this is that you don't need to pay for all the overhead of a whole computer, you can get a more bite-sized chunk. For personal sites this is often exactly what you need, because personal sites are relatively tiny.

The way the computer is divided up is just by running a bunch of virtual machines, so if you've ever used a virtual machine before, that's basically what a VPS is. Since you're renting a computer by using a VPS, it makes sense that it costs more money depending on how awesome the computer is and how much of it you're using - that's why there's so many different pricing options for Droplets.

There's a lot of room for debate here, and the following are just my high-level OPINIONS. If you really want to be sure, read the Explanation box and do some of your own research too! Let's just take a basic look at prices:

Digital Ocean Pricing:

Neocities Pricing:

Basic Conclusion

• If you need less than 1 GB storage and you only want to run a static site, you can't beat Neocities et al.
• If you want to self-host any software whatsoever, you really can't use Neocities et al., and you should use a VPS provider.
• If you need more than 25 GB storage, and you only want to run a static site, Neocities et al. give you 50 GB for $5/mo, whereas with DigitalOcean you need $9/mo (using their additional storage options on the $4/mo plan) to match up. Neocities is another clear winner.
• If you need between 1-50 GB storage and want to gain some experience with self-hosting, or have the opportunity to add software to your server down the line, it may be worth the extra $1/mo to use DigitalOcean, even though you have so much less storage per dollar.
• If you need over 25 GB, or especially if you need over 50 GB of storage, then even if you have a static site, you may want to use DigitalOcean's Additional Storage options on Droplets, or Spaces (or some other storage service like AWS S3) to hold your large files. You can then decide if you want to host your site at the same place as your storage service or just link to those files.

A closing note on pricing:

Only you can really know what your site needs. I hope my breakdown helps, but you can always choose something contrary to my scenarios above.

DigitalOcean Droplets are billed per hour, so if you want to just try this out and then delete it, you can, and the costs will be very cheap.

Step-by-step Guide

Okay, if you've entered this section, you've decided that for some reason or another, you want to self-host a site, and you want to try it out with these Droplet thingies. This is where the fun begins!

1: Make a website locally

First lets make a local website. There are tons of guides out there on this, so I'm just going to make a really simple one to start off.

Here's the folder with my site in it:

Here's the files:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>My Epic Site</title>
    <link rel="stylesheet" href="epicStyle.css">
    </head>
    <body>
    <h1>Hello world!</h1>
        <p>Behold my website!</p>
    </body>
</html>
                

epicStyle.css:

    
body {
    background-color: PaleTurquoise;
}

h1 {
    color: Magenta;
    margin-left: 20px;
}

p {
    margin-left: 20px;
}

            

And here's the site:

Nothing complicated, but that's okay - these steps will work equally well regardless of how convoluted your .html, .css, and .js files are.

2: Create an SSH key locally

Soon we'll be renting out our VPS - which is just a server - which is just a computer. When we rent it, the next thing we'll want to do is do something with it. But how will we access this computer from so far away? How will we use it when there's no keyboard, mouse, or monitor connected to it?

The answer lies in what is known as "the shell". A shell is kind of like the under-the-hood area of your operating system. It gives you powerful and direct access to the operating system itself, with only the thinnest layer of abstraction. That thin layer is exactly why it's called a "shell". A shell is almost always a "command-line interface", which means that the interface is purely textual and not graphical. You know what these look like - it's the black box with the white or green text that hackers always use in the movies. Now we get to feel like hackers!

All computers provide a shell to control the operating system, and so even though our rental VPS computer isn't in the room with us right now, we can connect to it over the internet, and open a shell on that computer, and then have the text from that shell displayed on our own computer. Thus, we will control the VPS via the interface of a shell.

First, let's just open a shell on our own computer.

Open a shell

On Windows, go to the Start Menu and type "Terminal" and click it. You should see something like this:

(You won't see that (base) part there, don't worry about that. That's for my own stuff.)

The other part is the "path", which is just whatever folder you opened it in. Yours will be open under your user directory, I just opened mine elsewhere to keep my username private. That part shows you waht folder (a.k.a directory) in your computer the shell is currently looking at it.

The shell shouldn't scare you - it may look dangerous, but as long as you don't go typing in random junk, it won't do any harm to your PC.

We're going to use the shell to generate something called an SSH key, which is essentially a fancier, better version of a password. We'll use these keys to access our VPS later.

Generate a key pair

Then type ssh-keygen. The way the shell works is that you type in commands and then enter them with...the Enter key. The first word is either the name of a program to run or a built-in command. In this case, ssh-keygen is the name of a program that will generate something called an "SSH Key Pair". We'll use these keys to securely access our rental computer (our Droplet) in the next step.

Press enter, and you should see output like:

Generating public/private ed25519 key pair.
Enter file in which to save the key (C:\Users\Marziponder/.ssh/id_ed25519):
                

(If you don't see this, and it says "command not found" or something like that, you're probably on an old version of Windows and you need to go install ssh-keygen. There are many ways to do this, I recommend just installing git, which will come with it. This is out of scope for this guide for now, though.)

See, this is how a shell works. You tell it stuff, it tells you stuff, you tell it stuff back. It's like a text conversation between you and your operating system, or whatever program you're running in the shell. So ssh-keygen is asking us to enter a file in which to save the key, and the parentheses are its way of telling you the default file. It's easiest to use this default for now, so just press enter.

Then it'll say Enter passphrase (empty for no passphrase):

You should really enter a passphrase, but just make sure you won't ever forget it - because there's no recovering this password! If you forget it, you just have to make a new SSH key pair.

After that you'll get this really cool artwork based on the contents of the key you created:

The key's randomart image is:
+--[ED25519 256]--+
|+. ... +o+o.     |
|*E. . . +..      |
|B=. ..o oo       |
|X= o + =  .      |
|=++ o + S        |
|=* +   =         |
|B + . .          |
|.+ .             |
|+..              |
+----[SHA256]-----+

And then see how the shell goes back to what it was before, where it lists out the current directory? That means ssh-keygen finished executing and closed, and now you're back in to the shell itself.

You can close your shell now.

Now head to your C:/Users/<Your username>/.ssh folder. On Mac it should be at /Users/yourusername/.ssh/. If you don't see the .ssh folder, you may have to change a setting to display hidden folders (you can do that from the dropdown on the View button in Windows File Explorer)

Inside that folder you should see two files, id_ed25519 and id_ed25519.pub:

(again, don't worry that my file location is slightly different, that's just for demo purposes)

The ".pub" stands for public - that file is your "public key" and you can freely share that file anywhere without any security risks. The one WITHOUT the .pub on the end is your "private key" and you should never share it with anyone or put it anywhere other than where it is right now!

These two keys work in tandem. Think of it like this, the public key can be used to lock things up in a box that only your private key can open. The public key locks the box, but it won't unlock it. Only the private key does that. And likewise, the private key is no good for locking things, only unlocking them.

The plan here is that we're going to put a copy of your public key on our VPS and use it to lock access to the computer. Then, only your private key will be able to unlock the computer. That's how we'll prevent random hackers from getting in to your VPS.

Note: You may think "Nobody really sees my site anyways, I think I don't need to worry about hackers" - but hackers have automated bots that try to access unsecured systems. My own website, even within an hour of being deployed, had hundreds of bots trying to log in to it. So don't skip this step!

3: Create a DigitalOcean Droplet

Now we're getting down to business. After this step, we'll start to be billed for our VPS, so unless you have another 2-3 hours to work on this right now, this is a good time to take a break and continue later.

Go to www.digitalocean.com and create an account.

DigitalOcean has their own guide on this step which is a little more detailed, you can cross-reference if you want: https://docs.digitalocean.com/products/droplets/how-to/create/

When you log in, you'll see the "Control Panel". From there, click the big green "Create" button and select Droplets.

You'll be asked to choose a region. Your site will be fastest for people in that region, so you probably should pick the one closest to you.

Next you'll see the "Choose an image" section. An "image" is basically a snapshot of an operating system, with all the stuff on it. We'll use Ubuntu, just because it's the default and pretty easy to work with.

When you get to "CPU Options" make sure to select "Regular" and scroll their plan carousel all the way to the left. That's where the $4/mo plan is.

Just make sure to select one that has enough space for your site on it (that's the SSD Disk part). You can always upgrade this later if you want (but downgrading it isn't easy, so don't upgrade unless you know you're gonna use it).

Now you can add additional storage if oyu want. Note that you can even add it in small increments if you like, like so:

Don't enable automated backups unless you're planning to host a forum or something like that. If it's just your site, nothing really changes on the server, so there's no point in backing it up. The important part, your site, is already "backed up" on your own PC.

Under Choose Authentication Method, click "New SSH Key"

The box there wants a copy of your PUBLIC key. Remember this is safe to give them, since all that does is lock things for your private key to open.

Now go back to your .ssh folder on your PC, and while holding Shift, right click somewhere in the emtpy space to bring up an extended context menu like this:

(Again, you won't have all the same items I do)

Select "Open in Terminal". This conveniently opens a terminal that is currently looking at the folder you're in, the .ssh folder.

In your shell, type and execute the command: cat id_ed25519.pub. This prints out the contents of that file. The output should look something like

ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIJMEi0sZYADJ1Yn2P7PtCfUgFDjtP9qfKg6hyDcW11+5
                

Now copy and paste the output into the DigitalOcean page, give it a name, and click Add SSH Key:

Make sure the key is checked:

Skip the "We recommend these options" stuff.

Then give your droplet a name, make sure you're only deploying 1, and click "Create Droplet":

There will be a progress bar as your Droplet starts up, and after that you should see an IP address show up, which means your Droplet is ready!

Let's pause and appreciate how cool this is. As of now, there is a computer somewhere out there that is all empty and just waiting for you to build something on it, and it's all yours (pretty much).

Let's click into the Droplet just to say hello to it.

You'll see something like this:

Go ahead and click that "Console" button on the right, and a window will open up. After it connects, you'll see a screen like this:

Look familiar? This is a shell, but not a shell on your computer - this is a shell on the Droplet that you just created! Except this is not a Windows shell, it's a Linux Shell (cue spooky music).

4: Install Web Server software

We are now going to install some software on our Droplet, using the shell. In particular, we're going to install the software that will serve up our website files. That software is going to handle all the deeper networking stuff about figuring out that someone is visiting our IP address, asking for our website, and then giving it to them. Luckily we won't need to know how all that works - we just need to set up the server software.

Getting comfy with the shell

But first, let's get a little more comfortable with this shell, since unlike on our own PC, this is currently our ONLY way of seeing or doing anything on the Droplet.

First let's type out ls -a, then hit enter. You'll see something like this:

"ls" lists out the contents of the directory the shell is currently in, and the "-a" is an optional input to the ls command that tells it to display all the files, even ones with dots in front (which are normally hidden). All of these have dots in front, so without the -a we wouldn't see anything! These "options" are pretty powerful and essential to using lots of commands. If you want to see all the options for a command, you can usually type --help on the end, e.g ls --help, and that prints out a list of options and descriptions of what they do.

Eesh, but now our shell is looking kinda cluttered. We can run the clear command to get rid of old output:

That's better.

Alright, let's run ls -a again to get out directory contents displayed. Just like how on Windows we can browse through directories (folders) in our File Explorer, we can also browse through directories in a shell. This is done with the "cd" command, which stands for "change directory".

If I want to go into a folder, I can type cd myFolderName. Let's try going into that .ssh folder by typing cd .ssh.

You can see how that left hand side of the shell updated to help us remember where we are. So now we're in the .ssh folder, but what's in it? We can find out by running ls -a again.

Okay, so there's something in here called authorized_keys. Is that a directory or a file? If you want to check, you can run ls -F, which will put a "/" on the end of directories. Since there's no / on the end, we can deduce that this must be a file.

Now let's actually open up the file and see what's inside by typing nano authorized_keys.

Nano is a text editor, and the "nano" command will try to open whatever you typed after it for editing.

You should see something like this:

Notice that the first thing is your SSH public key! And then there's a second one after the comment line saying "# Added and Managed by DigitalOcean Droplet Agent (code name: DOTTY)". That's the SSH key that we are currently using to log in (remember how we got in here via the DigitalOcean console).

On the bottom of the shell, you'll see these nice tips for shortcuts. The ^ just means Ctrl or Cmd. So we can press Ctrl-X to close the editor.

If you accidentally made any changes to the file while you were in there, it'll ask you if you want to save it:

We were just looking at this file to learn, so choose not to save any changes by pressing N.

Let's leave this .ssh directory. To go up one level, you can type cd ../.

Install Caddy

We're going to use software called Caddy to serve our website. You can visit their site here if you want:. https://caddyserver.com/

Let's follow their Install instructions here: https://caddyserver.com/docs/install

All we need to do is run these commands, you can just copy and paste them into your shell and press enter:

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https curl
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
chmod o+r /usr/share/keyrings/caddy-stable-archive-keyring.gpg
chmod o+r /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy
                

That's a lot of junk to paste! You really, really, really don't need to know what it means, but if you're curious about it anyways, here's a breakdown:

Create a location for our website files

In Step 5, we'll put our website files on the server, but for now let's just set aside a place for them in advance. Let's take a trip aaaall the way to the top of the Linux file system by typing cd /. This will take you to the highest level directory in the OS. Do ls to see what's here.

Lots of things! This make sense, because even a computer with nothing else on it still needs a lot of things just to work. All these directories have their own purpose, but the one we're interested in is "var". It's called "var" because it's supposed to hold things that are "variable", as in, things that are prone to change. Your website is a good example of this, because you will be updating it sometimes, presumably (Even if not, it should still go in var by convention).

Open the var directory (cd var) and see what's there (ls).

Hmmm...okay? Where does a website belong here? Well, the standard is to put it inside a directory called "www", cos...you know. But since we don't have a directory like that, we have to make it. We can do this by running mkdir www. Run that, and then do another ls, and voila!

We have now created a folder for our website to live in.

Uploading the files we already have is gonna be a whole thing, so for now let's make an even simpler test website in there.

Do cd www and then nano index.html. This will create a file named index.html and open it for editing.

Type or paste in something like this:

<h1>Testing...</h1>
                <p>Do you read me?</p>
                

You can put whatever you want in the tags, of course. Do Ctrl+X to exit, and this time press Y to save it. If you are filled with deep paranoia like me, you can run nano index.html again and see that yes, your changes really are in there.

So are we finally ready to see this website now? (Spongebob making Krabby Patties gif)

No!!

The file is on our server, but there's no software serving it up. We have Caddy installed, but it doesn't automatically know that this file in this directory is what we want to serve. We have to tell it that. And the way we tell it that is by configuring it with what they call a Caddyfile.

Configuring Caddy

Run sudo nano /etc/caddy/Caddyfile. Just like how nano index.html created a filed named index.html in our current working directory, this will open the file named Caddyfile in the /etc/caddy directory. Since the path start's with a /, this is starting from the top of the filesystem.

As you can see, there's already some stuff in here, along with lots of comments helping us. Isn't Caddy nice?

We only want to change one part here. That line that says root * /usr/share/caddy should become root * /var/www.

Remember that clicking around to position your text cursor won't work, you'll have to get there by pressing the arrow keys.

Once it's changed, save the file (Ctrl+X, then Y). You've now let Caddy know where your site files are. Next we need to give Caddy permission to access those files. To do this, run:

sudo chown -R caddy:caddy /var/www
                sudo chmod -R 755 /var/www
                

In the first line we're CHanging the OWNer of the /var/www directory to the caddy user in the caddy group. The second line has this magic number 755, and without going into details, this basically says that the owner is allowed to read, write, and run files in there, while other users on this PC can read and run files but not write them.

Now we can actually start running the caddy software - yes, this whole time it's just been installed, but not running. To run it, do:

sudo systemctl enable caddy
                sudo systemctl start caddy
                

To check if that worked, run sudo systemctl status caddy and you should see something like this:

When you're done looking at this status report, you can press q to quit out of it and return to your shell.

But wait - in my case it says it started 4 hours ago. Caddy may have already been running, so if it says the same thing for you, just make sure it reloaded your changed configuration by running:

sudo systemctl restart caddy

With that, Caddy should really be serving our site. Back on DigitalOcean, check out the ipv4 section under your Droplet:

Remember that a devices IP Address is basically it's unique location on the Internet. Your site's IP address is whatever it says here. Copy and paste that IP address into a new tab and press enter, and you'll see:

It's our site! Our (very) simple site! You really accessed it over the internet just now. If you want to feel extra cool, and you have your smartphone on you, you can manually type in the numbers of the IP address in a browser there and see the page, you can send the IP address to your friends and have them visit it (they probably won't get how cool it is). It's really out there!!

Note on HTTPS: You probably noticed that the browser says the site is "insecure" - that is, it's only using HTTP. In fact, Caddy will automatically handle setting your site up with an HTTPS certificate so that it is secured, but in order for that to work we need to plug in our own domain name. Let's not worry about that yet, first let's get our real site on there. But I promise, we will get the HTTPS working right after that.

5: Upload site files

So we now know how to create and edit files on our server. But how do we move files from our personal computer to the server? After all, our own computer is where we want to write the code for our website. For that we need an "SFTP" program, which stands for Secure File Transfer Protocol. We'll use FileZilla because it's available on all OS's. You can get it here: https://filezilla-project.org/download.php?type=client

It's one of those installers that asks you if you want to install a new browser and other dumb junk like that, just ignore that and install FileZilla. When that's done, open it and you should see this:

Go to "Edit" in the top bar, and then "Settings", then select SFTP. You'll now see this screen:

Like it says, FileZilla needs to know where your private keys are - and that makes sense, right? Our Droplet is currently locked with your public key, so to get into it, we need your private key. Click add key file and navigate to the .ssh folder on your personal computer (Not the Droplet!) and select the id_ed25516 file you created earlier. Make sure to select the one that doesn't say .pub on the end.

Once that's added, click the File drop-down and then "Site Manager". This is where you list all the sites that you can connect to with FileZilla. Click "New site", and you should see this:

Fill out the form by changing these fields:

• Set Protocol to "SFTP - SSH File Transfer Protocol"
• Set Host to your Droplet's IP Address
• Set Port to 22.
• Set the Logon Type to Interactive.
• Set the User to "root".

When you click connect, you will get this little pop-up:

It's sad to say yes and check the "Always trust" box.

Now behold! On one side of the app we have the file system of your local PC, "Local site". But on the other side we have "Remote site". This is the file system of your droplet!

You can click through the folders, or go straight to /var/www by typing it in up top.

Now on the left side, you can navigate to where your site files are. And now, are you ready? You can just drag and drop them over to the right side to upload them to your server!! Finally, something easy!

Here I dragged my index.html and epicStyle.css from my local PC into the www folder on the server. You can choose to overwrite the index.html, same as if you copied it into any other folder with same-named files.

If we reload the page, ta-da!

It's our website! We finally have our real website on there. And the cool thing is, this works just as well with more complicated sites. To prove it, I'll copy over the entirety of the folder for my personal site, orbitoasis.net. Look at it go:

Slowly but surely, the server is filling up with the many images and files that make up my site. Just like that, my site is now hosted in a second place - on this Droplet:

If you want to try it out yourself, you can go ahead and copy in all the contents of your site. It'll be accessible at this IP address!

6: Configure DNS

As cool as this all is, you don't really want to tell people "hey check out my site at 146.190.145.207". It would be a lot cooler to make it "myepicsite.com" or something like that. So let's do that!

Note: If you just wanted to experiment and see what it's takes to set up the VPS, and you don't actually want to put a site on here yet, you can just call it quits here. If that's the case, you can go to the "destroy" section of your Droplet and destroy it, which will permanently get rid of everything we've done so far and stop you from racking up any further bills.

To do this, we need to buy a domain name from a type of company known as a Domain Name Registrar. I recommend Porkbun, because their prices are good and I don't think that they do anything scummy like jack up prices of domain names after you search for them. Go to their website and search for the domain name you want.

The part after the name, the ".com" or ".net" is called the "top-level domain", and these are very roughly used to indicate what kind of site you have. You can pick whatever TLD you like from the list of available ones. Porkbun won't necessarily show them all, so don't forget that there are lots of fun ones to use like:

• .lol
• .gay
• .website
• .xyz

And so on. There's no technical concern around which one you pick, so just pick whatever looks good to you both aesthetically and from a price standpoint.

I'm going to buy marziponder.website, because I only want this for demo purposes and it's $1.13 for the first year. The renewal price can be way different though, so watch out for that! I won't be renewing this domain so it doesn't matter.

YOu don't need to buy any of the extra stuff like email management etc., but you may want to. I'll leave that up to your own research. Personally I would lean towards skipping it.

Once that's purchased, go to your Account "Domain Management" page.

You'll see your domain name in the list. When you hover over it, that "DNS" text will show up - click that and a window to configure your DNS will appear. DNS stands for "Domain Name System", and you can think of that as a sort of address book of IP Addresses. Whenever you go to blahblahblah.com, your computer contacts some a domain name system which knows what IP address is tied to blahblahblah.com - this is how you're able to reach websites by typing in their nice names instead of just their IP addresses.

So we're going to configure our own entry on this domain name system by inserting "records" into it.

First, we need to remove the default records Porkbun set up so that our site would have a "placeholder" page. Delete these by clicking the trash icon:

Now we'll add our own records.

For our first record, leave the type as "A". This record is meant to store the IP address, so paste your IP address in the Answer/ Value section, type "@" in the Host section (this just means it uses the root of the site, they say you can leave it blank but that didn't work for me) and click add.

It can take a while for the DNS changes that we just made to propagate, meaning that if I go straight to marziponder.website, I may not see anything yet. But after 5 minutes or so, you should see it:

Now, once that works, if I try going to www.marziponder.website, I'll get this instead:

Interesting, right? It works, but not with www. Normally it makes no difference nowadays whether you put the www in front or not, but this is just because everyone is configuring their DNS so that the www version redirects you to the regular version anyways. Let's set that up too. Back in Porkbun, add another record, and this time change it to "CNAME". This is short for "Canonical Name", and it allows us to configure aliases for our domain name.

This time, put www in the host, and put your site name, with the TLD, in the Answer/Value - then add it.

Your current records should now resemble this:

After waiting again, you should be able to access your site via the www. This one may take a lot longer to update - technically it can take up to a day for your DNS changes to propagate, but I've never actually had it take that long.

Sometimes your browsers will stupidly cache the failed page, so if it's still not working after 5 minutes, check in another browser or on your phone.

Once you confirm that the www is working, we're ready for our FINAL STEP (!!!) - adding HTTPS to the site.

Add HTTPS

HTTPS is important because it helps make sure that the site your visitors are seeing is really your site, and not some kind of imposter site. To do this, we need to return to our Droplet and update our Caddy configuration. We couldn't have done this step until our DNS was configured, because Caddy will use that DNS configuration to register our certificate that marks us as "secured".

Once you're back at the Droplet shell, run sudo nano /etc/caddy/Caddyfile to open the Caddyfile inside the /etc/caddy directory for editing.

Caddy is so nice that they left a comment guiding us on exactly what we want to do:

Let's take their advice and replace ":80" with our domain name, and the www version of it separated by a comma, like so:

Save the file (Ctrl+X, then Y). Now you've changed your Caddy configuration, but Caddy doesn't react live to that. We need to restart Caddy so that it picks up this change.

Run sudo systemctl restart caddy, and then do sudo systemctl status caddy for good measure to make sure it's working. Remember to press q to quit out of the Caddy status report when you see that it's working.

7: Visit your site via it's domain name

If I now go straight to marziponder.website, I may feel a pang of disappointment as I see the same thing:

If this happens to you, fret not! Your browser has once again annoyingly cached the http version of the page. Try hitting Ctrl+Shift+R to hard refresh, or I could manually type out and go to https://www.marziponder.website.

You should now see your browser's indicator that the page is secured with HTTPS.

Wrap-up

Now it's time to celebrate! That was a lot of learning, registering, buying, and shell-ing. But in exchange you now have your very own website, hosted on your own virtual private server. What's more, your server empowers you to run other software like comment systems, forums, or whatever else can be self-hosted! CONGRATULATIONS!

If you ran into any issues with this guide, you can try asking me on my forum here: https://forum.orbitoasis.net/viewtopic.php?t=8

You could also email me, or message me on https://forum.melonland.net if you have an account there.