This documents the process I used to make this website. I may have missed a few steps, but this is intended to be a guide for reference purposes and perhaps help others that may want to do something similar.
1. Get a hosting service.
I always wanted to set up a server from the ground up, so I purchased a virtual private server (VPS) from RackNerd for the year. The value of the option I chose was very good (search on reddit for people’s affiliate links to get an excellent price) and will easily meet my needs.
The hosting service usually provides storage space, bandwidth, and other software to manage websites. Many hosts offer options that are great for Wordpress-like sites, but limit what you can do with the host machine. The VPS I chose came with Ubuntu and allows me to do whatever I want, so I went with this. If you decide to go with this kind of solution, you will want to be familiar with Ubuntu and working on the command line.
2. Get a domain name.
I purchased a domain name from Cloudflare - there are many other registrars around, but Cloudflare is a trusted option and it was very likely I was going to use them at some point for this project. Also, the price was affordable compared to others and it does not seem to jack up the price after the first renewal.
3. Set up keys for security.
You probably do not want to allow login with just a password. About a week after getting this machine set up I started seeing repeated attempts to log in with a password, so I just quickly added keys as part of the authentication process. See here for an overview of how it works.
I followed this guide - it was pretty quick. I am on Windows, so the command type is used instead of cat. Also, make sure the permissions for the key file are set up correctly - I stumbled on this at first.
5. Set up SFTP.
At some point I knew I would need to upload files, so I wanted Secure File Transfer Protocol (SFTP) set up.
At first I followed this guide, but after some experimenting and having keys set up, I did not want SFTP available with just a password. So I ended up modifying this option and allowing authentication with a key only. Basically, you want to change PasswordAuthentication yes to PasswordAuthentication no and follow a similar process for setting up keys as above, but with whatever user applies. FileZilla is a great option as a SFTP client.
6. Set up a webserver.
The point of this project was to get a website up and running, so a webserver is needed. It is possible to just enable this within Ubuntu by using this guide to install Apache. Apache is good, but I wanted to use Nginx since I am more familiar with it. This guide was a good resource for getting started - the official documentation contains everything else needed to get started.
Once the server is set up and the domain is pointed to the correct address, the website will need a SSL certificate otherwise you will experience “unsafe” messages when trying to reach the site. Once again, this guide offered a nice introduction, but I will likely move to Cloudflare for certificates.
7. Add some content.
Now that the webserver can be reached via the purchased domain, something other than the default index page should be shown. There are a great many options for making a website. Wordpress is a great option if you have PHP and MySQL installed, or you could even go with writing your own HTML, CSS, and JavaScript that would not require any other tech. Nowadays, I suggest using a static site generator which have a learning curve to set up but can be run without much sophisticated technology on the server.
I am using Hugo for this site, but there are many others that fit many different use cases with all kinds of features. The output of the generator is just a simple HTML-based website - so this could be hosted on Github Pages, Neocities, or on Netlify very quickly. One day I might use something more complex if I need more features, but this will work well for a personal site.
8. Continuous Integration and Deployment (CI and CD).
Now that you have some content to publish, you can use CI/CD to automate the process of getting it into the website. The less sophisticated way is to use copy files into the correct folders using SFTP, but with github actions, a simple process can be set up that copies files from github into a container, the pages are made, then all of the files are transferred to the server.
My workflow has the following structure. Check the repos identified within the uses: portions to see how those actions work. Getting this set up was a game changer and something I did not know was possible for free. I thought something far more complicated had to be set up to achieve the same level of automation.
Now, when you commit changes to your repo that contains the hugo site (or whatever else you are using), the process will be followed.
name: CI / CD
on:
push:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: "latest"
- name: Build Hugo
run: ...
- name: Copy public to VPS
uses: appleboy/scp-action@master
with: ...
- name: Copy public to html folder
uses: appleboy/ssh-action@master
with: ...