Table of Contents

Starting Off

Today was the day I decided. I had the time, the local version of the site is pretty much ready, and really nothing was holding me back. I am glad I’ve now done as test the entire process of hosting the Karma site I’ve been building with Hugo. I learned a lot and now because the site is essentially live it should be real easy to switch like 3 things over and bam, waboom done deal the site is migrated.

GoDaddy

So this site, heinicke.xyz, I have owned now for like 5 or 6 years or whatever, but I have no idea where I bought the domain originally. Instead of making a new account somewhere I somehow tracked down that this domain is owned through GoDaddy.com so after about 15 minutes of resetting my password I was in.

I purchased the heinicketestdomain.work for 1.50 freedom bucks and I was ready for the step that was real difficult I remember originally when making this site. Off to Vultr! The VPS site I’ve been using because, well, it works and it’s cheap and its reliable. They’re also fast on tickets too if you open any.

Just like last time, I spun up a new server which sounds fancy but what I did was click ‘deploy’ then clicked the cheapest option, the shared CPU 1GB of RAM and a 25GB storage disk, named it, chose Ubuntu because I know how to fix that better than Debian when I forget about it for years, and hit done.

Hosting and DNS

From there the process is easy but sounds more technical. What has to be done is the DNS record of the domain name has to point to the IP address of the server where your site is going to live. Originally this was difficult to figure out because I didn’t know what any of those words meant but let me break it down.

Your server you’re now paying for has a static address unlike your laptop, plus it stays on forever as its managed by pros and doesn’t run on battery. You need to point your domain here so that when someone types in yourwebsite.xxx it knows to go to your server. Easy.

This is easy the words just sound technical. Don’t think about it too hard just read the words and find the same word on your dashboard pages. To do this in GoDaddy, or anywhere really, you go to the DNS settings and find the records section. Add a record with the @ symbol and an uppercase A and paste in the 12.421.521.21 sized number on your server. Then add another but this time find the AAAA option and paste in the IPV6, that really long number with lots of colons in it, in there.

Done, hit save and in 5 minutes or so that’s a done deal.

Server Administration

This part is where it starts to sound fancy but is also pretty dang easy. At this point your server thing should be done being made over on Vultr as it takes about 10 minutes initially. What you’re going to do is copy the long password they give you in the dashboard and head on over to your terminal.

SSH Keys

You’re going to make a fancy key that is stored locally so that you only have to login with your password once, then you can disable password logins all together. Password logins are how most people’s personal sites get whacked by internet baddies.

On your machine run ssh-keygen and then hit enter a bunch of times until you’re back at your shell. Then you’re going to do a classic ssh-copy-id root@yourwebsite.xxx which will then prompt you for your password. This is the password for your server, so paste in, maybe with CTRL+SHIFT+V and hit enter. What’s hapening here is you generated a key thing and you then essentially copied it on over to your server. Now, when you try and login or copy anything there, instead of prompting for a password, it realizes you’ve got the same key and it just calls it a day.

Now you should be able to ssh into your new server all fancy like. So lets do that, we gotta still get rid of the password options. ssh root@yourwebsite.xxx and it should take a second and your prompt will change you’re now in your server. To get rid of password login you’re going to change some ssh settings. You can do that by:

$ vim /etc/ssh/sshd_config

# once in here you're going to add the following lines

PasswordAuthentication no
ChallengeResponseAuthentication no
UsePAM no

Write and quit with ZZ and restart ssh and you should be big city balli’. You may get kicked out of ssh because you’re using the service you’re restarting. You may also have to login to the console on the Vultr page once to restart ssh but then you’re gonna be donezo with that.

Nginx

Nginx is one of the main ways to get your site running. Something like 98% of the internet runs on either Nginx or Apache. Nginx is lighter weight though and therefore better fit for this, we aren’t running a Facebook sized application after all. A classic apt install nginx will do the trick if you don’t have it already, then we are going to change just a few things.

