How I Made This Website, Part 1

Since this website is going to be about what I build, I figured I’d start with a kind of meta post describing how and why I built this website.

Step Zero: Motivations and Goals#

I think many of us have thought about making a personal website at one point, but haven’t followed through for one reason or another. For me, those reasons were:

• Questioning my writing skills
• Unwillingness to deal with maintenance and organizational overhead
• Will an out-of-date website make me look bad?
• Decision paralysis regarding the tech stack or framework to use

Over time, some experiences changed these factors and started to outweigh the negatives:

• Posting on HN (less successfully) and Reddit (more successfully) showed me that I can get people interested in the things I make.
• Deploying a “serverless” website on Amazon S3 + Cloudflare, which I will write about separately, gave me a sense of simplicity like in the old days, when you would just upload an index.html via FTP and voila - you’d have a website.
• The realization that it’s fine for a personal website to go unmaintained for a while. For companies, I get that a deserted social media channel looks bad, but for personal websites I think it’s perfectly acceptable. People get busy.
• This Hacker News discussion was a good starting point to fight decision paralysis.

Goals#

1. Most importantly as a portfolio, to show people what I worked on, how I think and what interests me.
2. Personally to get some perspective on what I’m doing.
3. Stretch goal: Building a source of traffic and exposure for my projects.

Step One: Research#

The Hacker News discussion mentioned above was a good starting point for this endeavor. The Hugo framework was brought up with glowing recommendations, so it went to the top of my list. Also I didn’t want to spend too much time deciding on the tech stack, to not allow decision paralysis to creep back in. I figured if it’s good enough for the average HN user, it’s probably good enough for me.

Somewhat at the same time, I came across this recently launched website builder. The design is really fun and unique in my opinion, but I wasn’t sure if people would “get” the intentionally retro and clunky UI. Besides, it’s still in development and missing some important functionality, e.g. a blog section or a contact form. I had a short exchange on reddit with the creator of the website, where he said that those were actually the next things on the list. In the end, uncertainty about the timeline and end results of this project led me to roll my own solution using Hugo.

Step Two: Getting Started#

The nice thing about Hugo (and other static site builders) is that you get all the tools to create your site locally, and eventually get a neatly packaged website with all the assets baked in, that you can upload anywhere you want. Kind of like in the good old days (as mentioned above). This opens up many possibilities to get the site online for free, for example using GitHub Pages or Amazon S3. The big advantage is of course cost savings, and you don’t have to worry about setting up a server and keeping it running. Additionally, these services rarely if ever go offline, which is nice. And if they do happen to go offline, people probably have bigger issues than not being able to reach your blog (just sayin’).

Another nice thing about Hugo is that it’s GDPR-ready. In the config file, you can choose how to handle Google Analytics, Youtube and so on. For example, you can set privacyEnhanced = true for Youtube, which automatically builds your site to use youtube-nocookie.com. Since I’m not setting any cookies myself, this allows me to get away without a cookie banner, which is great.

To install Hugo I simply ran snap install hugo --channel=extended in the terminal, after which you can create a new project with hugo new site project_name. And that’s it, you can start modifying the config.toml to add things like the site title or the menu structure. The actual content is written in Markdown, similar to GitHub’s Readme.md files. To run the development server, simply run hugo server -D to be able to open your website locally with hot-reloading. And basically, for an MVP blog all that’s left to do is creating .md-files with your content and publishing your website.

Things That I Like So Far About Hugo#

• It’s easy to get started. You can get everything up and running in less than an hour, so you can focus on writing content.
• It’s easy to configure it to be GDPR-compliant.
• It has a good number of standard features baked in, e.g. image resizing or video embedding
• Hot reload is very quick
• There’s a good selection of free templates.
• The content is portable, since it’s written in Markdown. So it should be easy to switch to a different framework down the road.

Gotchas and Annoyances#

• At first I used quotation marks around links, which makes Hugo interpret them as internal links, which wasn’t obvious to me and broke a number of links.
• hugo deploy for automatically building and uploading your project seems convenient, but I couldn’t get it to work yet. I get an NoCredentialProviders error, even though I added my AWS keys and aws s3 ls works.
• If you want to customize your theme, you’ll have to learn the templating conventions of Hugo. But at that point, I would probably just use nuxt-content, which is much more versatile.
• In the same vein, I wanted to create a page that doesn’t have links to the next/previous post and I didn’t find an obvious way to do it.
• Hot reload doesn’t preserve the state. I was changing things on the menu, and every time I made a change the menu closed and I had to open it again, which was a bit annoying.

For the Next Part#

In the next part we’re going to look at themes, the configuration file, customizations, and the deployment process.

Things to figure out#

• How to open external links in a new tab. target="_blank" doesn’t seem to work in Hugo. Ideally it would automatically apply to all external links.
• How to add preview images for blog posts on the overview page.