How to build a website in a weekend

Contents

Introduction ⚓

This website isn’t something I’d planned. It was kind of a last-minute idea that started from, of all things, a poll on Mastodon. I never thought to dedicate an entire website to a persona, but there are a lot of ideas I want to share that wouldn’t fit right with my—I hate this term—“personal brand.” So, I pulled out my hacker gloves, dusted off the part of my brain where I keep my HTML and CSS knowledge, and went to work…looking for tools that other people made so I wouldn’t have to start from scratch. That’s how I found Hugo.

Using Hugo ⚓

If you don’t know, Hugo 🔗 is one of the most popular static site generators, or SSGs. SSGs are frameworks used to build websites: more specifically, they’re starter kits that web developers can build off of to create a fully functional website. In techie terms: they take your crummy hand-written HTML/CSS/JavaScript and massage it into something people can look at without thinking your site was made in 1993.

Hugo isn’t the only SSG by any means, but it’s fairly easy to use, has tons of community support, and is open source so you can modify it to your needs. You still need some web dev knowledge to work with it, but once you do, it’s actually really nice. Plus, it’s super fast. It takes me maybe 3 seconds to completely rebuild my website after I make a change, then 3 more seconds to publish it. It takes me longer to preview and test my changes than it does to make them, and that’s pretty awesome.

On its own, Hugo doesn’t make your site pretty. It just gives you the tools to make a site however you want. If you just want something that looks good, there are tons of themes 🔗 you can use to get started. Themes give your site a custom yet consistent appearance, color scheme, font scheme, and overall look. Some even add neat features like light/dark modes, responsive design, and custom page templates.

I tried a few different themes, but the one I ended up going with was TailBliss 🔗. It looks amazing, the layout is fantastic, and I love blue, so it was a perfect fit. It took some time to figure out how it worked, and I made some tweaks to the layouts (like how author data and tags are rendered), but now I feel like I’ve got a good grip on it.

With a static site generator and theme on-hand, the next step was to figure out how to actually get my website to the public.

Setting up the web server ⚓

For those without technical backgrounds, web servers are applications that serve websites (surprise!). Basically, in the case of a static site, you point them to the folder containing your website’s files, tell them what domain name, port number, and/or URL to serve the files for, and that’s it. Nginx 🔗 is one of the most popular web servers out there, and the one I’m most familiar with. Plus, I already have Nginx running as a reverse proxy 🔗 for a bunch of other services I host, so it only made sense to host this website through it too.

The nice thing about static sites is that you can serve them directly from a folder. All you need to do is point Nginx to the folder’s location and it’ll do the rest. My server block for aires.fyi looks a little something like this:

server {
	listen 443;
	listen [::]:443;
	server_name aires.fyi;

	location / {
		root /var/www/aires.fyi;
	}
}

On the server, all I needed to do was create the folder /var/www/aires.fyi, drop the files that Hugo generated there, then restart Nginx so it can pick up the new configuration.

There’s one other thing though: even though this is a static site, we still want to have TLS security. I have a TLS certificate for my other services, but since this is a brand new, entirely separate website, it makes sense to generate a new one. Fortunately, Let’s Encrypt 🔗 provides free TLS certificates. They even have a tool to automate cert renewals, so you can set it once and forget it!

To generate this certificate, I’m using a program called certbot 🔗. I have certbot running on port 80, and I’m using standalone mode 🔗 to verify my domain. The command to request a cert is simple enough:

certbot certonly --standalone --preferred-challenges http --cert-name aires.fyi -d aires.fyi

If validation is successful, certbot will dump the new cert into the folder /etc/letsencrypt/live/aires.fyi. Now I just add two more lines to my Nginx configuration block, pointing to the certificate and private key:

ssl_certificate  /etc/letsencrypt/live/aires.fyi/fullchain.pem;
ssl_certificate_key  /etc/letsencrypt/live/aires.fyi/privkey.pem;

And that’s basically it! I have some other options set to enable things like gzip compression, OCSP stapling, and HSTS, but this is the bare minimum needed to get this thing running. If you run a web server and want to enable TLS, check out Mozilla’s SSL configuration generator 🔗 to get a good base configuration.

Tweaking TailBliss ⚓

Like I mentioned, the Hugo theme I’m using is TailBliss. It’s very pretty by default 🔗 and is easy enough to customize. Tailbliss comes with templates for custom 404 pages, list pages, home pages, and single pages, plus a bunch of partial templates for generating the header, footer, navigation menu, pagination, and much more. There are some quirks, like how some HTML blocks are repeated in multiple places instead of just being one partial template, but nothing that breaks the theme. And for all I know, that could have been a deliberate choice I’m not aware of. I am only less than a week into learning Hugo, after all 😄

Wrapping up ⚓

I could’ve easily went with something I’m more familiar with like WordPress, but part of the appeal of this project was learning an entirely new framework and putting some long-forgotten skills into practice. It’s not often I get my hands dirty with HTML and make something that I actually think looks good, and while WordPress would’ve made it easy, Hugo made it fun. There’s also something special about having a website that can run on literally any system, has no dependencies, and loads instantly. I have no idea what this site might turn into in the future, but for now I’ll keep tinkering.