So, thinking high level about this, earlier what we linked your domain to your server’s address so when you type the domain you bought in, it redirects you to your server. “Great,” you’re thinking, “but now what”. Great question. Your server is an entire computer how does it know what to do when someone gets there? Nginx

The process goes as follows when someone goes to your site, Domain –> Server –> Nginx –> the files of your site. So we need to setup the next step. When someone comes knocking on your door Nginx needs to answer and direct them to your site. That’s done in a file under called /etc/nginx/sites-available. What you’re going to do is make a new file in this folder and call it whatever, easiest to name if after your site, and then paste the following in there:

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

Let me break some of that down then so it makes sense. Change example.org to your domain. Then the other important part is the root /var/www/mysite ; part. This is Nginx telling whoever comes knocking where to find the first page of your site. From there, your site should be working such that everything is linked together. That’s just another folder on this computer, and that’s where you’re going to put all the content, files, and folders of your site you want Nginx to display. So you can remember to call that folder /var/www/mysite or you can change it in this file and call the folder whatever you want.

Once you’ve decided and saved that, Nginx has this funny way to keep track of different sites on the same machine. You can have like a bunch of different sites in different folders and then switch between them or whatever, its whats in the corresponding folder /etc/nginx/sites-enabled that show up when you go to your domain. So to make your site actually active you gotta link your little file you made to that folder:

ln -s /etc/nginx/sites-available/site /etc/nginx/sites-enabled/site

And maybe delete the default thing thats in site-enabled just so it’s not confusing. Reload nginx and you’re ballin here as well. The issue now is that your site folder, whatever you specified in that file above, is probably empty

Rsync

This is the way! Guau this is far easier than some dumb wordpress site builder that doesn’t load without some blazing fast internet. You can build, maintain, fix, edit, change, your site entirely locally, extra fast, and then whenever you have the chance just mirror your local copy of your functioning site over to the folder you specified above. This means it automagically updates and just plain works. Rsync is also good when the connection is slow.

With Hugo, what you’re really doing, is making Markdown documents and then running the hugo command which takes all your markdown documents and makes them into HTML documents in the /public folder there. So what you need to do is make your site, type hugo, then copy the entire contents of the /public folder into /var/www/mysite or whatever you called it, then bam its on the internet.

I use this command. Rsync has a million and one options but I have found this works. So the first time you do this obviously it will copy the entire contents of your folder over, but from that point on it will keep track and only edit or add files that have changed, and crucially it will also delete files you’ve deleted locally from your site as well. Could be dangerous if you have a few people editing the same site locally on their own copies, but for this site and for the Karma site it works just fine.

rsync -vaP --delete-after public/ root@yoursite.xxx:/var/www/mysite/

Now look at that command and realize what it’s doin’. You need to change yoursite.xxx to whatever it is your domain is, this is like you SSH’ing on and making changes. Then also, you can see after the colon, it is the same path that matches what we put in the Nginx sites-available thing. So make sure that matches and has the trailing slash! The final thing is realize early on there it takes just public/. That means I’m running this from within the directory where I do all my Hugo editing. Makes sense to me, but if you wanted to run this from another folder you need the entire path.

Summary

As you can see this is pretty straight forward if you get past a few of the difficult names of things in here. If you have any issues, reach out! If you want me to go through and do this with you, buy me a beer and lets talk! If you just want me to do it for you, buy me two beers and you got a deal!

Purchase domain
Spin up cheapest server possible
Copy IP addresses from server to the DNS records where you bought your domain

Create ssh keys
Copy ssh key over to server
Edit and remove the ability to logon with password

Download Nginx
Make file which points to your site domain and some folder you want to put the files
Link that file from sites-available to sites-enabled

Make a nice site on hugo locally
Type hugo lol
Rsync the contents of public/ to the folder specified in sites-available

Enjoy your website.