How I made this website

I’m overdue for another blog post, and I just spent a few hours improving the look and feel of this website, so I want to write a bit about how I made this website for all my friends who might not know how to do it (and also for me if I forget how). I think it’s pretty compelling to have this kind of setup, and there’s plenty of static website resources out there, but I figured I might as well explain my approach.

Prerequisites

Domain Name

You should purchase good real estate of course. I got twilson.xyz for like 2 bucks, and the .xyz TLD costs like 4 a year I think.

VPS

I use Vultr, where I pay for a basic plan that gives me access to a 25GB server which I can access via ssh.

Registrar You need to set up your domain with the registrar. It involves setting up something called “A” DNS records for your domain name to point to your server.

Setup

Log into the server you made and install caddy for the web server. You can set up a basic configuration file for it:

*.twilson.xyz, twilson.xyz {
	root * /var/www/twilson/public
	file_server
	encode gzip
	tls {
		on_demand
	}
}

http://twilson.xyz {
	redir https://{host}{uri} permanent
}

With the server running, it should work now, and you can upload the source code of your website to /var/www/my_website on the server.

Making the site

I use the static site generator Zola, but many people use Hugo and they work in pretty much the same way, which is you write templates for the HTML, and then use markdown/markup documents to specify the page contents. Rather than talk about it, I’ll point you to the code.

That is the basics of it. I don’t use any other web tooling, except for MathJax for the equations you see in some of the other posts.

The font is EB Garamond. I have other fonts that I slightly prefer but this is one of my favorites. Unfortunately I can’t seem to get some fonts to work well in firefox.

I plan to steadily improve this site and to continue writing about what I’m working on (hopefully more regularly). So I hope this post can be something that I can come back to when I make any improvements to the site. Do you like the look? It’s all my CSS.