Back
Featured image of post How I made this website for FREE

How I made this website for FREE

The path from Hugo static site generation and Sassy styling to GitLab pages with continuous deployment

It was about time to make a personal website - I thought to myself a couple weeks ago. I didn’t really know what I would do with it, or how would I make it, but the urge and feeling of unease for not having one was constantly bugging me - so I set off.

Choosing a framework

Nobody makes websites from scratch. There are many frameworks too choose from, and a new one is born every day. Naturally, I checked whats in the news and came across a beta Bootstrap 5 - now without the unholy mess of jQuery.

I played around with it for a bit, but concluded that it was too heavy for my use case, I just needed something nice and light…

The Bootstrap 5 dev note said they are now using Hugo for generating their docs site, and that it’s way faster than their previous choice - Jekyll. Written in Go? Check. Well documented? Check. Does TS out of the box? I’m already writing the docker-compose file!

Themes? Themes.

While Hugo allows for easy development of custom themes, I didn’t feel quite ready. Learning is always easier from example so I checked out a dozen or so themes, reading through their source while referencing the Hugo templating libraries. In the end I liked the theme Stack by Jimmy Cai the most and chose it as a starting point to modify.

The first step was modifying the colors and fonts (no need to change the design, the theme is fine). To find combinations I played around with <coolors.co> and <fontjoy.com>. In the end I chose two color combinations, #6096ba and #e7ecef for the light theme and #86C232 and #222629 for dark (swap themes to see these better). Of course, I found some shades and similar colors to make different elements stand out. Here I am incredibly thankful to Matea Lemac, who helped catch a few design mistakes (e.g. one of the first iterations had the cards darker than background in the light mode).

A couple more minor changes, and the theme personalization was done.

Bells and whistles

Now, I couldn’t live with myself if I didn’t add something a little extra.

The first inspiration came from Gari Cruze’s website. His sections “17 Random Things” and “Oh Yes, They’re Talking” and they really appealed to me. They inspired the They Sure Do Talk section, which I’m still filling. The other thing I pulled from both the “17 Random Things” and a couple portfolio websites doing similar things was the iterating “Noah Jelich, a _______” below my image. This was done using a function triggered on a click event, that randomly iterates through a list of different terms. Check it out here.

Another item that took some work and thinking was the background. For a few years I’ve had this dragon image as an avatar in many places and I’ve really come to associate it with my online presence. I wasn’t sure if I could keep it but I had to give it a try. After a couple hours spent tracing the vector in Figma, and smoothening all the lines I finally had a two-color svg of the dragon.

The old dragon logo PNG
The old dragon logo PNG
New dragon logo, traced to SVG
New dragon logo, traced to SVG

I placed it as a background, but it just didn’t feel right. I tried absolute and sticky positioning, but neither felt right regarding scrolling. Then I remembered parallax scrolling - background scrolling at a different rate than the foreground. Writing and testing the feature took a couple hours, but it was simply a combination of scroll progress and the svg image dimensions. Check out the code here.

I also made a few custom shortcodes, for example one is being used to show the color squares next to the hex values in the above section.

All of the above are available to read on my GitLab.

Hosting on GitLab Pages and SSL

I chose GitLab since I was already using it for work, and had more experience using its CI/CD process. The setup was quite easy - I started with a HTML template modified it to support the docker file. Once that was up, I only had to add SSL, which was a simple process of following the GUI in Pages settings, and adding a couple DNS records on NameSilo where I bought the domain.

I also added Google Analytics, but that was as simple as writing a new partial for GA4 and adding the tracking code to the config variables.

Read the source

Of course, the whole website is open-access and can be read on GitLab. In the following weeks I’m going to add more documentation to parts of code. You can also click links to file histories above to see how certain features and settings were done.

comments powered by Disqus