Introduction

Building a personal webpage has been a recurring thought for quite some time. However, for some reason or another (for example not owning a domain), I’ve always put off such a project. Recently, I had some free time on my hands so I had no excuse to not give it a go.

The main idea for said homepage would be to create a simple landing page with a blog and the possibility to organize and write about my personal projects. This (perhaps rather simple) project ended up taking a bit longer than I anticipated and made me explore some new, at least to me, technologies. As I write this post, the website is still a work in progress and new things will be added in the future. But, I do believe that its current state is already satisfactory for public viewing.

In the following posts, I’ll talk about my journey of creating this website, including the interactive elements on the homepage. But first, in this post, I’ll write about the foundation of this website and how I have reached it.

Picking a framework

Not being a fan of front-end development, I was not very keen on creating a website from scratch. So the plan was to find tools that ease the creation of websites. In my research for these tools, inevitably I came across WordPress, Drupal, Wix, Squarespace, etc… However, these solutions seemed inappropriate for my application.

Wix and Squarespace are made for designing websites with a drag-and-drop philosophy. This approach is favorable for non-developers/coders, but it yields lesser flexibility in regards to customization. Furthermore, self-hosting with these two is not possible and their use incurs a regular fee.

In all of these regards, WordPress or Drupal are a much better choice. Still, the use of these Content Management Systems (CMS) would require the deployment of a classical full web stack (PHP, SQL database, Webserver). This approach seems reasonable for fully dynamic websites but, in my opinion, is a bloated and unnecessary approach for my use case.

During my research, I’ve also stumbled upon static site generators. These CMS take a very different approach to WordPress and others. Instead of relying on a web app (and the rest of the stack) to generate the webpages on-the-fly, these tools pre-compile the website, and thus only require a simple HTTP server. This much simpler approach yields faster website loading times and has a much smaller resource footprint at the backend. Two examples of static site generators are Jekyll and Hugo. Both these generators consume Markdown (and other markup languages) to produce websites. This approach pleased me. The next step was deciding between those two implementations. Jekyll would be a solid choice since its use is recommended at GitHub Pages, and it is an older player in the field. Moreover, later I found that I had already used Jekyll to create a website for a university project. However, I decided to use Hugo, since it was made in Go (a language I’m interested in learning), the compilation times are blazing fast and it seemed like a cool framework to learn.

Hosting the website

Considering I opted for a solution that relies on user-sourced hosting, I now had to figure out where to host my website. Hugo allows, through its command line interface, the direct deployment to platforms like Google Cloud, AWS or Azure ($ hugo deploy). These are big names in the computer cloud infrastructure business, and would certainly be a very low-maintenance solution. Yet, once again, using these services would most likely require me to face a regular fee, which I am not a big fan of. One reasonable approach for static website hosting would be to use Github Pages or GitLab Pages, given that they offer free hosting for static web pages. Nonetheless, I opted for self-hosting on my home server. Hosting a static server is very light on computing resources, and gives me the flexibility to expand and add dynamic elements to the website in the future. One example of a future dynamic feature is the inclusion of a comment section in each post. Such a feature would require a backend server (as opposed to only having a simple HTTP file server). Self-hosting the website also gives another use to my local server (which I’ll certainly write about in a future blog post).

So, the page is served by an auxiliary Caddy web server inside a Docker container on my server machine. Having HTTPS (and thus SSL) is a must in the modern security-aware era, so my main Caddy server (the one that is exposed to the public) is responsible for creating and managing my SSL certificates issued by Let’s Encrypt. As a means of protection from a distributed denial-of-service (DDOS), the website is proxied by Cloudflare (which nicely provides a good free tier).

Customizing the website

After picking Hugo as the chosen framework to create this website, and setting the back-end up, the next step was to pick a theme. There are tons of Hugo Themes and the one I’ve settled on is the PaperMod theme. One of the features that attracted me to this template was the option to have a single landing page-like homepage (Profile Mode), instead of displaying posts and other content on the homepage. Another cool feature is that it provides built-in client-side fuzzy searching (using Fuse.js). Such an option is normally only provided by a back-end through an API.

I went along to create said homepage and it looked pretty and simplistic. But I wasn’t satisfied, the page seemed too bland. I recognize that is the point of the template I’ve chosen and that the customization opportunities it provides locks you in that mindset. Yet, this lack of character allured me to somehow enrich it.

Once again, I don’t enjoy front-end development very much and I’m not much of a designer, which is a very useful skill to have when creating fancy web pages. However, I really did want to add a personal footprint to the website, so I turned to two of my passions: Sound and Music.

In the next post, I will talk about where this idea led me 🙂.

TL;DR

For the longest time, I wanted to create a personal website. After exploring the options, I settled for a static website created using Hugo as the webpage generator, with PaperMod as the base theme. This webpage, which I decided to self-host, uses Caddy as the web server, Let’s Encrypt to generate SSL certificates and Cloudflare to provide DDOS protection. I was not completely satisfied with the aesthetics of the final product, so I set out to enhance the overall experience. The first idea, to be explored in the next post, is to use, in some way, sound.