Updating my website

I recently read a post titled Moving to Eleventy which included this sentence.

After a while, I realized that this was what had caused my problems with the previous generators: they were black boxes, written and configured in languages that I didn't know, so I didn't know how to fix them when things went wrong."

Troz

This resonated with me. I've built my website using the Hugo static site generator for a while now. It works very well, it's simple to use and it produces a good site. But it's written in Go, a language that I do not know, and I rely on third-party themes to make it look good. There are things with every theme that I have used over the years that I wish I could change, but it's a bit of a black box. Too may moving parts.

When I heard about Eleventy and Troz's experience with it, I decided to give it a try. My plan was to experiment with it a bit and see how I liked it.

At about the same time, I heard about the Zed Editor and I wanted to try it out. I've been using Nova to build my site for a while now and I'm very happy with it, but I'm always interested in trying out new text editors, so I decided to give it a try while working with Eleventy.

It's been a while...

I built my first website in the early 1990s for the Optical Fiber Laboratory, where I was doing research. It was the very early days of the Internet that we now know, and version 1.0 of HTML. CSS and Javascript were not really a thing at the time.1 There were no dynamic websites then.

Then, in the early 2000s, I built a couple of websites for games and other projects. At the time I learned HTML 4.0, a bit of CSS, Javascript, and PHP. I used that for many years, then around 2015 I turned to static site generators.

So let's just say that that when I started this new project, my CSS and Javascript skills weren't really up to date with the latest standards. Things have changed a lot for web development since I learned these languages.

One Step at a Time

I followed in Troz’s footsteps, starting with the Eleventy tutorial. It didn’t take long for me to veer off from the tutorial project and start creating my own website. I began by replicating the structure of my previous site with only a few pages. I incorporated basic styling, chose a colour scheme, implemented navigation, and added collections for the few articles I had converted.

I used TOML for the front matter on my Hugo site, so I needed to transform it into YAML for Eleventy. To simplify the process, I employed Zed’s inline assistant tool. Additionally, since some of my content included Hugo shortcodes, I had to convert those as well.

Improvements

Here are a few of the ideas I was eager to execute:

• Sidenotes" I often make use of footnotes in my texts. I want to add context or some relevant information, but not break the flow of the current statement, looking up footnotes at the bottom of the page does break the flow, so, as Tufte suggested, I wanted to implement sidenotes.

• Image handling: When I use images on a page, I want to be able to click on them and open them in their own tabs. This way, I can zoom in or at least see them in full. Images are scaled to the content, and, particularly on phones, it can be very hard to see what the image contains.

• Table of Contents: Some pages have a table of contents. This feature has been improved. Previously, the table was visible, but it disappeared when scrolling.

I am aware that I could have incorporated all of these elements into a Hugo site and the themes I used in the past. However, each theme has its own approach and making a single modification often leads to unintended consequences. Starting with a fresh structure and one that I have personally designed helped me to achieve some of these goals.

Still a Work in Progress

I have established a baseline for what I want with this version. I know that the responsive design needs work, so if you’re reading this on your phone, I apologize. I intend to address these issues in future updates.